VUE项目编写总结（二）

VUE项目编写总结（二）

写在前面：第二阶段的知识总结来啦，这个阶段主要是项目整体结构的布局设计，通过简单的封装和方法抽离使得项目文件更加简洁直观，不过在优化时容易陷入钻牛角尖的境地，所以我们前期还是要以实现功能为主，优化放到后面再处理。

一. Element UI 组件封装

因为element ui全部引用整体文件过于庞大，所以我们在项目编写时，通常进行部分引用。这里我们新建一个element.js文件，对element进行简单封装。

1. 控制台安装babel-plugin-component

npm install babel-plugin-component -D

2. 修改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"
      }
    ]
  ]
}

3. 新建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

4. 封装后我们需要在main.js中进行引用

// 引用封装的element组件
import element from '@/js/element'
// 应用插件
Vue.use(element)

如上，我们在编写vue文件时，需要用到element组件时，需要先在element.js中进行添加，之后就可以在vue文件中进行引用了。

二、Axios封装

简单的理解可以把Axios看做一个专门向后端发起请求的工具，通过他我们可以与后端进行交互进行后端接口的请求。封装思路与element类似。

1. 控制台安装axios

npm install axios

2. 新建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

3. 在main.js文件中进行引用

// 引用封装的axios请求
import requests from '@/api/request'

// 应用插件
Vue.use(requests)

4. 编写index.js文件进行接口封装

// 封装请求接口
import requests from "@/api/request";
// 登录接口
export const login = data => requests({url: '/login', method: 'POST', data: data}) // data为接口请求参数

5. vue文件中进行接口引用，发起接口请求。这个我们在后面的文章中进行介绍。
   

三、工具类封装

有很多的校验重复使用或者数据过多使文件变得繁重，我们就可以把这些拆出来，单独拿一个文件进行维护，在使用时通过引用进行使用。

1. 新建文件 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

3. 通过this.util在vue文件中引用工具类中的函数、变量等。这里是引用了username 的和password的字段校验。

loginRules: {
        username: this.util.formValidation('username'),
        password: this.util.formValidation('password')
      }

四、遇到的部分坑

1. Vue文件引用时，有的import需要加｛｝，有的不需要加｛｝。
   这个问题在于我们封装的数据在进行暴露是，用的是 export 还是 export default ，当我们使用的是export时，引用需要添加 ｛｝，使用的是export default时不需要加 ｛｝。具体的区别于用法可以参考：
   export 和 export default 的区别
2. 编译时部分element ui 无法渲染出正常的效果
   没有在 element.js 中添加对应的element ui 组件，封装给项目提供了一定的简洁性之外，在使用时也要注意层层添加，完善代码