Create vue cli4 project and package configuration

1. Install 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. Create a vue project

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

Insert picture description here
//Choose the third on-demand configuration

, select the space, and press enter,

one vue 2 and
one vue 3.
Here I choose

whether vue 2 uses the routing history mode, depending on individuals and projects, you can choose not to
use history during development. After going online, you need to have related configuration
on the backend. Continue to press Enter.
![Insert picture description here](https://img-blog.csdnimg.cn/20210105115428305.png
Since this rookie does not know dart-sass yet,
choose node-sass to

choose which ESLint automated code formatting detection, respectively: prevention only, airbnb configuration, label configuration, maximum configuration, here select one ultrahigh left rear configuration
Insert picture description here
selection code detection timing, select the test here when you save the code

update will change the configuration file into the pakage.json alone or in a separate file, where you can select individual files, clear

whether the The preset configuration set above is saved. It is not necessary here. It is not troublesome to re-select each time you create a project. You will soon select it. Enter n

If an error is reported, do Insert picture description here
n’t panic,

delete node_modules

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

Use cnpm i to download the dependencies again
Insert picture description here
3. Run the project

yarn serve

Insert picture description here
Copy this URL to the browser

4. So far, it has been successful, configure babel.config.js below
if there is no babel.config.js

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

After the installation is successful, the file is generated: babel-config.js
The following configuration Element file is loaded on demand

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

5. Start the vue.config.js configuration below, without this file, create a new one
Insert picture description here

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 routing lazy loading

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

待更新

Create vue cli4 project and package configuration

Guess you like