菜蟲學習筆記：Vue Cli 環境建置

發表於 | 更新於 | In | 0 comments |
文章字數 : 731 | 所需閱讀時間 ≈ 3 分鐘

這裡要記錄的是Vue Cli的建置，透過Vue Cli來建構專案。
簡單來說它是 Vue.js 官方提供的開發工具，可用於快速開發大型單頁應用程式 (SPA)，更具體來說像是前端在開發時，常會搭配一些前端管理工具 (Gulp、Webpack…) 來處理瑣碎又重複性的工作，但往往需要大量時間去自行配置開發環境，而 Vue-cli 就像開發懶人包，可透過指令快速地建立一個立即可用的 Vue 開發環境。

前置作業

安裝Node.js

  1. 到 Node.js網站下載安裝Node.js，這邊使用的是LTS

  2. 安裝gulp環境，開啟終端機(命令提示字元)

    • 全域環境：
      使用npm套件，輸入 npm install gulp -g 安裝gulp
    • Local端安裝
      輸入 npm install gulp
    • 輸入node -v，會顯示目前安裝node.js的版本
    • 輸入 npm -v 可查看目前npm安裝的版本

Vue Cli 建置

1. 安裝 Vue Cli 套件

Vue cli 的名稱由 vue-cli 改成了 @vue/cli。
如果先前已經安裝舊版本的 vue cli(1.x 或 2.x)，需先使用 npm uninstall vue-cli -g 解除安裝。

1
2
$ npm install -g vue-cli   //vue-cli 2.xx
$ npm install -g @vue/cli  //vue-cli 3.xx or 4.xx

Vue Cli需要 Node.js 8.9 以上的版本(官方推薦 8.11.0+)。

可參考 Vue Cli 3.x 或 Vue Cli 2.x，目前Cli版本已經到4.3.0，使用 @vue/cli會直接安裝最新版本。

安裝完成後，輸入vue，會顯示可輸入的指令。

2. 建立Vue專案

輸入vue list，會抓取可使用的樣板
目前 Vue Cli 提供了六種基本樣板，如下：

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • pwa
  • simple

1.使用方式：

1
2
vue init <template-name> <project-name>  //vue cli 2
vue create <project-name>  // vue cli 3

Ex：vue init webpack(樣板名稱) vuewebpack(專案名稱)

2.輸入完後，會詢問問題(若要使用預設答案，按Enter即可)，可依個人需求做調整。

1
2
3
4
5
6
7
8
9
10
Project name：專案名稱
Project description：專案描述
Author：作者名稱
Vue build：Runtime + Compiler 及 Runtime-only 兩種  // 這邊建議使用預設的Runtime
Install vue-router：是否安裝 vue-router
Use ESLint to lint your code：是否使用 ESLint 來規範程式碼
Pick an ESLint preset：Standard、Airbnb 及 none 三種
Set up unit tests：是否加入單元測試
Setup e2e tests with Nightwatch：是否加入 e2e 測試
Should we run `npm install` for you after the project has been created：完成後是否自動執行 npm install

3.執行專案

1
2
3
$ npm run dev // vue-cli 2.xx
$ npm run serve // vue-cli 3.xx
$ npm run build // 生成 dist 資料夾 vue-cli 2 and 3 皆可使用

4.Vue Cli 3 GUI管理介面
在終端機內，輸入vue ui，可開啟瀏覽器管理介面，這邊建立專案的流程和使用終端機相同，就不再多做贅述了。