- 博客(15)
- 收藏
- 关注
RSS订阅原创 vue项目优化 — 按需加载路由
组件先在路由里注册但不进行组件的加载与执行，等到需要访问组件的时候才进行真正的加载，通过import()动态地加载模块，把子模块单独分离出来，打包成一个单独的文件箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return//vue异步组件和webpack的代码分块点功能结合，实现按需加载//模板字符串动态拼接组件路径（ps：@指向src该目录下必须有一级目录，不然异步加
2020-11-26 15:12:14
256
原创 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
166
原创 vue项目中axios的封装和接口的统一管理
在src下面新建一个axios文件夹和一个api文件夹，然后在axios里面新建index文件，index文件用于封装axios，在api文件夹里面按模块管理接口。axios/index.js1.引入引入qs模块，用来序列化post类型的数据2.环境的切换我们的项目环境有开发环境、测试环境和生产环境，node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。3.设置请求超时通过axios.defaults.timeout设
2020-10-29 18:44:19
206
原创 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
961
原创 ES6--ES10
ES6(ES2015)1、Let 和 Const2、类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
157
原创 grunt、gulp、webpack前端自动化构建工具
grunt：压缩文件，合并文件，简单语法检查。gulp：类似于grunt，但 gulp的流操作 要比 grunt的频繁IO操作 更快更便捷。webpack核心操作Entry 入口Output 出口
2020-10-29 15:28:17
147
原创 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
137
原创 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
331
原创 sessionStorage、localstroage 、 cookie
三者共同点： 都是保存在浏览器端，且同源的。区别：1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M。3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存
2020-09-11 15:32:35
222
原创 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
246
原创 css3新属性总结
box-sizing: border-box; 不用计算padding值filter：blur(5px); 滤镜效果，是图片模糊 filter: grayscale(100%); 使图片变黑白width:calc: (100% - 120px); 两边有30px的间隙,搭配 position: absolute;left: 60px; 使用transition：属性 过度时间 过度方式(默认ease) 开始时间; css3过渡 例如：transiton：width 1.5
2020-09-08 11:11:10
194
原创 node+egg项目搭建
1.安装node（下载地址https://nodejs.org/en/download/）2.cmd查看node版本node -v3.创建egg项目npm i egg-init -gegg-init demo --type=simpienpm inpm run dev
2020-09-07 17:04:13
591
原创 egg-socket连接
1.安装egg-socket.ionpm i egg-socket.io --save2.开启插件// {app_root}/config/plugin.jsexports.io = { enable: true, package: 'egg-socket.io',};3.配置// {app_root}/config/config.${env}.jsconfig.io = { init: {}, namespace: { '/': {
2020-09-07 17:03:51
619
原创 基于Ant Design UI框架的React项目创建及配置
react1.快速创建cnpm install -g create-react-appcreate-react-app my-appcd my-app/npm start
2020-09-04 11:11:11
592
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人