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

浅浅的花香味﹌ 2023-02-23 14:30 7阅读 0赞

## 目标 ##

> 熟悉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][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][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`无状态原理：

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

示例：

1.  登录成功存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");
                })
            }

1.  添加路由守卫

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()
    })

1.  添加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`(入口文件) 导入字体样式。最后再按照字体的使用方法来进行使用  
示例：  
![在这里插入图片描述][20200709104821745.PNG]  
然后main.js 导入

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

##### 4. element\_ui 组件的使用 #####

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

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

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

//@ 自定义效验规则(邮箱+手机号)
        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文件

##### 7. vue中过滤器的使用 #####

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

1.  在全局注册过滤器（`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}`
    })

1.  使用过滤器

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

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

## 二：其他注意点： ##

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

## 三：一些插件介绍 ##

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

##### 1. lodash插件的使用 #####

`lodash`作为辅助开发项目真的超级方便(中文文档：[https://www.lodashjs.com/][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][https_echarts.apache.org_zh_index.html]

##### 3. nprogress插件的使用 #####

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

对于`nprogress`插件，我也是经常在提，直接传送官方：[https://github.com/rstacruz/nprogress\#readme][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][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 也许可以帮到你

展示示例：

![在这里插入图片描述][20200709173151496.gif]  
使用示例：

// 控件
     <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][https_github.com_surmon-china_vue-quill-editor_readme]

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

## 写在最后 ##

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

[https_github.com_cwen-jdoit_vue_project_api.git]: https://github.com/cwen-jdoit/vue_project_api.git
[https_github.com_cwen-jdoit_-vue_project_shop.git]: https://github.com/cwen-jdoit/-vue_project_shop.git
[20200709104821745.PNG]: https://img-blog.csdnimg.cn/20200709104821745.PNG
[https_blog.csdn.net_cwq521o_article_details_105717265]: https://blog.csdn.net/cwq521o/article/details/105717265
[https_www.lodashjs.com]: https://www.lodashjs.com/
[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[https_github.com_rstacruz_nprogress_readme]: https://github.com/rstacruz/nprogress#readme
[https_github.com_surmon-china_vue-quill-editor_readme]: https://github.com/surmon-china/vue-quill-editor#readme
[20200709173151496.gif]: https://img-blog.csdnimg.cn/20200709173151496.gif
[https_blog.csdn.net_cwq521o_article_details_107225940]: https://blog.csdn.net/cwq521o/article/details/107225940