使用vue2开发快3年了，确实方便无比，再配合element-ui等ui框架，开发Erp简直都不用带脑子写代码。确实省了不少头发，哈哈哈哈哈。

Erp项目主要就是由表格、表单、增删改构成。下面我就从以往的Erp项目开发屡一下常用功能点及配置项

使用Vuex状态管理对登录账户、权限等相关信息进行存储和读取

由于vuex是对于此次会话的状态管理因此如果刷新页面等操作会将之前的状态清空因此对于用户权限登录账户基本信息需要借助localStorage 进行存储

举个例子：

[RECORD_MENULIST](state, menuList) { 
    state.menuList = menuList
    localStorage.setItem('h5MenuList', menuList)
},  
[GET_MENULIST](state) {
    const menuList = JSON.parse(localStorage.getItem('h5MenuList'))
    if (menuList) {
       state.menuList = menuList
    }  
},

全局定义常用过滤器

像金额重量等数字抹零的操作、重量进行单位换算的相关需求，在多个页面都会需要使用，全局定义后更省事

可以在main.js中进行全局注册

Object.keys(allFilters).forEach((key) => {  Vue.filter(key, allFilters[key])})

父子组件之间通信

在Erp系统中少不了增删改，对于新增编辑的操作，我通常不喜欢直接写在页面组件中，通常是将弹框封装成子组件，这样才不会造成页面组件的代码过长。

父组件：

<product-dialog    
    :productDialogVisiable="productDialogVisiable"  
    :orderNo="orderNo"
     @closeDetailDialog="closeDetailDialog">
</product-dialog>
//组件引用
 components: {
    ProductDialog: r => { 
     require(['@/components/productDialog'], r) 
    }
},
// 接收子组件通知 
closeDetailDialog() {
    this.productDialogVisiable = false 
}

子组件：

// 属性的定义  
props: { 
       productDialogVisiable: { 
         type: Boolean 
       },
       orderNo: {
          type: String 
       } 
 },
// 状态监听
 computed: {   
     dialogVisable() {     
     if (this.productDialogVisiable == true) {  
          this.getProductDetail()    
     }
      return this.productDialogVisiable
  }  
},
// 通知父组件
  methods: { 
       handleClose() {  
            this.$emit('closeDetailDialog') 
       },
  }

当父组件需要调用子组件方法时可使用一下方法调用

 <rubbish-dialog ref="rubbishChild"></rubbish-dialog>

  this.$refs.rubbishChild.updateDataFun()

新增编辑弹框的一些常见问题

由于js的浅拷贝，在对列表中某条数据进行编辑的时候，会将数据带入弹框中，此时需要对数据进行深拷贝，否则会出现，列表拿到弹框的修改的数据的情况

this.drySortFormSubmit = {...data}

在新增或修改完毕后，需要进行对弹框数据的重置

    handleClose() {
      this.formSubmit = { ...this.$options.data().formSubmit }
      this.$refs.formSubmit.resetFields()
      this.addDialog = false
    },

路由hash和hository的区别

在单页面应用中（SPA）都需要引入前端路由系统。前端路由的核心就是改变视图的同时不会向后端发出请求。

1. hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.xiwa.com/#/login，hash 的值为 #/login。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

配置axios及拦截器

我一般会在main.js中全局注册axios，毕竟几乎每个页面都少不了请求。

以下是我的response拦截器配置

http response 拦截器var fullPath = ''axios.interceptors.response.use(    response => {        if (response.data.code == 401){            if (!fullPath) {                fullPath = router.currentRoute.fullPath            }            if (fullPath) {                router.replace({                    path: '/login',                    query: {redirect: fullPath}                })            }            var res = response            res.data.message = "用户登录已过期，请重新登录"            return res        }else {            return response        }    },        error => {        if (error.response) {            switch (error.response.status) {                case 401:                    // 401 清除token信息并跳转到登录页面                    VueCookie.delete(Config.cookie)                    router.replace({                        path: 'login',                        query: {redirect: router.currentRoute.fullPath}                    })            }        }        return Promise.reject(error.response)    });

生命周期及一些禁忌

我常用的生命周期有 beforeCreate(), mounted(), destroyed()

beforeCreate() 时还没有创建dom，我通常用来在此生命周期中调用接口获取登录状态

mounted()是指dom加载完毕

针对外部调用的方法，要提前将方法附在windows下，如下代码

  mounted() {
    window.usbNewData = this.usbNewData
    window.getConnectStatus = this.getConnectStatus
  }

echarts等图表地图所需要init的dom对象也需要在mounted()生命周期才能初始化

destroyed() 实例销毁后调用

当有在线支付等相关功能时通常都会时隔几秒调用接口获取支付状态，及时页面组件切换，获取支付状态的定时器也不会停止，因此在组件销毁的生命周期中关闭定时器最佳。

对于在data对象中未声明的变量，进行修改后在视图不更新问题（dom中更新无效）

给对象新增属性 —— $set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性例如：

this.myObject.timeBtn= false
//需要改成
this.$set(element,'timeBtn',false)

element-ui对于列表的操作

针对不同状态，同一列表会有不同的列及操作，这就需要对于列的显隐控制。

此操作需要对需要显隐的列定义key,否则会有错乱的现象

<el-table-column  prop="callTime"  width="140"  
    v-if="activeName != 2" key="calltime"  align="center"  
    label="预约时间"></el-table-column>

兼容低版本浏览器

开发时我们通常会使用promise，let,const等es6语法，但是在低版本浏览器中并不支持，因此我们可以引入插件babel-polyfill 来兼容下。

npm install babel-polyfill -S

安装后我们需要在webpack.config.js中配置下

module.exports = {
  // entry: {
  //   app: './src/main.js'
  // },
  entry: ['babel-polyfill', './src/main.js'],
}

修改element-ui主题色

1、安装主题工具在自己安装目录下执行 npm install element-theme --dev

2、安装chalk主题 npm install element-theme-chalk -D

3、修改主题色直接在element-variables.scss里面修改样式

4、在vue项目中main.js引用 import ‘./assets/css/index.css’

总结

以上是我做Erp常用的功能点及配置项，希望对你有帮助。