Projeto de comércio eletrônico 07

### 1. Otimização do projeto
Etapas de implementação:
A. Gerar um relatório de pacote e otimizar o projeto de acordo com o relatório
B. Habilitar CDN para bibliotecas de terceiros
C. Carregar componentes de UI de elemento sob demanda
D. Rotear carregamento lento
E. Página inicial personalização do conteúdo da página

### 2. Adicionando uma barra de progresso Para
adicionar um efeito de barra de progresso ao projeto, primeiro abra o console do projeto, abra as dependências, instale nprogress e
abra main.js e escreva o seguinte código

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，先会调用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
})

### 3. Modifique o código de
acordo com o relatório de erro. Altere o código correspondente de acordo com o prompt de aviso do ESLint
. Altere a configuração "printWidth": 200 no arquivo .prettierrc e altere o número de palavras por linha de código para 200

{
    "semi":false,
    "singleQuote":true,
    "printWidth":200
}

### 4. Execute a compilação para
instalar um plug-in (babel-plugin-transform-remove-console). Remova todas as informações do console durante a fase de compilação do projeto.
Abra o console do projeto, clique em Dependência -> Dependência de Desenvolvimento e digite babel -plugin-transform- remove-console, instale
Abra babel.config.js, edite o código da seguinte maneira:

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

### 5. Gere um relatório de empacotamento
A. Gere um relatório de empacotamento na forma de linha de comando
vue-cli-service build --report
B. Gere um relatório de empacotamento no console vue
Clique em "Task" => "Build" = > "Executar" para
concluir a operação Clique em "Análise" à direita e visualize o relatório no painel "Painel de Controle"

### 6. Modificar a configuração padrão do webpack Por
padrão, o projeto gerado pelo vue-cli 3.0 oculta os itens de configuração do webpack. Se precisarmos configurar o webpack, precisamos configurá-
lo através de vue.config.js.
Crie o arquivo vue.config.js no diretório raiz do projeto,

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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')
        })
    }
}

Suplemento:
chainWebpack pode modificar a configuração do webpack na forma de programação em cadeia,
configureWebpack pode modificar a configuração do webpack na forma de objetos de operação

### 7. Carregue o CDN externo.
Por padrão, todos os pacotes de dependências de terceiros serão empacotados no arquivo js / chunk-vendors. ******. Js, o que torna o arquivo js muito grande,
para que possamos passar externos, exclui esses pacotes para que eles não sejam empacotados no arquivo js / chunk-vendors. ******. js

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

Depois de definir a exclusão, para nos permitir usar vue, axios e outros conteúdos, precisamos carregar um CDN externo para resolver a introdução de dependências.
Abra o arquivo de entrada de desenvolvimento main-prod.js e exclua o código de importação padrão

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')

Em seguida, abra public / index.html para adicionar o código de importação cdn externo

<!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>

    <!-- 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/[email protected]/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <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>
    <!-- built files will be auto injected -->
  </body>
</html>

### 8. Personalize o conteúdo da página inicial
A forma de exibição do conteúdo na página inicial do ambiente de desenvolvimento e na página inicial do ambiente de publicação é diferente. Por
exemplo, a importação é usada para carregar pacotes de terceiros no ambiente de desenvolvimento, e o CDN é usado no ambiente de publicação, portanto, a página inicial também precisa ser baseada em diferentes ambientes para diferentes implementações.
Podemos personalizar o conteúdo da página inicial por meio de plug-ins, abrir vue.config.js e escrever o código da seguinte maneira:

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

Em seguida, use o plug-in em public / index.html para determinar se é um ambiente de publicação e personalizar o conteúdo da página inicial

<!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><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

### 9. Carregamento lento de roteamento
Quando o roteamento é acessado, o arquivo de roteamento correspondente é carregado, que é o carregamento lento de roteamento.
Etapas de implementação de roteamento lento:
1. Instale @ babel / plugin-syntax-dynamic-import para
abrir o console vue, clique em Dependência -> Instalar Dependência -> Dependência de Desenvolvimento -> Pesquisar @ babel / plugin-syntax-dynamic-import e
clique em Instalar .

2. Declare o plug-in em babel.config.js e abra babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3. Altere o roteamento para carregar sob demanda, abra router.js e altere o código do componente importado da seguinte forma:

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
// import Home from './components/Home.vue'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue')
// import Welcome from './components/Welcome.vue'
const Users = () => import(/* webpackChunkName:"user" */ './components/user/Users.vue')
// import Users from './components/user/Users.vue'
const Rights = () => import(/* webpackChunkName:"power" */ './components/power/Rights.vue')
// import Rights from './components/power/Rights.vue'
const Roles = () => import(/* webpackChunkName:"power" */ './components/power/Roles.vue')
// import Roles from './components/power/Roles.vue'
const Cate = () => import(/* webpackChunkName:"goods" */ './components/goods/Cate.vue')
// import Cate from './components/goods/Cate.vue'
const Params = () => import(/* webpackChunkName:"goods" */ './components/goods/Params.vue')
// import Params from './components/goods/Params.vue'
const GoodList = () => import(/* webpackChunkName:"goods" */ './components/goods/List.vue')
// import GoodList from './components/goods/List.vue'
const GoodAdd = () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue')
// import GoodAdd from './components/goods/Add.vue'
const Order = () => import(/* webpackChunkName:"order" */ './components/order/Order.vue')
// import Order from './components/order/Order.vue'
const Report = () => import(/* webpackChunkName:"report" */ './components/report/Report.vue')
// import Report from './components/report/Report.vue'

### 10.项上 线
#### A. Crie um servidor através do nó Crie
uma pasta vue_shop_server no mesmo nível de vue_shop para armazenar o servidor do nó
Use um terminal para abrir a pasta vue_shop_server, digite o comando npm init -y para
inicialize o pacote, digite o comando npm i
Abra o diretório vue_shop com express -S , copie a pasta dist e cole-o em vue_shop_server
. Crie o arquivo app.js na pasta vue_shop_server e escreva o código da seguinte maneira:

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

Em seguida, insira node app.js no terminal novamente

#### B. Abra a compressão gzip
Abra o terminal da pasta vue_shop_server, digite o comando: npm i compression -D
open app.js, escreva o código:

const express = require('express')

const compression = require('compression')

const app = express()

app.use(compression())
app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

#### C. Configurar o serviço https A
configuração do serviço https geralmente é processada em segundo plano e os desenvolvedores de front-end podem entendê-la.
Primeiro, você precisa se inscrever para um certificado SSL, entrar no site oficial https://freessl.cn,
importar o certificado em segundo plano, abrir as informações / material de hoje, copiar os dois arquivos do material para vue_shop_server,
abrir o app.js arquivo, escreva o código para importar o certificado e abra-o serviço https

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })

//启动https服务
https.createServer(options,app).listen(443)

Nota: O serviço https não pode ser usado normalmente devido ao problema com o certificado que estamos usando

#### D. Use pm2 para gerenciar aplicativos
Abra o terminal da pasta vue_shop_server e digite o comando: npm i pm2 -g
Use pm2 para iniciar o projeto, digite o comando no terminal: pm2 start app.js --name Nome personalizado para
visualizar a lista de projetos Comando: pm2 ls
Reiniciar projeto: pm2 restart Nome personalizado
Parar projeto: pm2 stop Nome personalizado
Excluir projeto: pm2 delete Nome personalizado