Vue 爬坑之路（十二）—— vue-cli 3.x 搭建項目

本文轉載自查看原文 2018-10-03 17:55 33148 vue-cli/ Vue/ vue/ npm/ javascript

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: 8080, // 服務端口
    https: false, hotOnly: false, proxy: null, // 設置代理
    before: app => {} }, }