Vue+Element-UI 电商后台管理系统详细总结

一、概述

基于 Vue 和 Element-UI 的电商后台管理系统

1.1 实现功能

• 用户登录/退出

• 用户管理

  • 用户列表
    • 实现用户的增删改查、分页查询以及分配角色功能

• 权限管理

  • 角色列表
    • 实现角色的增删改查以及分配权限、删除权限功能
  • 权限列表
    • 展示所有权限以及权限等级

• 商品管理

  • 商品列表
    • 实现商品的增删改、分页查询
  • 分类参数
    • 实现分类参数的增删改
  • 商品分类
    • 实现商品分类的增删改以及查看该分类下的所有子分类

• 订单管理

  • 订单列表
    • 实现修改地址
    • 实现查看物流进度

• 数据统计

  • 数据报表

1.2 前端技术栈

电商后台管理里系统整体采用前后端分离的开发模式，其中前端是基于 Vue 技术栈的 SPA 项目

• vue
• vue-router
• Element-UI
• Axios
• Echarts

1.3 前端项目初始化步骤

1. 安装 Vue 脚手架
2. 通过 Vue 脚手架创建项目
3. 配置 Vue 路由
4. 配置 Element-UI 组件库
5. 配置 axios 库
6. 初始化 git 远程仓库
7. 将本地项目托管到 Gitee 中

---

二、登录与退出

2.1 登录布局

布局代码

实现页面

---

2.2 登录业务逻辑

2.2.1 表单预验证

用户在输入账号和密码后，点击登录时表单会进行预验证，判断用户输入的账号和密码是否符合规范，验证通过后向服务器发送 axios 请求

验证规则

