Vue 爬坑之路 — vue-cli 3.x 搭建專案
一、安裝 @vue/cli
更新到 3.x 之後,vue-cli 的包名從vue-cli
改成了 @vue/cli
如果之前全域性安裝了舊版本的vue-cli (1.x 或 2.x)
,首先需要使用以下命令解除安裝掉
// 如果沒有安裝舊版本的 vue-cli 可以跳過解除安裝直接安裝
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然後重新安裝新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝完成後,可以使用 vue -V
二、建立專案的三種方式
1.x
和 2.x
的vue-cli
採用 init 命令建立專案
vue init webpack project-name
3.x
也支援這種方式,其執行結果和以前一樣,
但剛入行的前端萌新可能還不習慣命令列的構建方式
於是 vue/cli 3.x
新增了圖形化的方式來建立專案
首先還是得在指定目錄下開啟終端,然後執行:
vue ui
然後瀏覽器會開啟一個頁面,可以按照頁面將的引導建立專案
不過我還是建議使用命令列工具,這才符合一個程式設計師的身份嘛
vue create project-name
這裡的project-name
是自定義的專案名稱,命令執行之後,會生成對應資料夾
三、引數詳解
使用 create
命令建立專案的時候,有很多配置項需要選擇
如果對某項配置項不熟悉,可以直接選擇第一個選項
首先需要選擇模組
如果選擇預設選項 default
,將會構建一個最基本的 vue 專案(沒有 vue-router 也沒有 vuex)
這裡推薦選擇第二項Manually select features
然後根據自己的需求,使用空格鍵選擇具體的模組
如果不熟悉上面的模組分別代表什麼,可以先按照上圖的示意勾選模組
這樣就會建立一個包含vue-router
vuex
和 postcss
的專案
勾選之後,使用回車鍵進入下一步
這裡需要選擇路由模式,yes 是 history
模式,no 是 hash
模式
萌新可以先從 hash 模式入手,不過實際專案通常採用 history 模式
然後選擇一個合適CSS
的預編譯工具
都不熟悉的話就選 sass
或者 less
,因為 stylus
不支援原生CSS
寫法
後面還需要選擇ESLint
的校驗規則,格式化的時機,和各個外掛的配置項的位置,不熟悉的話就選第一個
然後就有了這樣的過程:
最後選擇是否將配置項儲存為預設,然後配置完成,開始生成專案
專案生成之後,已經自動安裝了相關的依賴項,這時候可以直接啟動專案:
npm run serve
四、vue.config.js
完成以上步驟之後,就已經可以開發vue
專案了,但無法滿足定製化的開發需求
這時候就需要手動建立一個 **vue.config.js
,**官方的配置文件可以參考這裡
這裡我貼一個常用的vue.config.js
// vue.config.js
module.exports = {
baseUrl: '/',
outputDir: 'dist', // 打包的目錄
lintOnSave: true, // 在儲存時校驗格式
productionSourceMap: false, // 生產環境是否生成 SourceMap
devServer: {
open: true, // 啟動服務後是否開啟瀏覽器
host: '0.0.0.0',
port: 8080, // 服務埠
https: false,
hotOnly: false,
proxy: null, // 設定代理
before: app => {}
},
}
vue.config.js
還有很多很厲害的配置項
比如構建多頁面應用的 pages
、改造為 pwa
的配置項 pwa
、高階CSS
打包方案 css
這裡就不細說了,如果有興趣可以仔細研究官方文件
五、環境變數
有過一定開發經驗的小夥伴都知道,一個專案通常有三種模式:
開發模式 development
、測試模式 test
、生產模式 production
而開發中通常會根據環境變數 NODE_ENV 來進行區分這三種開發模式
然後通過很多的switch... case
來判斷
而 3.x
的專案中就不需要寫switch...case
了
直接在根目錄下建立以.env
為字首的檔案
這裡的.env
檔案儲存的是公用引數,可以在所有模式中獲取到
而其他檔案中的引數,只能在對應模式中獲取到
比如 .env.development
中的引數,就只有在development
模式下生效
然後在檔案內新增對應的鍵值對
然後在 package.json
的 scripts 命令中新增對應的mode
// serve
、bulid
都有預設的模式,但最好是將模式顯式的展現在配置項中
然後就能在專案中獲取到對應模式下的值
關於環境變數和模式的詳情,可以參考官方文件
出處:https://www.jianshu.com/p/51e5356c69fe