Vue2使用总结（针对Erp开发）

小胖手
2,642 阅读5分钟

使用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常用的功能点及配置项，希望对你有帮助。







avatar
文章
阅读
粉丝