转自：https://juejin.cn/post/6989496048557228046 首先明确的一个前提是：请求是异步的。 在Created生命周期里Data才生成，而请求返回的数据需要挂载在data上，所以Cre…

转自：https://blog.csdn.net/u010358168/article/details/124932198 提升开发体验 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。 提升打…

转自：https://blog.csdn.net/u010358168/article/details/124932198 Preload 我们前面已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加…

转自：https://blog.csdn.net/u010358168/article/details/124925893 Code Split 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲…

Tree Shaking 开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。 这样将整个库都打包进来，体积就太大了…

SourceMap SourceMap 是一个用来生成源代码与构建后代码一一映射的文件的方案。 通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维…

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 false 类型元素 (false, null, undefined, 0, NaN or an empty string) var…

生产模式 开发完成后，我们需要将代码部署上线。 这个模式下要对代码进行优化，让其性能更好。 优化代码运行性能 优化代码打包速度 npx webpack serve --config ./config/webpack.de…

针对兼容性处理，用 Babel。 针对代码格式，用 ESlint。 Eslint Eslint 的出现就是为了解决团队代码风格不一致的问题，它可以通过配置文件让你强制使用双引号或者单引号、句尾加;或不加;。让一个项目的代…

Webpack 是基于 node 的打包工具，需要 node16+ 版本。 为什么要使用打包工具 开发时，使用的 Vue、ES6 模块化语法、Less/Sass 等预处理器的语法进行开发，这样的代码要想在浏览器运行，必须…

转自：https://blog.51cto.com/u_13942732/3132838 相同点 assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片、字体图标、样式文件等都可以放在这两个…

转自：https://www.jianshu.com/p/cad7d302e0d8

转自：https://blog.csdn.net/Start2019/article/details/110438844 多个 js 方法，不想用 vue.prototype 封装一个弹框为例： 在 components…

不显示内层滚动条也能实现内容滚动 如果存在 .el-container{height:100%} 将其去掉即可既不显示滚动条又可以自动滚动。 页面抖动 打开 dialog 弹框，或者弹出消息提示，页面会抖动一下，原因是因…

转自：程序猿微信公众号 想必大家都感受到了，很多网站、APP 近日都变灰了。 这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？ 方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太…

在前端开发中，边框border属性是经常会用到的一个属性，它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题，边框会重叠在一起（如下图），那么如何去掉重叠部分的边框？ 首先小编在这里谢谢大家一直…

改变元素的方向 flex-direction row 行排列 轴从左侧进行排列 row-reverse 轴从右侧进行排列 column 纵向排列 轴从上进行排列 column-reverse 纵向排列 轴从下进行排列 该…

图片在 DIV 中垂直居中 <div class="notice-image"> <img src="./images/news_title.jpeg" alt=…

转自：https://www.cnblogs.com/lxy0/p/11517619.html 结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构…

网页布局原则 先水平再垂直 浮动 浮动的元素不占空间 清除浮动 clear:both，或者父元素overflow:hidden 任何元素一旦浮动，均可以设置宽高，并且不会独占一行（例如 span） 如果父类中的子元素都浮…

CSS 常用属性 字体属性 font-size 文本属性 text-decoration、text-align text-decoration：规定添加到文本的修饰。 underline 定义文本下的一条线。 overl…

转自：https://blog.51cto.com/u_15061951/4263737 原来的没有封装的代码： <FormItem label="适用胸型" prop="chestShape"> <S…

通过 Node 创建 Web 服务器 创建 node 项目，安装 express，通过 express 快速创建 web 服务器。 创建项目文件夹 vue_test，在该文件夹下运行 npm init 初始化。 创建 a…

为项目添加 loading 效果 使用 nprogress 包。 安装：npm install --save nprogress 导入并使用 main.js import NProgress from 'npr…

使用场景 例如做商品添加时，分类id需要传值 1,2,3 的形式，但基于计算或判断方便，在form 的 cateId 字段绑定的是数组，并且该字段参与了 validate 校验。 待商品添加调 API 接口时，需对该字段…

引入 import * as echarts from 'echarts'; 页面 <div id="main" style="width: 600px; heig…

Vue.filter('dateFormat', function (originValue) { const dt = new Date(originValue); const y = dt.get…

// 自定义校验规则 -- 验证邮箱 // rule:校验规则, value:校验的值, cb:回调函数 var checkEmail = (rule, value, callback) => { // 验证邮箱的…

转自：https://www.cnblogs.com/libo-web/p/15705558.html box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。…