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