VUE项目编写总结(二)
写在前面:第二阶段的知识总结来啦,这个阶段主要是项目整体结构的布局设计,通过简单的封装和方法抽离使得项目文件更加简洁直观,不过在优化时容易陷入钻牛角尖的境地,所以我们前期还是要以实现功能为主,优化放到后面再处理。
一. Element UI 组件封装
因为element ui全部引用整体文件过于庞大,所以我们在项目编写时,通常进行部分引用。这里我们新建一个element.js文件,对element进行简单封装。
- 控制台安装babel-plugin-component
npm install babel-plugin-component -D
- 修改babel.congif.js文件,进行局部引用配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
//element 局部引用配置
["@babel/preset-env", { "modules": false }]
],
//element 局部引用配置
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
- 新建element.js文件,对用到的组件进行封装。
// 导入引用的组件
import {
Button,
Form,
FormItem,
Card,
Input,
Col,
Row,
}
from 'element-ui'
// 对引用的组件进行封装
const element = {
install: function (Vue) {
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Card)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
Vue.prototype.$message = Message,
}
}
// 暴露封装后的组件
export default element
- 封装后我们需要在main.js中进行引用
// 引用封装的element组件
import element from '@/js/element'
// 应用插件
Vue.use(element)
如上,我们在编写vue文件时,需要用到element组件时,需要先在element.js中进行添加,之后就可以在vue文件中进行引用了。
二、Axios封装
简单的理解可以把Axios看做一个专门向后端发起请求的工具,通过他我们可以与后端进行交互进行后端接口的请求。封装思路与element类似。
- 控制台安装axios
npm install axios
- 新建request.js文件,导入Axios进行简单封装。通常文件中需要添加请求拦截器和响应拦截器,这个我们后面文章再介绍。
import axios from 'axios'
// 引入message组件,进行消息提示
import {
Message
} from 'element-ui'
const requests = axios.create({
baseURL: "http://127.0.0.1:8888", // 请求接口的默认组成地址,通常为后端服务器默认接口地址
timeout: 5000, // 超时时间设置
});
// 导出request
export default requests
- 在main.js文件中进行引用
// 引用封装的axios请求
import requests from '@/api/request'
// 应用插件
Vue.use(requests)
- 编写index.js文件进行接口封装
// 封装请求接口
import requests from "@/api/request";
// 登录接口
export const login = data => requests({url: '/login', method: 'POST', data: data}) // data为接口请求参数
- vue文件中进行接口引用,发起接口请求。这个我们在后面的文章中进行介绍。
三、工具类封装
有很多的校验重复使用或者数据过多使文件变得繁重,我们就可以把这些拆出来,单独拿一个文件进行维护,在使用时通过引用进行使用。
- 新建文件 util.js,我这里把字段校验拿出来了
// 验证规则编写
let loginRule = [{
required: true,
message: '请输入登录名',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
]
let passwordRule = [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 15,
message: '长度在 6 到 15 个字符',
trigger: 'blur'
}
]
let mobile = [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}, ]
let email = [{
required: true,
message: '请输入邮箱',
trigger: 'blur'
},
]
let roleName = [{
required: true,
message: '请输入角色名称',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
]
// 表单验证,根据不同的传入值,返回不同的校验规则
export function formValidation(valid) {
switch (valid) {
case 'username':
return loginRule
case 'password':
return passwordRule
case 'mobile':
return mobile
case 'email':
return email
case 'roleName':
return roleName
default:
break;
}
}
2.在main.js文件中进行引用
// 引用工具类
import * as util from '@/js/util'
// 添加全局变量,通过prototype将util绑定到vue身上
Vue.prototype.util = util
- 通过this.util在vue文件中引用工具类中的函数、变量等。这里是引用了username 的和password的字段校验。
loginRules: {
username: this.util.formValidation('username'),
password: this.util.formValidation('password')
}
四、遇到的部分坑
- Vue文件引用时,有的import需要加{},有的不需要加{}。
这个问题在于我们封装的数据在进行暴露是,用的是 export 还是 export default ,当我们使用的是export时,引用需要添加 {},使用的是export default时不需要加 {}。具体的区别于用法可以参考:
export 和 export default 的区别 - 编译时部分element ui 无法渲染出正常的效果
没有在 element.js 中添加对应的element ui 组件,封装给项目提供了一定的简洁性之外,在使用时也要注意层层添加,完善代码