本文從安裝到文件配置進(jìn)行詳講，需要耐心操作和分析哦。

（一）安裝：

1、下載安裝node: 登陸node官網(wǎng) 并選擇自己合適的node版本進(jìn)行安裝；

2、安裝vue-cli腳手架工具

npm install -g @vue/cli
# OR
# 推薦使用
npm install -g yarn # 如果已有安裝，此步驟不需要
yarn global add @vue/cli 

（二）創(chuàng)建一個(gè)項(xiàng)目：

vue create my-project
# OR
vue ui

• 選擇合適的配置

# 版本信息
Vue CLI v3.7.0 
? Please pick a preset:
# 基礎(chǔ)配置
  vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
  default (babel, eslint)
# 自定義配置，這里我們選擇自定義選項(xiàng)，點(diǎn)擊回車(chē)
> Manually select features

• 選擇需要的插件及編譯工具

? Check the features needed for your project:
# 代碼轉(zhuǎn)換，可以讓你更好的書(shū)寫(xiě)前沿技術(shù)
 (*) Babel
# JavaScript 的一個(gè)超集，好東西用起來(lái)
 (*) TypeScript
# PWA支持,不要求使用可以不選
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
# css預(yù)編譯器
 (*) CSS Pre-processors
# 代碼格式化
 (*) Linter / Formatter
# 書(shū)寫(xiě)單元測(cè)試用的，不要求使用可以不選
>(*) Unit Testing
 ( ) E2E Testing

• 接下來(lái)的配置選項(xiàng)

# 是否使用class風(fēng)格進(jìn)行組件開(kāi)發(fā)
? Use class-style component syntax? Yes
# 使用 babel 對(duì) TypeScript 代碼進(jìn)行編譯轉(zhuǎn)換
? Use Babel alongside TypeScript for auto-detected polyfills? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 選擇css預(yù)編譯，這里我們選擇Sass/SCSS
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
# 選擇代碼格式化配置
? Pick a linter / formatter config: Standard
# 代碼檢查方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
# 選擇單元測(cè)試工具
? Pick a unit testing solution: Mocha
# 是否將配置放在單獨(dú)的文件中
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# 是否將此次配置保存
? Save this as a preset for future projects? No

• 最后

cd my-project
npm run install
npm run serve
# OR 推薦使用
yarn install
yarn serve

（三）目錄結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)截圖

（四）環(huán)境變量配置

• 環(huán)境變量說(shuō)明

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會(huì)被 git 忽略

1.新建環(huán)境變量 .env.development.test 用于測(cè)試環(huán)境 并添加如下代碼

NODE_ENV='development'
VUE_APP_URL='你的測(cè)試環(huán)境域名'

只有以 VUE_APP_ 開(kāi)頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問(wèn)它們：
console.log(process.env.VUE_APP_URL)

2.修改 package.json,并在scripts里面添加如下代碼

"serve:test": "vue-cli-service serve --mode development.test",

3.如果項(xiàng)目中有使用到公共環(huán)境變量，為了避免在每個(gè).env文件中配置，我們也可以在vue.config.js里面進(jìn)行配置

（五）添加配置文件 vue.config.js

vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫(xiě)法需要你嚴(yán)格遵照 JSON 的格式來(lái)寫(xiě)。

// vue.config.js
module.exports = {
    // baseUrl從 Vue CLI 3.3 起已棄用，請(qǐng)使用publicPath。
    // baseUrl:'./', 
    // 配置sub-path后訪問(wèn)路徑為https://xxx-path/sub-path/#/
    publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
    // 輸出文件路徑，默認(rèn)為dist
    outputDir: 'dist',  
    // 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
    assetsDir: '', 
    // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
    indexPath: '',
    // 配置多頁(yè)應(yīng)用
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板來(lái)源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當(dāng)使用 title 選項(xiàng)時(shí)，
            // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
            // 提取出來(lái)的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 當(dāng)使用只有入口的字符串格式時(shí)，
        // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
        // 并且如果找不到的話，就回退到 `public/index.html`。
        // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
        subpage: 'src/subpage/main.js',
    },
    lintOnSave: true,  // 保存時(shí) lint 代碼
    // css相關(guān)配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開(kāi)啟 CSS source maps?
        sourceMap: false,
        // css預(yù)設(shè)器配置項(xiàng)
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // 自動(dòng)注入全局變量樣式
                data: `
                    @import "src/你的全局scss文件路徑";
                `
            }
        },
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false,
    },
    // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
    productionSourceMap: false,
    //是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個(gè)內(nèi)核時(shí)自動(dòng)啟用，僅作用于生產(chǎn)構(gòu)建。
    parallel: require('os').cpus().length > 1,
    // 所有 webpack-dev-server 的選項(xiàng)都支持
    devServer: {
        port: 8080, // 配置端口
        open: true, // 自動(dòng)開(kāi)啟瀏覽器
        compress: true, // 開(kāi)啟壓縮
        // 設(shè)置讓瀏覽器 overlay 同時(shí)顯示警告和錯(cuò)誤
        overlay: {
            warnings: true,
            errors: true
        },
        // 設(shè)置請(qǐng)求代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    },
}

