介紹

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：
通過 @vue/cli 搭建互動式的專案腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個執行時依賴 (@vue/cli-service)，該依賴：
可升級；
基於 webpack 構建，並帶有合理的預設配置；
可以通過專案內的配置檔案進行配置；
可以通過外掛進行擴充套件。
一個豐富的官方外掛集合，集成了前端生態中最好的工具。
一套完全圖形化的建立和管理 Vue.js 專案的使用者介面。

這是官方對Vue CLI 3的介紹，在使用全新的Vue CLI 3 開發專案過程中，個人認為大多數小型專案基本可做到零配置。

安裝

安裝教程官方文件有比較詳細的解答，不再贅述。

專案結構

|-- dist                     編譯後的檔案目錄
|-- node_modules             依賴包
|-- public                   模板檔案和靜態資源
|-- src                      開發目錄（配置完成後基本只在該資料夾開發即可）
   |-- assets                    資源，如 css、image、iconfont
   |-- components                元件
   |-- router                    路由 vue-router
   |-- store                     狀態 vuex
   |-- views                     路由元件，即某個路由直接指向該元件
   |-- App.vue                   根元件
   |-- main.js                   專案入口
|-- .browserslistrc          配置支援的瀏覽器範圍，babel會根據這個進行 Polyfill
|-- .editorconfig            設定該專案的編輯器的配置
|-- .env.development         開發環境自定義引數
|-- .env.production          生產環境自定義引數
|-- .eslintrc.js             eslint 配置
|-- .gitignore               git 忽略目錄
|-- babel.config.js          babel 配置
|-- package.json             專案依賴列表
|-- postcss.config.js        postcss 配置
|-- README.md
|-- vue.config.js            專案配置及 webpack 配置
 

使用Vue CLI 3建立一個專案，專案的結構大概如此，因為部分檔案是當你有需要自己新增的。下面會介紹一些資料夾具體的功能。

public

public資料夾類似之前腳手架專案的static資料夾，但是，現在的html模板檔案也會放在該資料夾內，在打包過程中除了html模板檔案，其他資源會直接複製到dist資料夾下，而不需要編譯和壓縮。

src

src資料夾與之前的腳手架專案基本相同，不同點在於，該專案多了一個view資料夾，我們可以把路由元件放在該資料夾內，便於我們專案的維護，當然，你也可以放在其他資料夾。
同時，建議將router.js和store.js進行拆分，分別放入router資料夾和store資料夾，小型專案拆分的作用並不大，但是當你的專案有幾十上百的頁面時，你會發現，拆分後的程式碼閱讀起來是如此的清爽~

.env.xxx

這類檔案主要是根據環境來載入不同的變數。這類變數是可以在客戶端使用的，但是要遵循一定的規則。

只有以 VUE_APP_ 開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。

比如你在.env.xxx檔案定義瞭如下變數：

VUE_APP_SECRET=secret

那麼你可以在客戶端程式碼中這樣使用：

console.log(process.env.VUE_APP_SECRET)

vue.config.js

如果你的專案需要一些個性化的配置，那麼基本上所有的配置需要在 vue.config.js 檔案內進行配置。
官方配置文件

部分配置示例：

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production'
        ? '/app/'
        : '/',
    // 多頁面應用 https://cli.vuejs.org/zh/config/#pages
    // pages: {},
    // 請求代理
    devServer: {
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            }
        }
    },
    // 生產環境下的sourceMap
    productionSourceMap: true,
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 為生產環境修改配置...
            config
                .externals({
                    'vue': 'Vue',
                    'vue-router': 'VueRouter',
                    'vuex': 'Vuex',
                })
        } else {
            // 為開發環境修改配置...
        }
    }
}

總結

Vue CLI 3 帶來了更簡單的配置、更豐富的功能，但是同時也擁有新的配置模式，如果沒有熟悉官方文件就盲目的進行配置和使用會帶來一些問題，建議還是在使用之前大概的檢視一下官方的配置文件，以便於在出現問題時能夠及時解決。