1. 程式人生 > >Vue CLI 專案結構及解析

Vue CLI 專案結構及解析

介紹

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