1、安裝 @vue/clicss
更新到 3.x 以後，vue-cli 的包名從 vue-cli 改爲了 @vue/clihtml
若是以前全局安裝了舊版本的 vue-cli (1.x 或 2.x)，首先須要使用如下命令卸載掉前端
// 若是沒有安裝舊版本的 vue-cli 能夠跳過卸載直接安裝vue
npm uninstall vue-cli -g # OR yarn global remove vue-cli
而後從新安裝新版本的 @vue/cliwebpack
npm install -g @vue/cli # OR yarn global add @vue/cli
安裝完成後，能夠使用 vue -V （這個 V 是大寫的）查看版本號程序員
2、建立項目的三種方式web
1.x 和 2.x 的的 vue-cli 採用 init 命令建立項目vue-router
vue init webpack project-name
3.x 也支持這種方式，其運行結果和之前同樣，詳情能夠參考《Vue 爬坑之路（一）》vuex
但剛入行的前端萌新可能還不習慣命令行的構建方式vue-cli
因而 vue/cli 3.x 新增了圖形化的方式來建立項目
首先仍是得在指定目錄下打開終端，而後運行：
vue ui
而後瀏覽器會打開一個頁面，能夠按照頁面將的引導建立項目
不過我仍是建議使用命令行工具，這才符合一個程序員的身份嘛
vue create project-name
這裏的 project-name 是自定義的項目名稱，命令執行以後，會生成對應文件夾
3、參數詳解
使用 create 命令建立項目的時候，有不少配置項須要選擇
若是對某項配置項不熟悉，能夠直接選擇第一個選項
首先須要選擇模塊
若是選擇默認選項 default，將會構建一個最基本的 vue 項目（沒有 vue-router 也沒有 vuex）
這裏推薦選擇第二項 Manually select features
而後根據本身的需求，使用空格鍵選擇具體的模塊
若是不熟悉上面的模塊分別表明什麼，能夠先按照上圖的示意勾選模塊
這樣就會建立一個包含 vue-router、vuex 和 postcss 的項目
關於 vue-router 和 vuex 能夠參考我以前的博客：
《Vue 爬坑之路（三）—— 使用 vue-router 跳轉頁面》
勾選以後，使用回車鍵進入下一步
這裏須要選擇路由模式，yes 是 history 模式，no 是 hash 模式
萌新能夠先從 hash 模式入手，不過實際項目一般採用 history 模式
而後選擇一個合適 CSS 的預編譯工具
都不熟悉的話就選 sass 或者 less，由於 stylus 不支持原生 CSS 寫法
後面還須要選擇 ESLint 的校驗規則，格式化的時機，和各個插件的配置項的位置，不熟悉的話就選第一個
而後就有了這樣的過程：
最後選擇是否將配置項保存爲預設，而後配置完成，開始生成項目
項目生成以後，已經自動安裝了相關的依賴項，這時候能夠直接啓動項目：
npm run serve
4、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
這裏就不細說了，若是有興趣能夠仔細研究官方文檔
5、環境變量
有過必定開發經驗的小夥伴都知道，一個項目一般有三種模式：
開發模式 development、測試模式 test、生產模式 production
而開發中一般會根據環境變量 NODE_ENV 來進行區分這三種開發模式
而後經過不少的 switch... case 來判斷
而 3.x 的項目中就不須要寫 switch...case 了
直接在根目錄下建立以 .env 爲前綴的文件
這裏的 .env 文件保存的是公用參數，能夠在全部模式中獲取到
而其餘文件中的參數，只能在對應模式中獲取到
好比 .env.development 中的參數，就只有在 development 模式下生效
而後在文件內添加對應的鍵值對
而後在 package.json 的 scripts 命令中添加對應的 mode
// serve、bulid 都有默認的模式，但最好是將模式顯式的展示在配置項中
而後就能在項目中獲取到對應模式下的值
關於環境變量和模式的詳情，能夠參考官方文檔