这个【vue】项目，让我明白了…

目标

熟悉vue项目的注意点
了解一些插件在vue项目中的使用

写在前面

写在前面：最近一直感觉对vue好像没有想象中的那么熟悉，对vue底层原理的理解还是若隐若现，于是模糊的自己上手了个vue项目，还别说，对vue底层理解还是作用甚微。不过也算是复习下vue项目的业务逻辑，对于个人觉的值得注意的点在此记录一下（业务逻辑略）。

关于项目

关于项目：电商后台管理：用户管理（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计。采用典型的前后端分离的开发模式。前端项目是基于Vue的SPA（单页应用程序）项目。后端技术栈（Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)，源码地址(含接口文档)：https://github.com/cwen-jdoit/vue_project_api.git），前端技术栈（Vue,Vue-Router,Element-UI,Axios,Echarts，源码地址：https://github.com/cwen-jdoit/-vue_project_shop.git）。

一：注意点

Start：对于本项目的初始化(readme很详尽)，此处不再赘述。如有问题，可评论讨论。

1. 对于eslint代码规范问题

相信大家在创建vue项目时都会有莫名其妙的规范性错误,这种错误存在于编辑器自动格式化代码与vue项目中的eslint规范冲突，让人头疼的是，这种错误还影响编译。自己也在一顿苦找之后找到了比较好的解决方法（屡试不爽）

对.eslintrc.js进行修改（可直接复制粘贴）

module.exports = {
    
    
    root: true,
    env: {
    
    
        node: true
    },
    extends: [
        'plugin:vue/essential',
        // '@vue/standard'
    ],
    parserOptions: {
    
    
        parser: 'babel-eslint'
    },
    rules: {
    
    
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'space-before-function-paren': 0,
        'eqeqeq': 0,
        'vue/valid-template-root': 0,
        'spaced-comment': 0,
        'quotes': 0,
        'eol-last': 0,
        'key-spacing': 0,
        'vue/valid-v-for': 0,
        'vue/no-unused-vars': 0,
        'vue/no-parsing-error': 0
    }
}

2. cookie、token的区别以及项目中的应用

cookie：用户登录成功后，会在服务器存一个session，同时发送给客户端一个cookie，数据需要客户端和服务器同时存储，用户进行操作时，需要带上cookie，在服务器进行验证，cookie是有状态的

token：用户进行任何操作时，都需要带上一个token，token的存在形式有很多种，header/requestbody/url都可以，这个token只需要存在客户端，服务器在收到数据后，进行解析，token是无状态的

有状态与无状态最大的区别在于：服务器是否需要存储用户信息，有状态需要服务器存储用户信息作为验证，无状态无需存储，从而大大减轻了服务器压力。

本项目应用token无状态原理：

登录成功之后，需要将后台返回的token保存到sessionStorage中
添加路由守卫，如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面
后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限

示例：

登录成功存token

// 表单预验证
        validateForm(){
    
    
            this.$refs.loginFormRef.validate(async result=>{
    
    
                //todo 验证通过发送登录请求(用message方法弹出提示框)
                if(!result) return
                //todo 发送axios请求（此时要配置axios）
                const {
    
     data:res} = await this.$http.post("login",this.loginForm);
                // console.log(res)
                if(res.meta.status != 200) return this.$message.error('用户名或密码有误！');
                this.$message.success('登陆成功');
                //@ 登陆成功后的token，保存到客户端sessionStorage中
                // 1.1 项目中除了登录之外的API只有登录之后才能访问
                // 1.2 token只有在当前网站打开期间生效，所以token保存在sessionStorage中
                window.sessionStorage.setItem("token",res.data.token);
                //@ 通过编程式导航跳转到后台主页，路由地址'/home'
                this.$router.push("/home");
            })
        }

添加路由守卫

router.beforeEach((to, from, next) => {
    
    
    // 如果用户访问登录页，直接放行
    if (to.path === '/login') return next()
        // 从sessionStorage中获取保存到的token值
    const tokenStr = sessionStorage.getItem('token')
        // 没有token跳转到登录页
    if (!tokenStr) return next('/login')
    next()
})

