Proyecto de comercio electrónico 07

Others 2021-04-01 20:53:07 views: null

### 1. Optimización del proyecto
Pasos de implementación:
A. Genere un informe de paquete y optimice el proyecto de acuerdo con el informe
B. Habilite CDN para bibliotecas de terceros
C. Cargue componentes Element-UI a pedido
D. Enrute la carga diferida
E. Inicio personalización del contenido de la página

### 2. Agregar una barra de progreso Para
agregar un efecto de barra de progreso al proyecto, primero abra la consola del proyecto, abra las dependencias, instale nprogress y
abra main.js , y escriba el siguiente 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 el código de
acuerdo con el informe de error. Cambie el código correspondiente según el mensaje de advertencia de ESLint
. Cambie la configuración "printWidth": 200 en el archivo .prettierrc y cambie el número de palabras por línea de código a 200

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

### 4. Ejecute la compilación para
instalar un complemento (babel-plugin-transform-remove-console). Elimine toda la información de la consola durante la fase de compilación del proyecto.
Abra la consola del proyecto, haga clic en Dependencia -> Dependencia de desarrollo e ingrese babel -plugin-transform- remove-console, instala
Open babel.config.js, edita el código de la siguiente manera:

//项目发布阶段需要用到的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. Genere un informe de empaquetado
A. Genere un informe de empaquetado en la forma de línea de comando
vue-cli-service build --report
B. Genere un informe de empaquetado en la consola de vue
Haga clic en "Tarea" => "Construir" = > "Ejecutar" para
completar la operación. Luego, haga clic en "Análisis" a la derecha y vea el informe en el panel "Panel de control".

### 6. Modificar la configuración predeterminada del paquete web Por
defecto, el proyecto generado por vue-cli 3.0 oculta los elementos de configuración del paquete web, si necesitamos configurar el paquete web, debemos configurarlo
a través de vue.config.js.
Cree el archivo vue.config.js en el directorio raíz del proyecto,

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 puede modificar la configuración del webpack en forma de programación en cadena,
configureWebpack puede modificar la configuración del webpack en forma de objetos de operación

### 7. Cargar CDN externo.
De forma predeterminada, todos los paquetes de dependencias de terceros se empaquetarán en el archivo js / chunk-vendors. ******. Js, lo que hace que el archivo js sea demasiado grande,
para que podamos pasar externos excluye estos paquetes para que no estén empaquetados en el archivo 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')
        })
    }
}

Después de configurar la exclusión, para que podamos usar vue, axios y otro contenido, necesitamos cargar un CDN externo para resolver la introducción de dependencias.
Abra el archivo de entrada de desarrollo main-prod.js y elimine el código de importación predeterminado

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

Luego abra public / index.html para agregar un código de importación 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. Personalizar el contenido de la página de inicio
La forma de mostrar el contenido en la página de inicio del entorno de desarrollo y la página de inicio del entorno de publicación es diferente. Por
ejemplo, la importación se utiliza para cargar paquetes de terceros en el entorno de desarrollo y la CDN es utilizado en el entorno de publicación, por lo que la página de inicio también debe basarse en diferentes entornos para diferentes implementaciones.Podemos
personalizar el contenido de la página de inicio a través de complementos, abrir vue.config.js y escribir el código de la siguiente manera:

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

Luego, use el complemento en public / index.html para determinar si se trata de un entorno de publicación y personalizar el contenido de la página de inicio

<!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. Carga diferida de enrutamiento
Cuando se accede al enrutamiento, se carga el archivo de enrutamiento correspondiente, que es la carga diferida de enrutamiento.
Pasos de implementación de enrutamiento diferido:
1. Instale @ babel / plugin-syntax-dynamic-import para
abrir la consola vue, haga clic en Dependencia -> Instalar dependencia -> Dependencia de desarrollo -> Buscar @ babel / plugin-syntax-dynamic-import y
haga clic en Instalar .

2. Declare el complemento en babel.config.js y 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. Cambie el enrutamiento para cargar a pedido, abra router.js y cambie el código del componente importado de la siguiente manera:

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. Crear un servidor a través del nodo Crear
una carpeta vue_shop_server en el mismo nivel de vue_shop para almacenar el servidor del nodo
Usar una terminal para abrir la carpeta vue_shop_server, ingresar el comando npm init -y para
inicialice el paquete, ingrese el comando npm i
Abra el directorio vue_shop con express -S , copie la carpeta dist y péguela en vue_shop_server
. Cree el archivo app.js en la carpeta vue_shop_server y escriba el código de la siguiente manera:

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

Luego ingrese el nodo app.js en la terminal nuevamente

#### B. Abrir compresión gzip
Abre el terminal de la carpeta vue_shop_server, ingresa el comando: npm i compresión -D
abre app.js, escribe el 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 el servicio https La
configuración del servicio https generalmente se procesa en segundo plano y los desarrolladores de aplicaciones para el usuario pueden comprenderla.
Primero, debe solicitar un certificado SSL, ingresar al sitio web oficial https://freessl.cn,
importar el certificado en segundo plano, abrir la información / material de hoy, copiar los dos archivos en el material a vue_shop_server,
abrir la aplicación.js archivo, escriba el código para importar el certificado y ábralo servicio 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: El servicio https no se puede usar normalmente debido al problema con el certificado que estamos usando.

#### D. Use pm2 para administrar aplicaciones
Abra el terminal de la carpeta vue_shop_server e ingrese el comando: npm i pm2 -g
Use pm2 para iniciar el proyecto, ingrese el comando en el terminal: pm2 start app.js --name Nombre personalizado para
ver la lista de proyectos Comando: pm2 ls
Reiniciar proyecto: pm2 reiniciar Nombre personalizado
Detener proyecto: pm2 detener Nombre personalizado
Eliminar proyecto: pm2 eliminar Nombre personalizado

Supongo que te gusta

Origin blog.csdn.net/weixin_48116269/article/details/109126380
Recomendado
Clasificación
Diario
Más
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)

Code World

© 2018 codetd.com