（六）修改webpack配置信息

vue-cli3.0的版本已經(jīng)將webpack的配置整合進(jìn)vue.config.js里面了

// 安裝 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安裝 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D

// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    chainWebpack: config => {
        // 引入babel-polyfill
        config
            .entry('index')
            .add('babel-polyfill')
            .end();
        // 添加文件路徑別名
        config.resolve.alias.set("@", resolve("src"));
        if (isProduction) {
            // 生產(chǎn)環(huán)境注入cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: config => {
        if (isProduction) {
            // 為生產(chǎn)環(huán)境修改配置...
            config.plugins.push(
                //添加代碼壓縮工具，及設(shè)置生產(chǎn)環(huán)境自動(dòng)刪除console
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true,
                            drop_console: true,
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            );
        } else {
            // 為開(kāi)發(fā)環(huán)境修改配置...
        }
    },
}

3.分離第三方插件，引入cdn配置
這里介紹一個(gè)開(kāi)源的cdn庫(kù) www.bootcdn.cn/

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    css: [],
    js: [
        'https://xxx-cdn-path/vue.runtime.min.js',
        'https://xxx-cdn-path/vue-router.min.js',
        'https://xxx-cdn-path/vuex.min.js',
        'https://xxx-cdn-path/axios.min.js',
    ]
}

module.exports = {
    configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入,分離第三方插件
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios'
            }
        } else {
            // 為開(kāi)發(fā)環(huán)境修改配置...
        }
    },
}

修改html文件

<!DOCTYPE html>
<html lang="zh">

<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 %>static/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
  <title>my-project</title>
  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
  <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>

</html>

（七）關(guān)于打包后請(qǐng)求數(shù)的優(yōu)化點(diǎn)Preload and Prefetch

首先我們看一張圖

從圖中我們可以看出首次加載的資源非常多，有217個(gè)請(qǐng)求，為什么會(huì)這樣呢？

查看官方文檔，可以得知：

<link rel="preload"> 是一種 resource hint，用來(lái)指定頁(yè)面加載后很快會(huì)被用到的資源，所以在頁(yè)面加載的過(guò)程中，我們希望在瀏覽器開(kāi)始主體渲染之前盡早 preload。

默認(rèn)情況下，一個(gè) Vue CLI 應(yīng)用會(huì)為所有初始化渲染需要的文件自動(dòng)生成 preload 提示。

這些提示會(huì)被 @vue/preload-webpack-plugin 注入，并且可以通過(guò) chainWebpack 的 config.plugin('preload') 進(jìn)行修改和刪除。

<link rel="prefetch"> 是一種 resource hint，用來(lái)告訴瀏覽器在頁(yè)面加載完成后，利用空閑時(shí)間提前獲取用戶未來(lái)可能會(huì)訪問(wèn)的內(nèi)容。

默認(rèn)情況下，一個(gè) Vue CLI 應(yīng)用會(huì)為所有作為 async chunk 生成的 JavaScript 文件 (通過(guò)動(dòng)態(tài) import() 按需 code splitting 的產(chǎn)物) 自動(dòng)生成 prefetch 提示。

這些提示會(huì)被 @vue/preload-webpack-plugin 注入，并且可以通過(guò) chainWebpack 的 config.plugin('prefetch') 進(jìn)行修改和刪除。

所以修改vue.config.js文件

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
  }
}

（八）總結(jié)

vue-cli3在項(xiàng)目配置上精簡(jiǎn)了很多，而且它也提供了很多配置選項(xiàng)，滿足定制化需要。各種配置也特別貼心，可以按照自己項(xiàng)目的需要進(jìn)行自定義修改，大大減少了提升了開(kāi)發(fā)的工作效率。