Crear proyecto vue cli4 y configuración de paquete

1. Instale vue / cli4.x

//卸载
npm uninstall vue-cli -g
//安装
 npm install -g @vue/cli

//安装yarn
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
//http://cdn.npm.taobao.org/dist/node-sass 已经失效
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass -g
yarn config get registry

2. Crea un proyecto vue

vue create 项目名称(不可有大写字母)

// Elija la tercera configuración a pedido


, seleccione el espacio y presione enter,

una vue 2 y
una vue 3.
Aquí elijo

si vue 2 usa el modo de historial de enrutamiento, dependiendo de las personas y los proyectos, puede optar por no
usar historial durante el desarrollo. Después de conectarse, debe tener la configuración relevante
en el backend. Continúe presionando Enter.

Dado que este novato aún no conoce dart-sass,
elija node-sass para

elegir qué detección automática de formato de código ESLint, respectivamente: solo prevención, configuración de airbnb, configuración de etiqueta, configuración máxima, aquí seleccione un

tiempo de detección de código de selección de configuración trasera ultra alta izquierda , seleccione la prueba aquí cuando guarde la

actualización del código cambiará el archivo de configuración al pakage.json solo o en un archivo separado , donde puede seleccionar archivos individuales, borre

si la configuración predeterminada establecida anteriormente está guardada. No es necesario aquí. No es problemático volver a seleccionar cada vez que crea un proyecto. Pronto lo seleccionará. Ingrese n

Si se informa un error,
no entre en pánico,

elimine node_modules

npm install -g cnpm -registry=https://registry.npm.taobao.org

Use cnpm i para descargar las dependencias nuevamente

3. Ejecute el proyecto

yarn serve

Copie esta URL en el navegador

4. Hasta ahora, ha sido exitoso, configure babel.config.js a continuación
si no hay babel.config.js

//安装: 
npm install babel-plugin-component -D

Una vez que la instalación es exitosa, se genera el archivo: babel-config.js
El siguiente archivo de elemento de configuración se carga bajo demanda

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

5. Inicie la configuración vue.config.js a continuación, sin este archivo, cree uno nuevo

module.exports = {
    
    
    publicPath: "./",//打包后的位置(如果不设置这个静态资源会报404)
    // publicPath: process.env.NODE_ENV === "production" ? "http://47.92.237.225:8080/dist" : "./",
    outputDir: "dist",//打包后的目录名称
    assetsDir: "static",//静态资源目录名称
    productionSourceMap: false,  //去掉打包的时候生成的map文件
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
    
    
        //sockHost: "http://192.168.2.22:8080/",
        //disableHostCheck: true,
        host: "0.0.0.0",  //不清楚主机和目的网络
        port: 8080, // 源地址端口，自行修改
       // disableHostCheck: true,
        //hotOnly: false,
       // useLocalIp: false,
               proxy: {
    
    
            '/api': {
    
    
                target: "http://localhost:8888",//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
    
    
                    '^/api': ''
                    //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
                    //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
                }
            }
        }
    }
}

6. Configurar la carga diferida de enrutamiento

//1、在命令行执行
 npm install babel-plugin-dynamic-import-node -S -D
//2、在babel.config.js中添加插件

待更新