// 用户名的验证规则
username: [
    { required: true, message: '请输入用户名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
// 密码的验证规则
password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
]

实现效果

---

2.2.2 关于 Token

在登录成功后，服务器会向我们返回一个 token，我们需要将这个 token 保存到客户端的 sessionStorage 中

发送请求并保存 token

注意

• 为什么要保存 token
  • 因为项目中除了登录之外的其他 API 接口必须在登录之后才能访问，在访问的时候携带这个 token 就证明我们已经登录了
• 为什么要将 token 保存在 sessionStorage 中
  • 因为 sessionStorage 是会话期间的存储机制，关闭浏览器过后， sessionStorage 就会被清空，token只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中

---

2.2.3 路由导航守卫

如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面。

在 index.js 中挂载路由导航守卫

// 挂载路由导航守卫
// to 代表将要访问的页面路径，from 代表从哪个页面路径跳转而来，next 代表一个放行的函数
router.beforeEach((to, from, next) => {
    // 如果用户访问的是登录页，那么直接放行
  if (to.path === '/login') return next()
  // 获取 token
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有 token，强制跳转到登录页面
  if (!tokenStr) return next('/login')
  next()
})

2.3 退出功能

基于 token 的方式在退出时需要销毁本地的 token 。这样，后续的请求就不会携带 token，必须重新登录生成一个新的 token 之后才可以访问页面。

退出代码

logout() {
    // 销毁本地 token
    window.sessionStorage.removeItem('token')
    // 通过编程式导航返回到上一页
    this.$router.go(-1)
}

---

三、主页部分

3.1 主页布局

引入 Element-UI 中的 Header Aside Main 组件

样式代码

实现效果

3.2 菜单部分

向服务器发送 axios 请求获取菜单数据

注意

• 需要授权的 API 必须在请求头中使用 Authorization 字段提供的 token 令牌，那些授权的 API 才能被正常调用
• 如何在每一个的 API 请求头中添加 Authorization 字段
  • 通过 axios 请求拦截器添加 token，保证拥有获取数据的权限

在 main.js 中添加拦截器

// axios 请求拦截
axios.interceptors.request.use(config => {
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须 return config
  return config
})

发起请求获取所有菜单数据

渲染到页面

<el-menu
         background-color="#333744"
         text-color="#fff"
         active-text-color="#409Eff"
         
         :collapse="isCollapse"
         :collapse-transition="false"
         router
         :default-active="activePath">
    
    
    <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
        <template slot="title">
            <i :class="iconObj[item.id]">i>
            <span>{{ item.authName }}span>
        template>
        
        <el-menu-item :index="'/' + secitem.path" v-for="secitem in item.children" :key="secitem.id" 		 			@click="savaNavState('/' + secitem.path)">
            <i class="el-icon-menu">i>
            <span>{{ secitem.authName }}span>
        el-menu-item>
    el-submenu>
el-menu>

通过 Element-UI 为菜单名称添加图标

实现效果

3.3 用户管理模块

3.3.1 用户列表

1、渲染用户列表

引入 Element-UI 中的 Breadcrumb, BreadcrumbItem, Card, Row, Col 组件，实现面包屑导航和卡片视图

样式代码

<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页el-breadcrumb-item>
    <el-breadcrumb-item>用户管理el-breadcrumb-item>
    <el-breadcrumb-item>用户列表el-breadcrumb-item>
el-breadcrumb>

<el-card>
el-card>

<style>  
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
style>

实现效果

向服务器发送请求获取用户数据列表

引入 Table, TableColumn 将用户数据渲染到表格中，引入 Pagination 实现分页效果

实现效果

2、 实现用户的增删改查

• 添加用户

引入 Dialog 结合表单展示一个添加用户的对话框

实现效果

为表单添加验证规则

实现效果

向服务器发送添加用户请求

• 删除用户
  • 引入 MessageBox 提示用户

实现效果

向服务器发送删除用户请求

• 修改用户
  • 在点击编辑按钮时候，需要将此用户的 id 传递过来，并且根据此 id 查询用户的信息，然后将用户的信息渲染到表单上

实现效果

点击确定按钮向服务器发送编辑用户请求

• 查询用户
  • 查询用户就是将用户信息 queryInfo 中的 query 属性和输入框动态绑定，然后向服务器发送获取用户列表的请求

---

3.4 权限管理模块

3.4.1 权限列表

布局和用户列表一致

向服务器发送请求获取权限数据列表

实现效果

3.4.2 角色列表

1、渲染角色列表

布局和用户列表一致

向服务器发送请求获取角色数据列表

实现效果

2、分配角色

• 使用 Dialog 组件结合表单展示一个分配角色的对话框
• 引入 Select、Option 组件展示一个选择角色的下拉选择器
• 展示对话框之前先向服务器发送请求获取角色列表数据

具体代码

• 将获取过来的角色列表数据展示到分配角色对话框的表单中

实现效果

• 向服务器发送分配角色请求

3、实现角色的增删改

和用户的增删改查一致，只是调用接口不一样。

4、展示当前角色下的所有权限

当用户点击某个角色的下拉箭头时，该角色的所有权限数据会以类似于树结构的形式展示出来。

用户也可以删除该角色下的某个权限。

效果如图

• 为表格设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
• 通过 scope.row 可以获取该行也就是该角色的数据

<el-table-column type="expand">
    <template slot-scope="scope">
        {{ scope.row }}
    template>
el-table-column>

效果如图

• 布局思路

  • 引入 Element-UI 中的 Layout 布局，可以实现基础的 24 分栏，迅速简便地创建布局。

  

• 业务逻辑

  • 通过 scope.row 获取的数据就是该角色的所有信息，数据是一个对象，每一个对象下都有一个 children 属性，这个 children 属性就是该角色的所有权限了，children 是一个数组，每一个 children 属性下又嵌套这一个 children 属性，一共嵌套三层，这分别就是该角色下的一级、二级、三级权限了。
  • 可以循环 children 下的每个对象，就可以把一级权限渲染出来，在每一个一级权限中又嵌套着二级权限，所以，要想渲染出所有的一级、二级、三级权限需要使用三层 v-for 循环的嵌套。

• 具体实现

  引入 Tag 组件将权限名称以标签的形式展示，并且将 closable 设置为 true，每个权限标签后面就会显示一个叉号，为后面的删除权限功能做铺垫。

  为每一个权限标签后面添加 进行美化。

  
  <el-table-column type="expand">
      <template slot-scope="scope">
          <el-row :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id" class="first-row">
              
              <el-col :span="5">
                  <el-tag closable  @close="removeRightById(scope.row, item1.id)">{{ item1.authName }}el-tag>
                  <i class="el-icon-caret-right">i>
              el-col>
              
              <el-col :span="19">
                  <el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id">
                      <el-col :span="6">
                          <el-tag type="success" closable  @close="removeRightById(scope.row, item2.id)">{{ item2.authName }}el-tag>
                          <i class="el-icon-caret-right">i>
                      el-col>
                      
                      <el-col :span="18">
                          <el-tag v-for="item3 in item2.children" :key="item3.id" type="warning" closable  @close="removeRightById(scope.row, item3.id)">{{ item3.authName }}el-tag>
                      el-col>
                  el-row>
              el-col>
          el-row>
      template>
  el-table-column>
  <style>
  	// 添加边框
      // 上边框
      .bdtop {
          border-top: 1px solid #eee;
      }
      // 下边框
      .bdbottom {
          border-bottom: 1px solid #eee;
      }
      // 上下居中
      .vcenter {
          display: flex;
          align-items: center;
      }
  style>
  

  效果如图

  

5、删除权限

使用 MessageBox 提示用户

点击确定按钮时分别将该角色的信息和权限 id 作为参数传递过来

引用 Tag 组件将权限列表渲染成树形结构

效果如下

提交分配权限

• 展示分配权限对话框时需要获取当前角色下的所有权限，在树结构中默认勾选上。

3.5 商品管理模块

3.5.1 商品分类

1、渲染商品分类列表

• 布局

  • 和角色列表布局一致

  • 表格部分引用第三方组件 vue-table-with-tree-grid （树形表格组件），可以使商品分类以树形结构分级展示

  • 安装 vue-table-with-tree-grid

    • npm i vue-table-with-tree-grid -S

  • 在 main.js 中引入 vue-table-with-tree-grid

    // 引入列表树
    import TreeTable from 'vue-table-with-tree-grid'
    // 使用列表树
    Vue.component('tree-table', TreeTable)
    

  • 以组件组件标签的形式使用 vue-table-with-tree-grid

  • 向服务器发送请求获取商品分类数据列表

    效果如图

    

• 设置自定义列

  • 设置自定义列需要将 columns 绑定的对应列的 type 属性设置为 template，将 template 属性设置为当前列使用的模板名称

  效果如下

  

2、实现商品的增删改

• 添加分类

  • 使用 Dialog 组件结合表单展示一个添加分类的对话框

  • 引用 Cascader 级联选择器组件展示所有商品分类

    效果如图

    

  • 向服务器发送请求获取所有父级分类商品

  • 将服务器返回的数据赋值给级联选择器绑定的数据源

    效果如图

    

• 编辑分类

  • 使用 Dialog 对话框展示一个编辑分类的对话框

  • 使用作用域插槽，当点击编辑按钮时，获取当前分类的 id，将这个 id 作为参数向服务器发起编辑请求，获取当前分类的名称并展示到表单的输入框中

    效果如图

    

  • 点击确定按钮向服务器发送请求提交此次编辑操作

• 删除分类

  • 使用 MessageBox 对话框提示用户再次确认

    

  • 使用作用域插槽，当点击删除按钮时，获取当前分类的 id，当点击确定按钮时，将这个 id 作为参数向服务器发起删除请求

---

3.5.2 分类参数

1、渲染分类参数布局

• 布局

  • 也是使用卡片布局

  • 引用 Alert 组件提示用户

  • 引用 Tabs 标签页组件实现动态参数页和静态属性页的局部切换

    效果如图

    

• 获取商品分类列表

  • 获取商品分类列表，并渲染到级联选择器当中

• 当用户选中商品分类时，向服务器发送请求获取商品参数了列表并在表格中展示该分类的所有参数

  效果如图

  

---

2、实现分类参数的增删改

• 添加分类参数

  • 分类参数包括动态参数和静态属性

  • 当用户点击添加参数/属性时，弹出对话框

    • 因为添加参数和添加属性的对话框布局一样，所以可以共用一个对话框

  • 提交添加操作

• 删除分类参数

  • 当用户点击删除按钮时，通过作用域插槽获取当前分类参数的 id

  • 提交删除操作

• 编辑分类参数

  • 点击编辑按钮后，将要编辑的分类参数额 id 传递过来
  • 将 id 作为参数向服务器发送请求获取当前要编辑的分类参数的名称
  • 将获取过来的名称展示到编辑对话框的输入框中
  • 展示编辑对话框

  效果如图

  

  • 提交编辑操作

  ---

3、添加删除分类参数的属性

• 添加分类参数的属性

  • 在表格展开列当中，引入 Tag 组件，循环渲染每一个标签

  效果如图

  

  • 点击 + New Tag 按钮展示文本框，并且隐藏按钮
  • 当文本框失去焦点或者用户按下 Enter 键后，向服务器发送请求，提交此次添加操作

• 删除分类参数的属性

  • 点击叉号，将当前标签的索引作为参数传递过来
  • 根据传递过来的索引将该标签移除
  • 重新调用保存属性的方法

---

3.5.3商品列表

1、渲染商品列表

• 布局

  • 采用面包屑导航加卡片布局
  • 向服务器发送请求获取商品列表数据
  • 将获取过来的数据渲染到列表当中
  • 添加分页导航

  效果如图

  

---

2、查询商品

• 用户点击查询按钮后，将输入框里的数据作为参数向服务器发送请求

---

3、删除商品

• 用户点击删除按钮后，将该商品对应的 id 作为参数传递过来
• 将此 id 作为参数向服务器发送删除请求

---

4、添加商品

1. 创建一个添加商品组件，并注册路由规则
2. 点击添加商品按钮跳转到此页面

• 添加商品页面布局

  • 整体采用面包屑导航加卡片视图布局
  • 引用 Step 步骤条组件，使用 Tab 标签页
  • 在基本信息标签页中添加表单

  效果如图

  

  • 在商品参数标签页引入 checkbox-group 复选框组组件展示参数
    • 先循环动态参数表格数据的每一项，将属性名称展示到页面上
    • 再循环表格数据中的属性项，通过复选框组渲染到页面

  效果如图

  

  • 在商品属性标签页循环静态属性表格数据的每一项，并展示到输入框当中

  效果如图

  

  • 在商品图片标签页 Upload 上传组件实现图片上传的功能

  效果如图

  

  • 在商品内容标签页引入 vue-quill-editor 富文本编辑器插件
  • 在 main.js 中导入并注册

  // 导入富文本编辑器
  import VueQuillEditor from 'vue-quill-editor'
  // 导入富文本编辑器对应的样式
  import 'quill/dist/quill.core.css' // import styles
  import 'quill/dist/quill.snow.css' // for snow theme
  import 'quill/dist/quill.bubble.css' // for bubble theme
  // 使用富文本编辑器
  Vue.use(VueQuillEditor)
  

  效果如图

  

• 提交添加商品操作

---

3.6 订单管理模块

3.6.1 订单列表

1、渲染订单列表

• 布局
  • 采用面包屑导航加卡片布局
  • 向服务器发送请求获取商品列表数据
  • 将获取过来的数据渲染到列表当中
  • 添加分页导航

效果如图

---

2、修改地址

• 点击修改按钮，弹出修改地址对话框
• 导入 citydata.js 包，渲染到表单的级联选择器当中

效果如图

---

3、查看物流进度

• 引入 Timeline 时间线组件
• 因为查看物流进度的 API 无法使用，这里使用了 Mock.js 根据接口文档的响应数据模拟了查看物流进度的接口

// 使用 Mock
var Mock = require('mockjs')
var menuMock = Mock.mock({
  data: [
    {
      time: '2018-05-10 09:39:00',
      ftime: '2018-05-10 09:39:00',
      context: '已签收,感谢使用顺丰,期待再次为您服务',
      location: ''
    },
    {
      time: '2018-05-10 08:23:00',
      ftime: '2018-05-10 08:23:00',
      context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
      location: ''
    },
    {
      time: '2018-05-10 07:32:00',
      ftime: '2018-05-10 07:32:00',
      context: '快件到达 [北京海淀育新小区营业点]',
      location: ''
    },
    {
      time: '2018-05-10 02:03:00',
      ftime: '2018-05-10 02:03:00',
      context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
      location: ''
    },
    {
      time: '2018-05-09 23:05:00',
      ftime: '2018-05-09 23:05:00',
      context: '快件到达 [北京顺义集散中心]',
      location: ''
    },
    {
      time: '2018-05-09 21:21:00',
      ftime: '2018-05-09 21:21:00',
      context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
      location: ''
    },
    {
      time: '2018-05-09 13:07:00',
      ftime: '2018-05-09 13:07:00',
      context: '顺丰速运 已收取快件',
      location: ''
    },
    {
      time: '2018-05-09 12:25:03',
      ftime: '2018-05-09 12:25:03',
      context: '卖家发货',
      location: ''
    },
    {
      time: '2018-05-09 12:22:24',
      ftime: '2018-05-09 12:22:24',
      context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
      location: ''
    },
    {
      time: '2018-05-08 21:36:04',
      ftime: '2018-05-08 21:36:04',
      context: '商品已经下单',
      location: ''
    }
  ],
  meta: { status: 200, message: '获取物流信息成功！' }
})

Mock.mock('http://127.0.0.1:8888/api/private/v1/mock/process', 'get', menuMock)

• 点击查看物流进度的按钮，发送请求，并渲染到时间线中

效果如图

---

3.7 数据统计模块

3.7.1 数据报表

• 引入 Apache ECharts 数据可视化插件
• 向服务器发起数据请求
• 将请求回来的数据与现有数据进行合并
• 展示数据

效果如图

四、项目优化

1.1 项目优化策略

• 生成打包报告

• 通过命令行参数的形式生成报告

  // 通过 vue-cli 的命令选项可以生成打包报告
  // --report 选项可以生成 report.html 以帮助分析打包内容
  vue-cli-service build --report
  

• 通过可视化的 UI 面板直接查看报告 推荐

  在可视化的 UI 面板中，通过**控制台**和分析面板，可以方便地看到项目中所存在的问题
  

2. 第三方库启用 CDN

• 通过 externals 加载外部 CDN 资源

  默认情况下，通过 import 语法导入的第三方依赖包最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大大的问题。

  为了解决上述的问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。

  • 凡是声明在 externals 中的第三方依赖包，都不会被打包。

  module.exports = {
  chainWebpack:config=>{
     //发布模式
     config.when(process.env.NODE_ENV === 'production',config=>{
         //entry找到默认的打包入口，调用clear则是删除默认的打包入口
         //add添加新的打包入口
         config.entry('app').clear().add('./src/main-prod.js')
  
         //使用externals设置排除项
         config.set('externals',{
             vue:'Vue',
             'vue-router':'VueRouter',
             axios:'axios',
             lodash:'_',
             echarts:'echarts',
             nprogress:'NProgress',
             'vue-quill-editor':'VueQuillEditor'
         })
     })
     //开发模式
     config.when(process.env.NODE_ENV === 'development',config=>{
         config.entry('app').clear().add('./src/main-dev.js')
     })
  }
  

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。

• 打开开发入口文件main-prod.js，删除掉默认的引入代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
//导入全局样式
import './assets/css/global.css'
//导入第三方组件vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'
//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
// import 'nprogress/nprogress.css'
// //导入axios
import axios from 'axios'
// //导入vue-quill-editor（富文本编辑器）
import VueQuillEditor from 'vue-quill-editor'
// //导入vue-quill-editor的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

//全局注册组件
Vue.component('tree-table', TreeTable)
//全局注册富文本组件
Vue.use(VueQuillEditor)

//创建过滤器将秒数过滤为年月日，时分秒
Vue.filter('dateFormat',function(originVal){
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  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}`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

• 打开index.html添加外部cdn引入代码

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>电商后台管理系统title>

    
    <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" />
    
    <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>
    
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js">script>

    
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js">script>

  head>
  <body>
    <noscript>
      <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
  body>
html>

3. Element-UI 组件按需加载

4. 路由懒加载

5. 首页内容定制