Vue 爬坑之路(十二)—— vue-cli 3.x 搭建項目
Vue Cli 3 官方文檔:https://cli.vuejs.org/zh/guide/
一、安裝 @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 (這個 V 是大寫的)查看版本號
二、創建項目的三種方式
1.x 和 2.x 的的 vue-cli 采用 init 命令創建項目
vue init webpack project-name
3.x 也支持這種方式,其運行結果和以前一樣,詳情可以參考《Vue 爬坑之路(一)》
但剛入行的前端萌新可能還不習慣命令行的構建方式
於是 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 的項目
關於 vue-router 和 vuex 可以參考我之前的博客:
《Vue 爬坑之路(三)—— 使用 vue-router 跳轉頁面》
《Vue 爬坑之路(四)—— 與 Vuex 的第一次接觸》
勾選之後,使用回車鍵進入下一步
這裏需要選擇路由模式,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: 8384, // 服務端口
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 文件保存的是公用參數,可以在所有模式中獲取到
而其他文件中的參數,只能在對應模式中獲取到
然後在文件內添加對應的鍵值對
然後在 package.json 的 scripts 命令中添加對應的 mode
// serve、bulid 都有默認的模式,但最好是將模式顯式的展現在配置項中
然後就能在項目中獲取到對應模式下的值
關於環境變量和模式的詳情,可以參考官方文檔
Vue 爬坑之路(十二)—— vue-cli 3.x 搭建項目