-6 前端工程化

前端工程化

• 模块化相关规范
• webpack用法
• Vue 单文件组件
• Vue 脚手架
• Element-UI 的基本使用

1.模块化相关规范

• 模块化就是把单独的一个功能封装到一个模块文件中，模块之间相互隔离，但是可以通过特定的接口公开内部的成员，也可以依赖别的模块
• 优势： 方便代码重用，提高开发效率，方便后期维护
• 浏览器端模块化规范，AMD/CMD ，已经落伍
• 服务器端模块化规范，CommonJS
• ES6模块化规范–最终解决方案
  • 每个 js 文件都是一个独立的模块
• 导入模块成员使用 import 关键字
• 暴露模块成员使用 export 关键字

1.1 ES6模块化基本语法

• 默认导出与默认导入
  //默认导出语法 export default 默认导出的成员
  export default {
  a,c,show
  }

  //默认导入语法 import 接收名称 from ‘模块标识符’
  import m1 from './m1.js';
  

• 按需导出与按需导入
  //按需导出语法
  export let s1 = 10;
  export function say = function(){}

  //按需导入语法
  import { s1,s2 as ss2, say } from './m1.js'
  
  按需导入可以有多次
  

• 直接导入并执行模块代码
  import ‘./m2.js’

2.webpack用法

• webpack是一个前端项目的构建工具（打包工具）

• webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容性问题，性能优化等强大功能。从而提高代码开发的效率和项目的可维护性

• 在项目中安装和配置webpack

  -1. 安装与配置
  npm install webpack webpack-cli -D
  -2. 创建文件
  创建名为 webpack.config.js 的 webpack 配置文件
  -3. 编辑配置文件

  module.exports = {
  mode: ‘development’ //mode用来指定构建模式，development/production
  }

  -4. 配置 package.json 配置文件

  “scripts”:{
  “dev”: “webpack” // script 节点下的脚本，可通过 npm run 执行
  }

  -5. 启动 webpack 进行项目打包
  npm run dev

  -6. 源文件放在src目录下， 打包后的文件放在dist目录下

• 配置打包的入口与出口

  • 打包的入口文件为 src --> index.js
  • 打包的输出文件为 dist --> main.js
  • 如果要修改可以在 webpack.config.js 中新增如下配置信息
    const path = require(‘path’) //导入node.js中专门操作路径的模块
    module.exports = {
    // 打包入口文件的路径
    entry: path.join(__dirname,’./src/index.js’),
    output: {
    path:path.join(__dirname, ‘./dist’), //输出文件的存放路径
    filename: ‘bundle.js’ //输出文件的名称
    }
    }

• 配置自动打包功能
  -1. 安装自动打包的工具
  npm install webpack-dev-server -D
  -2. 修改 package.json -> scripts 中的 dev 命令
  “scripts”:{
  “dev”: ‘webpack-dev-server’ //script 节点下的脚本
  }

  -3. 将 src -> index.html 中，script脚本的引用路径修改为 "/buldle.js"
  -4. 运行
  npm run dev
  -5. 访问
  http://localhost:8080
  

• 配置 html-webpack-plugin 生成预览页面
  -1. 运行,安装生成预览页面的插件
  npm install html-webpack-plugin -D

  -2. 修改 webpack.config.js文件头部区域，添加配置信息
  // 导入生成预览页面的插件，得到一个构造函数
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
      template: './src/index.html', //指定要得到的模板文件
      //指定生成的文件的名称，该文件存在于内存中，在目录不显示
      filename: 'index.html'
  })
  
  -3. 修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点
  module.exports = {
      plugins: [ htmlPlugin ] //plugins数组是 webpack打包期间会用到的插件按列表
  }
  