添加axios请求拦截器来添加token

axios.interceptors.request.use(config => {
    
    
    config.headers.Authorization = window.sessionStorage.getItem('token'); // 通过拦截器给请求头添加token
    return config
})

注意：拦截器需添加在axios全局挂载之前

3. vue项目使用第三方字体（除element_ui）

首先把下载好的字体文件导入到src文件夹下，然后在main.js(入口文件) 导入字体样式。最后再按照字体的使用方法来进行使用
示例：
在这里插入图片描述
然后main.js 导入

import './assets/fonts/iconfont.css'

4. element_ui 组件的使用

对于element_ui导入项目此处略，推荐在使用element_ui 时，使用按需导入的方式（可减小项目体积）。
组件的使用大同小异，此处以验证表单为例进行介绍

找到所需组件，复制到项目使用处（注意组件必须是单个根元素）
在element.js中按需导入，再全局注册（如果导入的是全部文件，此处可略）
查看有关此组件的相关文档（属性、方法、事件等），按照需要使用。

对于表单验证，当验证规则不是所需时，可根据文档自定义验证规则
示例：

 //@ 自定义效验规则(邮箱+手机号)
    const validatorEmail = (rule, value, callback) => {
    
    
      const regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      if (regEmail.test(value)) {
    
    
        return callback();
      }
      return callback(new Error('请输入合法的邮箱'));
    };
    const validatorMobile = (rule, value, callback) => {
    
    
      const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (regMobile.test(value)) {
    
    
        return callback();
      }
      return callback(new Error('请输入合法的手机号'));
    };

  rules: {
    
    
        username: [
          {
    
     required: true, message: '请输入用户名', trigger: 'blur' },
          {
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          {
    
     required: true, message: '请输入密码', trigger: 'blur' },
          {
    
     min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
        email: [{
    
     validator: validatorEmail, trigger: 'blur' }],
        mobile: [{
    
     validator: validatorMobile, trigger: 'blur' }]
      },

注意：自定义验证规则需写在data(){} 内，且在return 之前，总之组件的功能也算是十分完善，多看文档真的能有意外之喜。

5. 对于上传组件，需手动添加token

一些请求在向服务器发送时，必须携带有效的令牌（cookie、token），对于第三方提供的（美化）上传控件（自身封装了ajax）不含有效令牌，所以我们在使用时，就要为其手动添加。此处以element_ui上传控件为例。

示例：

<el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :headers="headerObj"
              list-type="picture"
              :on-success="uploadPic"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传一张商品描述图片吧</div>
 </el-upload>

//data()中写headers属性
 headerObj: {
    
    
        Authorization: window.sessionStorage.getItem('token')
      },

6. 对于vue-cli-plugin-element插件与组件库发布时间不一致的问题

在维护一些老项目时，想要用一些新的组件，却发现项目中vue-cli-plugin-elemen插件的版本号太低，好多组件都无法使用。此时我们需要单独下载最新组件的相关文件，在项目的element.js中导入组件相关的js文件，然后在单文件组件中导入其相关样式文件。

示例：
导入js文件

import Timeline from './timeline/index.js'
import TimelineItem from './timeline-item/index.js'

导入css文件

<style lang="less" scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';

.el-cascader {
    
    
  width: 100%;
}
</style>

7. vue中过滤器的使用

过滤器在vue项目可谓不可或缺，如何使用过滤器，再次展示下，也算是帮助自己记忆

在全局注册过滤器（main.js此处使用全局注册，毕竟比较常用）

Vue.filter('dateFormate', function(originVal) {
    
    
    const dt = new Date(originVal)
    const y = dt.getFullYear()
        // padStart方法第一个参数表示返回字符串的个数，第二个参数表示不够需要补的字符串
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate() + '').padStart(2, '0')
    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    return `${
      
      y}-${
      
      m}-${
      
      d} ${
      
      hh}:${
      
      mm}:${
      
      ss}`
})

使用过滤器

<span>{
    
    {
    
     msg | dateFormate}}</span>

对于过滤器更多操作，了解下此文：https://blog.csdn.net/cwq521o/article/details/105717265

二：其他注意点：

对于组件一定要先导入、注册再使用
对于项目中能用组件就用组件（省时+好维护）
在vue项目中，所有变量使用都用属性绑定
作用域插槽中的数据也具有双向绑定的特性
在使用git配合开发过程中，每个功能最好独立创建一个分支，最后合并主分支。避免分支污染

三：一些插件介绍

插件的应用面非常广，几乎出没于各种项目，此处将一些插件在vue项目中使用步骤做一下记录（切记：此处所有的插件均为：安装，导入，注册，使用）

1. lodash插件的使用

lodash作为辅助开发项目真的超级方便(中文文档：https://www.lodashjs.com/)，其提供了大量的方法，让我们的开发可以从原生的几十行代码简便到一两行。使用时只需要在vue项目中安装lodash依赖项，然后在使用时导入即可（import _ from 'lodash'）

2. ECharts插件的使用

对于项目中需要展示数据的可视化面板，ECharts绝对是不二的选择。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts的使用方式官方介绍详尽，传送官方：https://echarts.apache.org/zh/index.html

3. nprogress插件的使用

这个插件真的是纵横一切项目（头部加载进度条），没有它总感觉像缺点什么。

对于nprogress插件，我也是经常在提，直接传送官方：https://github.com/rstacruz/nprogress#readme

在vue项目中，nprogress插件的使用跟其他项目类似，在发送请求时启动，接收响应时完成，对于vue项目的请求与响应可借助axios的拦截器实现（请求拦截、响应拦截），用法如下：

axios.interceptors.request.use(config => {
    
    
    NProgress.start(); //发送请求开始
    config.headers.Authorization = window.sessionStorage.getItem('token'); // 通过拦截器给请求头添加token
    return config
})

axios.interceptors.response.use(config => {
    
    
    NProgress.done(); //接收到响应结束
    return config
})

4. vue-quill-editor插件的使用

一些项目要用到编辑工具，例如富文本编辑器，vue-quill-editor就很好用

vue-quill-editor绝对是功能齐全且操作简单的一套富文本编辑器，传送官方：https://github.com/surmon-china/vue-quill-editor#readme

示例：

//引入
<quill-editor v-model="content" />
//数据双向绑定在data()中
content:''

5. vue-table-with-tree-grid插件的使用

对于一些要求树形展示的数据，vue-table-with-tree-grid 也许可以帮到你

展示示例：

在这里插入图片描述
使用示例：

// 控件
 <tree-table
        :data="categoriesList"
        :columns="columnsCate"
        :selection-type="false"
        :expand-type="false"
        :show-row-hover="false"
        show-index
        index-text="#"
        border
      >
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color:lightgreen;font-size:20px"
          ></i>
          <i class="el-icon-error" v-else style="color:red;font-size:20px"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="showit" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteCate(scope.row)"
          >删除</el-button>
        </template>
      </tree-table>

// 数据源+配置写在data() 中
columnsCate: [
        {
    
    
          label: '分类名称',
          prop: 'cat_name'
        },
        {
    
    
          label: '是否有效',
          // 表示把当前列定义为模板列
          type: 'template',
          // 表示当前这个模板列的名称
          template: 'isok'
        },
        {
    
    
          label: '排序',
          // 表示把当前列定义为模板列
          type: 'template',
          // 表示当前这个模板列的名称
          template: 'order'
        },
        {
    
    
          label: '操作',
          // 表示把当前列定义为模板列
          type: 'template',
          // 表示当前这个模板列的名称
          template: 'showit'
        }
      ],

当然vue-table-with-tree-grid的功能并非仅限于此，我们一起继续探索：https://github.com/surmon-china/vue-quill-editor#readme

End：关于注意点些许介绍到这，希望能对大家有所帮助。了解项目的优化与上线，可以看一下：https://blog.csdn.net/cwq521o/article/details/107225940。

写在最后

写在最后：本文处于不断更新状态，因为对于vue的学习也一直在路上，希望大家都能够盯紧眼前，放眼未来。让自己的技术更进一层，加油。