vue+elementUI踩坑

关于elementUI

---

• 日期组件：当通过不同的日期下拉框来控制显示不同的日期组件的时候，会发现日期组件错位,跑到屏幕左上方去了
  研究一番发现,我在不同的日期组件使用v-if显示的，改为v-show即可
• 表格show-overflow-tooltip：在设置表格内容多余时，鼠标悬停提示的提示框样式：在通用css中设置

.el-tooltip__popper {
    max-width: 80%;
    line-height: 180%;
  }

• 表格：td,th不对其：在通用css中设置

body .el-table th.gutter{
       display: table-cell!important;
   }

• 表单编辑：输入框无法输入内容，但是内容能正确赋值显示，无论是 input 还是 textarea

找到问题所在语句是是（点击编辑的方法中）

this.enterpriseForm["areaAddress"] = row.enterpriseAddress

解决办法：

this.$set(this.enterpriseForm,"areaAddress",row.enterpriseAddress)

关于vuex

---

通过vuex来共享一些全局变量和公共接口

• mutations与actions的使用及区别：https://www.cnblogs.com/0915ty/p/9626240.html
  mutation: 必须是同步函数,回调函数中进行的状态改变都是无法追踪的，所以不要在里面调用接口
  actions：用来解决mutations只有同步无异步的问题
• 组件引入：
  1：直接在data（）中赋值给变量
  2：通过computed引入

computed:{
        roleList(){
            return this.$store.state.roleList;
        },
    },

推荐使用2，因为在调试代码过程中发现当进入目标页面时，store中roleList接口还未返回数据，roleList获取为空，但当接口返回数据，目标页面roleList的值未发生变化

• 浏览器刷新时，store里面存储的变量都会清空回退到初始值，这里我将用户的信息对象用localStorage进行存储

关于echart地图引入

---

1：安装echarts组件
2：在main.js中

import echarts from 'echarts'
import 'echarts/map/js/china.js'
Vue.prototype.$echarts = echarts

或者不在main.js引用，而在组件中直接调用，根据项目中图表使用情况而定

关于懒加载

---

项目中使用的vue是异步组件技术：resolve => require([’…/components/login’], resolve)，还有其他几种方案
https://segmentfault.com/a/1190000011519350?utm_source=tag-newest

过滤器

过滤器的使用参考了这边文章
https://blog.csdn.net/qq_33485463/article/details/80812026
创建一个filter文件并export
在main.js文件中注册，Vue.filter(key,vueFilter[key])
在组件中使用时通过“变量 | 过滤方法”来使用

关于首页加载优化

---

项目部署到线上时，登录页加载速度十几秒，将近20秒
优化结果3秒左右吧，这是前端和服务端共同努力的结果

服务器上对包进行了压缩，这里就不介绍了，说说前端这块做的努力
1：图片：将图片放在服务器上，比如说放到阿里云上，然后项目中使用阿里云的地址，一个500KB多的背景图片原本需要2-3s的加载时间,使用该方法之后只需要160ms左右
2：通过CDN引入：使用cdn可以回避服务器带宽问题
参考的这篇文章 https://blog.csdn.net/u014231144/article/details/83791877
在index.html中引入依赖包

在webpack.base.conf.js中给module.exports添加externals属性

在main.js中将这些import给去掉，有些去掉报错我就没去了
注意Vue.use(ElementUI)也要去掉

3：其他代码的优化就不在这里说了

总结

webpack了解的不够深刻