• 配置自动打包的相关参数
  package.json 中的配置

  // --open 打包完成后自动打开浏览器页面 
  // --host 配置 IP 地址
  // --port 配置端口
  
  "scripts": {
      "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },
  

• webpack中的加载器
  -1. 通过loader 打包非js模块
  在实际开发中，webpack默认只能打包处理 .js 后缀名结尾的模块，其他的非 .js 后缀结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才能正常打包

  loader 加载器可以协助 webpack 打包处理特定的文件模块
  less-loader  打包处理 .less相关的文件
  sass-loader  打包处理 .scss相关的文件
  url-loader   打包处理 css中与 url 路径相关的文件
  
  -2. 安装与配置打包处理css文件
  npm i style-loader css-loader -D 
  
  -3. 配置,在 webpack.config.js 的 module -> rules 数组中，添加
  //所有第三方文件模块的匹配规则,test 表示匹配的文件类型， use 表示对应的loader
  module：{
      rules: [
          { test:/\.css$/, use: ['style-loader','css-loader']}
      ]
  }
  

3.Vue 单文件组件

• 单文件模板

  这里用于定义vue组件的模板内容

• 在 webpack 项目中使用 vue
  -1. 运行，安装
  npm i vue -S
  -2. 在 src -> index.js 入口文件中，通过 import Vue from ‘vue’ 来导入vue构造函数
  -3. 创建 vue 实例函数，并指定要控制的 el 区域
  -4. 通过 render 函数渲染 App 根组件

//1. 导入 Vue 构造函数
import Vue from ‘vue’
//2. 导入 APP 根组件
import App from ‘./components/App.vue’

const vm = new Vue({
//3. 指定 vm 实例要控制的页面区域
el: ‘#app’,
//4. 通过render 函数，把指定的组件渲染到 el 区域中
render: h => h(APP)
})

* webpack 打包发布

  ```javascript
  // 在package.json文件中配置 webpack 打包文件
  // 该命令默认加载项目根目录中的 webpack.config.js 配置文件
  "scripts": {
      // 用于打包的命令
      "build": "webpack -p",
      // 用于开发调试的命令    
       "dev": "webpack-dev-server --open --host 127.0.0.1 --post 3000",
  }
  
  //打包
  npm run build

4.Vue 脚手架

• Vue 脚手架用于快速生成项目基础架构

  //使用步骤
  -1. 安装 3.X版本, CMD
  npm install -g @vue/cli
  vue -V

  -2. 基于 交互式命令行 的方式 创建 新版 vue 项目
  vue create my-project

  -3. 基于 图形化界面 的方式，创建 新版 vue 项目
  vue ui

  -4. 基于 2.x的旧版本，创建旧版本的 vue项目
  npm install -g @vue/cli-init
  vue init webpack my-project

  //配置事项
  Use history mode for router? n
  Pick a linter / formatter config: ESLint + Standard config
  Pick additional lint features: (*) Lint on save
  Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

• 通过 package.json 自定义配置项目

  //必须是符合规范的json语法,不推荐
  “vue”: {
  “devServer”:{
  “port”: “8888”,
  “open”: true
  }
  }

• 通过单独的配置文件配置项目

  // 在项目的根目录中创建文件 vue.config.js ，推荐
  // 在该文件中进行相关的配置，从而覆盖默认配置
  // vue.config.js
  module.export = {
  devServer: {
  open: true
  port: 8888
  }
  }

5.Element-UI 的基本使用

• Element-UI是一套 基于 Vue 2.0 的桌面端组件库

  -1. 使用，基于命令行方式手动安装
  //安装依赖包
  npm i element-ui -S

  //main.js中写入
  //导入相关资源 main.js中引入
  import ElementUI from ‘element-ui’;
  import ‘element-ui/lib/theme-chalk/index.css’;
  //配置 Vue 插件
  Vue.use(ElementUI)
  //按需使用
  复制组件源码到使用页面

  -2. 基于图形化界面安装
  界面配置后
  //main.js中写入
  import ‘./plugins/element.js’

  //element.js
  import Vue from ‘vue’
  import Element from ‘element-ui’
  import ‘element-ui/lib/theme-chalk/index.css’
  import { Form, FormItem, Input, Button, Message } from ‘element-ui’

  Vue.use(Element)
  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Input)

  Vue.use(Button)
  Vue.prototype.$message = Message //挂载到原型对象

• 配置 axios 库

  //配置 axios 库
  npm install axios -S

  //在src/main.js里面配置axios
  import axios from ‘axios’;
  //配置请求的根路径
  axios.defaults.baseURL = ‘http://www.baidu.com’
  Vue.use(axios)
  Vue.prototype.$http = axios;

  new Vue({
  router,
  axios,
  el: ‘#app’,
  render: h => h(App)
  })

• 初始化 git 远程仓库和操作

  //在 github新建一个仓库
  //本地CMD
  git status
  git add .
  git commit -m “add files”
  git status
  git remote add origin https://github.com/Holsen-Bakey/vue_shop.git
  git push -u origin master //本地master分支推送至云端，首次

  git checkout -b login //新建一个分支login，并切换到
  git branch

  git status
  git add . //把所有代码提交到暂存区
  git status
  git commit -m ‘完成登陆功能开发’
  git branch
  git checkout master //切换回master分支
  git merge login //将login分支的文件合并到mater主分支
  git push //本地master推送至云端
  git checkout login //切换回login分支
  git branch
  git puch -u origin login //本地login分支推送至云端，首次

  git checkout -b user //新建一个分支user，并切换到
  git branch
  git status
  git add . //提交修改到user分支
  git commit -m ‘完成用户列表开发’ //把user分支提交到仓库
  git status
  git push -u origin user //本地user分支推送至云端，首次
  git checkout master
  git merge user
  git push //将master分支推送到云端

  /* 先把写完的分项目代码提交到一个新的分支并上传，再合并到主分支并上传*/
  git branch
  git checkout -b rights
  git branch
  git push -u origin rights

  git branch
  git add .
  git commit -m ‘完成了权限功能’
  git push
  git checkout master
  git merge rights
  git push

6.综合项目

• 电商后台管理系统
  技术栈：

  • ------------ 前端------------
  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts
  • ------------后端------------
  • Node.js
  • Express
  • Jwt (状态保持)
  • Mysql
  • sequelize (操作数据库框架)

• 综述

  1. 项目初始化
     1. 安装 Vue 脚手架
     2. 通过 Vue 脚手架创建项目
     3. 配置 Vue 路由
     4. 配置 Element-UI 组件库
     5. 配置 axios 库
     6. 初始化 git 远程仓库
     7. 将本地项目托管到 Github
  2. 登陆/退出功能
     1. 登陆业务流程
        1. 在登陆页面输入用户名和密码
        2. 调用后台接口进行验证
        3. 通过验证后，根据后台的响应状态跳转到项目主页
     2. 相关技术点
        1. http 是无状态的
        2. 通过 cookie 在客户端记录状态
        3. 通过 session 在服务器端记录状态
        4. 通过 token 方式维持状态，存在跨域问题时使用
     3. 登陆页面布局
        1. el-form
        2. el-form-item
        3. el-input
        4. 字体图标
     4. 登陆成功之后
        1. 将登陆成功之后的 token 保存到客户端的 seesionStorage 中
        2. 项目中除了登陆之外的其他API接口，必须在登录之后才能访问
        3. token 只应在当前网站打开期间才生效，所以将 token 保存在 sessionStorage 中
        4. 通过编程式导航跳转到后台主页，路由地址是 /home
        5. token 是一长串字符串
        6. 基于 token 的方式实现退出，只需要销毁本地的 token 即可
  3. 主页布局
     1.
     2.
  4. 用户管理模块
  5. 权限管理模块
     1. 角色列表
     2. 权限列表
  6. 分类管理模块
  7. 参数管理模块
  8. 商品管理模块
     1. 商品列表
     2. 分类管理
     3. 参数管理
  9. 订单管理模块
  10. 数据统计模块

• 补充知识点

  //1.路由导航守卫控制访问权限
  //如果用户没有登陆，但是直接通过URl访问特定页面，需要重新导航到登陆页面

  //为路由对象，添加 beforeEach 导航守卫
  router.beforeEach((to,from,next)=>{
  // to 将要访问的路径，from 代表从那个路径跳转而来
  // next 是一个函数，表示放行， next()放行 next(’/login’) 强制跳转
  //如果用户访问的登录页，直接放行
  if (to.path === ‘/login’) return next()
  //从 sessionStorage 中获取保存的 token 值
  const tokenStr = window.sessionStorage.getItem(‘token’)
  //没有 token,强制跳转到登录页
  if (!tokenStr) return next(’/login’);
  next()
  })

  //2. 格式化满足eslint
  创建 .prettierrc 文件
  {
  “semi”: false,
  “singleQuote”: true,
  “printWidth”: 200
  }

  //3.axios 请求拦截器添加 token
  //axios 请求拦截,预处理请求
  axios.interceptors.request.use(config => {
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem(‘token’)
  return config
  })

• 图形界面安装项
  //依赖项
  —运行依赖
  axios
  echarts
  nprogress

  ---开发依赖
  less-loader
  less
  babel-plugin-transform-remove-console
  
  //插件项
  vue-cli-plugin-element
  

7.项目笔记

1. App.vue 文件

   1. 需求：
      方案：

   //代码
   

2. main.js 文件

   0. 需求：
      方案：

   //代码
   import Vue from ‘vue’
   import App from ‘./App.vue’
   import router from ‘./router’
   import store from ‘./store’
   import ‘./plugins/axios’
   import ‘./plugins/element.js’
   import ‘./assets/css/global.css’ // 导入全局样式表，初始化

   import axios from ‘axios’
   Vue.use(axios)
   //配置请求的根路径
   axios.defaults.baseURL = ‘http://www.baidu.com’

   //axios 请求拦截,预处理请求，请求拦截器添加 token
   axios.interceptors.request.use(config => {
   config.headers.Authorization = window.sessionStorage.getItem(‘token’)
   return config
   })

   Vue.prototype.$http = axios;

   Vue.config.productionTip = false

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

3. router/index.js 路由模块文件

   0. 需求：
      方案：

   //代码
   import Vue from ‘vue’
   import VueRouter from ‘vue-router’
   import Login from ‘…/components/login.vue’
   import Home from ‘…/components/Home.vue’
   import Welcome from ‘…/components/Welcome.vue’
   import Users from ‘…/components/user/Users.vue’
   import Rights from ‘…/components/power/Rights.vue’
   import Roles from ‘…/components/power/Roles.vue’

   Vue.use(VueRouter)

   const router = new VueRouter({
   routes: [{
   path: ‘/’,
   redirect: ‘/login’ //设置默认主页’/'的跳转
   },
   {
   path: ‘/login’,
   component: Login
   },
   {
   path: ‘/home’,
   component: Home,
   redirect: ‘/welcome’,
   children: [
   { path: ‘/welcome’, component: Welcome },
   { path: ‘/users’, component: Users },
   { path: ‘/rights’, component: Rights },
   { path: ‘/roles’, component: Roles }
   ]
   }
   ]
   })

   //挂载路由导航守卫，控制访问权限
   router.beforeEach((to, from, next) => {
   if (to.path === ‘/login’) return next();
   //从 sessionStorage 中获取保存的 token 值
   const tokenStr = window.sessionStorage.getItem(‘token’)
   //没有 token,强制跳转到登录页
   if (!tokenStr) return next(’/login’)
   next()
   })

   export default router

4. /element.vue文件

   import Vue from ‘vue’
   import Element from ‘element-ui’
   import ‘element-ui/lib/theme-chalk/index.css’
   import { Form, FormItem, Input, Button, Message, Container, Header, Main, Aside, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,
   Tooltip,Pagination,Dialog,MessageBox,Tag,Tree} from ‘element-ui’

   Vue.use(Element)
   Vue.use(Form)
   Vue.use(FormItem)
   Vue.use(Input)

   Vue.use(Button)
   Vue.use(Container)
   Vue.use(Header)
   Vue.use(Main)
   Vue.use(Aside)
   Vue.use(Menu)
   Vue.use(Submenu)
   Vue.use(MenuItemGroup)
   Vue.use(MenuItem)
   Vue.prototype.$message=Message//挂载到原型对象，全局使用Vue.prototype.$confirm = MessageBox.confirm

5. /Home.vue 文件

   0. 需求：
      方案：
   1. 需求： 确定整体布局
      方案： 直接使用 Container 布局容器进行布局
   2. 需求： 左侧菜单栏布局。菜单分为两级，且可以折叠
      方案： -1.使用 NavMenu 导航菜单进行布局
      
      -2.通过接口获取菜单数据
      async getMenuList() {
      const { data: res } = await this.$http.get{(}^{\prime }menu{s}^{\prime })if(res.mata.status!==200)returnthis.$message.error(res.meta.msg)
      this.menulist = res.data
      }
      -3.双层v-for循环 menulist 数据，动态添加目录项
      
      :index="’/’+subItem.path+’’" //以subItem.path作为index，对应子路由path
      v-for=“subItem in item.children”
      :key=“subItem.id”
      @click=“saveNavState(subItem.path)”>
      -4.循环遍历给菜单项添加不同的图标
      
      -5.左侧菜单折叠和展开
      
      |||
      :collapse=“isCollapse”
      isCollapse: false,
      
      toggleCollapse() { this.isCollapse = !this.isCollapse }
   3. 需求： 点击菜单栏选项，右侧显示相应内容
      方案：-1.router中配置 /home 页面子路由，main 区域使用占位符
      
      -2.二级菜单进行路由链接。el-menu开启:router选项，以二级菜单 index 作为 path 进行路由跳转
   4. 需求： 点击菜单栏选项高亮
      方案：-1. el-menu开启 :default-active=“activePath”
      -2. 点击菜单时保存点击激活的路径
      saveNavState(activePath) {
      window.sessionStorage.setItem(‘activePath’, activePath)
      this.activePath = activePath
      }
      -3. home组件创建时取出
      created() {
      this.activePath = window.sessionStorage.getItem(‘activePath’)
      }
   5. 需求：
      方案：

6. /Login.vue 登陆组件文件

   0. 需求：
      方案：

   1. 需求： 背景色无法撑满全屏
      方案： -1.全局初始化样式，html,body,#app 设置height为100%，margin，padding为0
      -2.登陆窗口container height 为 100%，撑满全屏

   2. 需求： 输入框表单的处理步骤
      方案： -1.将表单的值与 data 中对应的项进行双向绑定
      label="登陆
      :model=“loginForm”
      v-model=“loginForm.username” v-model=“loginForm.password”
      -2.进行数据的添加时表单验证。在data中添加 rules 选项，选择数据验证具体规则
      :rules=“rules”
      prop=“name” prop=“rules中的具体规则项”
      -3.点击按钮表单数据的重置。点击重置按钮时调用事件函数resetFields()
      ref=“loginFormRef” this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …} = await this.http.post(‘login’, this.loginForm)
      if (res.meta.status !== 200) return this.$message.error{(}^{\prime }登陆失败{!}^{\prime })this.$message.success(‘登陆成功!’)
      })
      window.sessionStorage.setItem(‘token’, res.data.token)
      this.$router.push(’/home’) //登陆成功后跳转到/home
      }

   3. 需求： 登录之后状态保存
      方案： -1.将登陆成功之后的 token 保存到客户端的 seesionStorage 中
      -2.给 router 添加路由导航守卫，访问其他页面时检测token，没有token,强制跳转到登录页
      -3.在 main.js中，给axios 请求拦截器添加 token 请求头，Authorization字段携带token发送请求

   4. 需求： 退出功能
      方案： 基于 token 的方式实现退出，只需要销毁本地的 token
      logout() {
      window.sessionStorage.clear()
      this.$router.push(’/login’)
      }

7. /Welcome.vue 文件

   0. 需求：
      方案：

8. /User.vue 文件

   components/user/user.vue
   /用户管理

   1. 需求： 控制组件的固定宽度
      方案： 使用 Layout 布局的栅格布局

   2. 需求： 页面创建后数据填入
      方案： 在 created() 里边发起网络请求,获取数据并保存至data
      async getUserList() {
      const{ data:res } = await this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.message.error(‘获取用户列表失败！’)
      }
      this.userlist = res.data.user
      this.total = res.data.total
      }

        data() {
       	  return {
       	   queryInfo: {
       		    query: '',
       		    pagenum: 1,
       		    pagesize: 2
       		   }
       		 }
       	  }
      

   3. 需求： 使用表格展示数据
      方案： -1.套入模板，el-table,el-table-column
      -2.绑定数据，:data=“userlist” label=“列标题” prop=“username”
      -3.添加特性， border stripe
      -4.添加索引列， type=“index”
      -5.

   4. 需求： 表格内选项表现为radio开关状态
      方案： -1.使用作用域插槽,在el-table-column中插入
      
      
      
      -2.状态改变后同步到后端数据库
      async userStateChanged(useroinfo) {
      const { data: res } = await this.$http.put(‘users/${userinfo.id}/state/KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.message.error(‘更新状态失败！’)
      }
      this.$message.success(‘更新用户状态成功！’)
      }

   5. 需求： 鼠标hover时显示文字提示
      方案： -1.使用Tooltip 文字提示组件

   6. 需求： 验证邮箱和手机号的规范
      方案： -1.自定义验证规则

   data() {
   //验证邮箱的规则
   var checkEmail = (rule, value,cb) => {
   //验证邮箱的正则表达式
   const regEmail = /^/

      if(regEmail.test(value)){
        //合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
     }
    }
   

   7. 需求： 点击按钮添加一个新用户
      方案： -1.表单预验证，验证成功发送网路请求，post表单数据到后台数据库
      -2.添加成功后，隐藏添加对话框，重新请求数据刷新列表

   8. 需求： 单击按钮修改用户数据
      方案： -1.添加一个修改用户信息用的对话框
      -2.点击修改按钮弹出对话框，在点击事件里 用scope.row.id 获取用户ID
      -3.根据ID网络请求查询用户信息，保存到 data 填充到对话框
      -4.点击对话框取消按钮，重置表单
      -5.点击对话框确定按钮，进行提交时验证，并 put到后端服务器
      -6.点击确定按钮的同时，对话框状态改为false，刷新数据列表，提示修改成功

   9. 需求： 单击按钮刹删除用户数据
      方案： -1.点击事件里获取用户ID，先使用MessageBox弹框警告用户
      -2.用户确认后，发送网路请求，后端数据库删除
      async removeUserById(id){
      const confirmResult = await this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … retunn this.message.info(‘已取消删除’)
      }
      const {data:res} = await this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.message.error(‘删除数据失败’)
      }
      this.$message.success(‘删除用户成功’)
      this.getUserList()
      }

9.power/Rights.vue文件

>>>cpmponents/power/Right.vue
>>>权限管理/权限列表
0. 需求： 
   方案： 
1. 需求： 展示用户权限数据
   方案： -1.封装获取用户权限列表函数，发送网络请求
   	     -2.函数添加到 created()
2. 需求： 根据权限等级(1,2,3)渲染不同的表现
   方案： -1.添加作用于插槽，使用 el-Tag
   		 -2.在Tag的属性里使用 scope.row.level 进行v-if判断显示和隐藏

10.power/Roles.vue文件

>>>components/power/Roles.vue
>>>权限管理/角色列表
0. 需求： 
   方案：
1. 需求： 展开行显示角色权限详细消息
   方案：-1.在el-table中最前列添加
		
   		-2.在expand中 插入作用域插槽，进行数据展示 scope.row
   		-3.使用栅格系统分两列，5-19
		-4.第一列中for循环创建
        -5.第二列中，嵌套el-row再分两列 6-18
2. 需求： 浏览器宽度变化是页面元素会换行
   方案： 全局给页面添加 min-width: 1366px;
3. 需求： 
   方案：   

11.goods/Cate.vue

>>>cpmponents/goods/Cate.vue
0. 需求： 
   方案：  
1. 需求： 实现树形table表格
   方案： -1.依赖三方插件 vue-table-with-tree-grid
		 -2.

2. 需求： 
   方案：

8.项目优化

1. 生成打包报告

   1. 通过命令行工具生成 vue-cli-service build --report
   2. 通过可视化面板工具 vue cli
      //通过使用 vue.config.js 修改 webpack 的默认配置
      -1.新建 vue.config.js 文件
      //为开发模式与发布模式指定不同的打包入口
      //通过使用 chainWebpack 自定义打包入口
      //vue.config.js
      module.exports = {
      chainWebpack: config => {
      config.when(process.env.NODE_ENV === ‘production’,config => {
      config.entry(‘app’).clear().add(’./src/main-prod.js’)
      })
      config.when(process.env.NODE_ENV === ‘development’,config => {
      config.entry(‘app’).clear().add(’./src/main-dev.js’)
      })
      }
      }

2. 第三方库启用CDN

   1. 通过 externals 加载外部 CDN 资源
      //默认情况下，通过 import 语法导入的第三方依赖包，最终会被合并打包到同一个文件中，从而导致打包后单文件体积过大的问题
      //可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。声明在 externals中的第三方资源，都不会被打包
      //vue.config.js
      config.set(‘externals’,{
      vue:‘Vue’,
      ‘vue-router’: ‘VueRouter’,
      axios: ‘axios’,
      lodash: ‘_’,
      echarts: ‘echarts’,
      nprogress: ‘NProgress’,
      ‘vue-quill-editor’: ‘VueQuilEditor’
      })

      //在public/index.html文件的头部，添加CDN引用文件
      
       
      
      
      

3. Element-UI 组件按需加载

   1. 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
   2. 在 index.html 的头部区域，通过 CDN 加载 elelemt-ui的 js 和 样式引入

4. 路由懒加载

   1. 安装 @babel/plugin-syntax-dynamic-import 包
   2. 在 babel.config.js 配置文件中声明该插件
   3. 将路由改为按需加载的形式

5. 首页内容定制