前言

Vue CLI 是用來快速建置 Vue 開發環境的一套工具，它是由 Vue.js 團隊所建立的命令列工具。提供 vue 相關的命令執行，例如: vue create建立新專案、vue serve 即時顯示開發畫面、vue ui圖形化介面來管理專案。

Vue CLI是很多不同 Component 組合而成，例如: CLI service、CLI plugins、web UI

安裝

npm install -g @vue/cli
# 或
yarn global add @vue/cli

確認是否安裝成功

vue --version

建立專案

vue create my-project
# OR
vue ui

Vue CLI 版本升級

npm update -g @vue/cli

# 或
yarn global upgrade --latest @vue/cli

神奇指令?

打開 package.json 查查 Vue-CLI 幫我們建立的 script

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

當我們輸入 npm run serve 就會去找 script 中的 serve
而 vue-cli-service 對應到的是專案內中 ./node_modules/.bin/vue-cli-service

還可以看看 Vue-CLI 幫我們安裝的套件

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },

Vue CLI Service?

一個 run-time dependency，提供指令讓我們可以啟動 Vue 專案，例如serve、build、inspect

ex:

vue-cli-service serve
// 啟動一個server，能即時更新

vue-cli-service build
// 在dist/ 產生打包檔 (JS/CSS/HTML的壓縮檔)

vue-cli-service inspect
// 檢查 webpack 的設定

專案內容 ?

• public 包含 public 檔案，例如 index.html favicon.ico，任何靜態檔都可以放在這，不會經過 webpack 打包
• src 原始檔案，大部分開發都在這異動
• src/assets 專案的 assets，例如 logo
• src/components 放置 Vue 元件
• src/App.vue 主要的元件
• src/main.js 應用程式的啟動檔案
• babel.config.js Babel 設定檔
• package.json 專案相依套件，ESLint、PostCSS 等相關設定
• node_modules 所有已安裝的套件

參考

A Beginner’s Guide to Vue CLI

下篇預告

• Vue Router

每日一句:
學一次，用一輩子