Vue电商实例总结

登录功能开发

获取组件的实例对象 在表单 添加   ref属性

通过resetFields()方法重置表单

通过validate()方法让表单进行验证 并接收一个回调函数，返回验证结果
 

登录提示弹窗 需要挂载 通过 success()error()进行错误或正确的弹窗，()中携带提示信息

 

登陆成功后将token信息保存到客户端的sessionStorage中  window.sessionStorage.setItem("token",res.data.token)

 

对于用户没有登录 直接通过URL访问特定网页，需要重新导航到登录页面 用到 路由导航守卫

 

退出功能  清空token  window.sessionStorage.clear()

 

用户列表开发

组件中的名称即是类名 可拿来直接使用

通过接口获取菜单数据

 

从服务器中获取请求参数 可以在data中声明参数 并赋值  此处用于分页部分（精髓）

使用表格创建索引列时，只需要  <el-table-column type="index"></el-table-column> 即可完成 

展开列    <el-table-column type="expand"></el-table-column>

el-table 中添加 border属性 添加边框  stripe属性 隔行变色

对于状态栏信息 接收的是一个布尔值 对其进行转换  用到了作用域插槽

<template slot-scope='scope'></template> 其中scope.row属性 即可获得一行中的数据

 

表单验证中  通过validator属性指定自定义校验规则

自定义校验规在data中声明  类型为箭头函数

表单重置功能  调用resetFields()方法

 

权限管理功能开发

// $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码

      this.$nextTick(_ => {

        this.$refs.saveTagInput.$refs.input.focus()

      })

 

商品列表功能开发

 使用过滤器 获取时间 

定义过滤器 使用方法     数据  | 过滤器名称

 

 

数值转换为字符串 +'  '

字符串转换为数值 -0

其中图片上传用到的组件要 自己设置token请求头

 

文本渲染用到了 vue-quill-editor

 

图标用到了 echarts 组件

 

 

产品上线优化

项目优化用到了 Nprogres 组件

展示进度条 Nprogress.start()     //在拦截器中进行使用

隐藏进度条 Nprogress.done()

 

对于生产环境中进行测试的log 发布后取消 应用到 babel-plugin-transform-remove-console

 

生成打包报告

 

项目优化策略

如程序员有修改webpack配置的需求，可以在根目录中创建vue.config.js配置文件

 

指定不同的打包入口 

chainWebpack自定义打包入口

 

对于Import语法导入的第三方依赖包，都会被打包成同一个文件中，从而产生单文件体积过大的问题

为了解决上述问题，可以通过Webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals的第三方依赖包，都不会被打包

具体用法如下：

1.配置节点并添加相关第三方依赖文件名 

‘

2.在publlc/index.html文件头部，添加如下CDN资源引用

 <!-- nprogress 的样式表文件 -->

    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

    <!-- 富文本编辑器 的样式表文件 -->

    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />

    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />

    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

    <!-- element-ui 的样式表文件 -->

    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

 

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>

    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>

    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

    <!-- 富文本编辑器的 js 文件 -->

    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

 

通过CDN对Element进行优化

 

 

首页内容定制 

不同打包环境下，首页内容有所不同，可以通过插件的方式进行定制，具体如下：

插件通过环境的判断

返回一个回调函数 值通过添加自定义属性 在网页头部，通过自定义属性 获取值，进行内容定制

<%=  %> 插件输入格式 通过htmlwebpackplugin.options.自定义属性判断 进行内容定制

 

路由懒加载

 

项目上线相关配置

1.

2.开启gzip配置

    注册中间件 代码 一定要写在静态托管之前

3.配置HTTPS服务（后端完成  了解）

申请证书

4.使用PM2管理应用