Criar projeto vue cli4 e configuração de pacote

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. Crie um projeto vue

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

// Escolha a terceira configuração sob demanda


, selecione o espaço e pressione Enter,

um vue 2 e
um vue 3.
Aqui eu escolho

se vue 2 usa o modo de histórico de roteamento, dependendo dos indivíduos e projetos, você pode escolher não
usar histórico durante o desenvolvimento. Depois de ficar online, você precisa ter a configuração relevante
no back - end. Continue a pressionar Enter.

Como este novato ainda não conhece o dart-sass,
escolha o node-sass para

escolher qual detecção automatizada de formatação de código ESLint, respectivamente: apenas prevenção, configuração airbnb, configuração de rótulo, configuração máxima, selecione aqui um

tempo de detecção de código de seleção de configuração traseira ultralta esquerda , selecione o teste aqui quando você salvar a

atualização de código mudará o arquivo de configuração para o pakage.json sozinho ou em um arquivo separado , onde você pode selecionar arquivos individuais, desmarque

se A configuração predefinida definida acima é salva. Não é necessário aqui. Não é difícil selecionar novamente cada vez que você criar um projeto. Você o selecionará em breve. Digite n

Se um erro for relatado,
não entre em pânico,

exclua node_modules

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

Use cnpm i para baixar as dependências novamente

3. Execute o projeto

yarn serve

Copie este URL para o navegador

4. Até agora, foi bem sucedido, configure babel.config.js abaixo
se não houver babel.config.js

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

Após a instalação ser bem-sucedida, o arquivo é gerado: babel-config.js
O seguinte arquivo de elemento de configuração é carregado sob demanda

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

5. Inicie a configuração vue.config.js abaixo, sem este arquivo, crie um novo

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. Configure o carregamento lento de roteamento

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

待更新