weixin_44559272-CSDN博客

原创 vue项目优化 — 按需加载路由

组件先在路由里注册但不进行组件的加载与执行，等到需要访问组件的时候才进行真正的加载，通过import()动态地加载模块，把子模块单独分离出来，打包成一个单独的文件箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return //vue异步组件和webpack的代码分块点功能结合，实现按需加载 //模板字符串动态拼接组件路径（ps：@指向src该目录下必须有一级目录，不然异步加

2020-11-26 15:12:14 137

原创 vue合集

v-model的底层原理：一方面modal层通过defineProperty来劫持每个属性，监听到变化就更新相关的页面元素。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值；其实就是既绑定了数据，又添加了一个input事件监听。（https://www.jianshu.com/p/ceaab8df4e78）（https://blog.csdn.net/weixin_42380658/article/details/86568666）问题3.vu

2020-11-24 18:52:24 121

原创 vue项目中axios的封装和接口的统一管理

在src下面新建一个axios文件夹和一个api文件夹，然后在axios里面新建index文件，index文件用于封装axios，在api文件夹里面按模块管理接口。 axios/index.js 1.引入引入qs模块，用来序列化post类型的数据 2.环境的切换我们的项目环境有开发环境、测试环境和生产环境，node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。 3.设置请求超时通过axios.defaults.timeout设

2020-10-29 18:44:19 149

原创 vue项目中keep-alive、meta的实际应用

需求：司机库、企业信息管理、设备库三个模块的页面在数据详情页及数据操作页回退到列表页面可以保留用户之前的筛选状态，其他页面无需保留筛选状态实现：用keep-alive包裹组件router-view，通过$route.meta的keepAlive属性区分需要缓存的页面需要注意的点：v-if不能加在keep-alive上面会使缓存失效，可以加在router-view上或者在keep-alive上改用include，keep-alive是缓存不活动的组件实例（把router-view里的内容存在组件的dat

2020-10-29 15:46:20 843

原创 ES6--ES10

ES6(ES2015) 1、Let 和 Const 2、类 class Person { constructor(name, age) { this.name = name this.age = age } information() { return 'My name is ' + this.name + ', I am ' + this.age } } 3、箭头函数 const list = [1, 2, 3, 4, 5,

2020-10-29 15:28:38 106

原创 grunt、gulp、webpack前端自动化构建工具

grunt：压缩文件，合并文件，简单语法检查。 gulp：类似于grunt，但 gulp的流操作要比 grunt的频繁IO操作更快更便捷。 webpack核心操作 Entry 入口 Output 出口

2020-10-29 15:28:17 92

原创 vue项目优化一多环境部署

第一步： package.json文件下scripts节点对象中新增test属性。 "test": "node --max_old_space_size=6096 build/build-test.js", 第二步：在build文件夹下复制一份build.js，重命名为build-test.js。修改build-test.js中的参数process.env.NODE_ENV、webpackConfig、spinner。第三步：在build文件夹下复制一份webpack.prod.conf.js

2020-10-29 15:26:16 64

原创 vue项目优化 — 按需加载elementui

单页面引入elementui **main.js中** import { Button, Form, FormItem, Input, Row, Col, Message } from 'element-ui'; Vue.use(FormItem) Vue.use(Form) Vue.use(Input) **单页面中** import 'element-ui/lib/theme-chalk/index.css';

2020-10-29 15:26:06 242

原创 vue使用及理解

vue快速搭建

2020-09-14 12:23:28 114

原创 sessionStorage、localstroage 、 cookie

三者共同点：都是保存在浏览器端，且同源的。区别： 1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M。 3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存

2020-09-11 15:32:35 150

原创 flex的常用布局

容器属性（设置在容器上） 1.flex-direction （元素排列方向） flex-direction:row（横向从左到右排列，左对齐） flex-direction:row-reverse（右对齐） flex-direction:column（从上往下排列，顶对齐） flex-direction:column-reverse（底对齐） 2.flex-wrap（内容一行容不下时有效） flex-wrap:nowrap（默认超出不换行） flex-wrap:wrap（换行，第一行在上方） flex

2020-09-11 15:09:31 169

weixin_44559272的博客