Vue CLI 3 安裝與使用教學
Vue CLI 3 能夠快速建立 Vue.js 的專案項目環境，並提供開發階段便利的運行環境 (代碼修改，瀏覽器均會自動同步更新)，以及可使用 vue.config.js 變更 Vue CLI 3 的預設行為，到最終上線階段的發佈。
Node.js 版本要求
Vue CLI 需要 Node.js v8.9 以上的版本 (可參考 Node.js 安裝 for CentOS 7)。
你可以使用 nvm 在一台電腦中管理多個不同 Node.js 版本 (可參考使用 NVM 對 Node.js 進行版本管理 for CentOS 7)。
Vue CLI 需要 Node.js v8.9 以上的版本 (可參考 Node.js 安裝 for CentOS 7)。
你可以使用 nvm 在一台電腦中管理多個不同 Node.js 版本 (可參考使用 NVM 對 Node.js 進行版本管理 for CentOS 7)。
安裝
必須使用選項 -g 全域方式安裝：
npm install -g @vue/cli# ... 以上省略 ...
+ @vue/cli@3.4.0
added 667 packages in 82.173s
查看安裝版本：
vue --version
3.4.0建立 Vue.js 專案項目
Vue CLI 3 提供兩種方式來建立 Vue.js 專案項目。
文字模式
建立一個自訂名稱為 hello-world 的專案項目：
vue create hello-worldVue CLI v3.4.0 # 選取要 preset (預先裝置) 的特性，defaule 包含了基本的 Babel + ESLint preset，這裡選 Manually 來手動選取需要的特性 ? Please pick a preset: default (babel, eslint) ❯ Manually select features # 選取要安裝的特性 ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ❯◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # Vue Router 的 mode (模式) 使用 'history' (另一種 mode 為 'hash'，會在 URL 加上 '#' 符號) ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y # CSS 預處理器 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus # ESLint 協助讓你寫的程式符合規範的輔助工具，區分嚴謹程度 (npm run serve 常錯誤的話，建議可改選用 ESLint + Prettier) ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ❯ ESLint + Standard config ESLint + Prettier # 代碼檢查時機 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save # 存檔時 ◯ Lint and fix on commit (requires Git) # 提交更新時 # 在哪為特性進行配置 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json # 是否將上述配置儲存到 preset 的 default (就是一開始那) ? Save this as a preset for future projects? (y/N) N # ... 以上省略 ... (構建中) # 專案項目 'hello-world' 建立成功 Successfully created project hello-world. Get started with the following commands: # 執行這兩個指令，可以運行專案項目 $ cd hello-world $ npm run serve
進入專案項目：
cd hello-world/運行環境 IP 預設為 0.0.0.0 (就是 localhost)，如果不是直接操作伺服器，必須要更改為外部 IP 才能訪問，編輯 package.json "scripts" 內 "server" 的值 ，並使用選項 --host 來指定 IP：
也可使用 vue.config.js 配置檔案的方式，可參考設定運行環境 IP
vim package.json# ... 以上省略 ... "scripts": { "serve": "vue-cli-service serve --host 192.168.0.112", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, # ... 以下省略 ...
運行專案項目：
npm run serve
> hello-world@0.1.0 serve /root/hello-world
> vue-cli-service serve --host 192.168.0.112
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 11940ms 15:41:00
App running at:
- Local: http://192.168.0.112:8080/
- Network: http://192.168.0.112:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.開啟瀏覽器訪問：
所有代碼的修改，瀏覽器均會自動同步更新
介面模式
運行環境 IP 預設為 0.0.0.0 (就是 localhost)，如果不是直接操作伺服器，必須要更改為外部 IP 才能訪問。查看 vue ui 指令更改 IP 的選項：
vue ui -hUsage: ui [options]
start and open the vue-cli ui
Options:
-H, --host <host> Host used for the UI server (default: localhost)
-p, --port <port> Port used for the UI server (by default search for available port)
-D, --dev Run in dev mode
--quiet Don't output starting messages
--headless Don't open browser on start and output port
-h, --help output usage information
啟動 Vue CLI 介面，並設定訪問的 IP：
vue ui --host 192.168.0.112
Starting GUI...
Ready on http://192.168.0.112:8001於瀏覽器開啟上述 IP，並建立專案項目：
安裝中觀察終端機，會發現在執行建立項目的許多指令：
運行專案項目：
所有代碼的修改，瀏覽器均會自動同步更新
運行專案項目錯誤
執行 npm run serve 指令運行專案項目，出現的各種 Error 排除方式。
custom keyword definition is invalid
出現的錯誤訊息如下：
"ERROR Error: custom keyword definition is invalid: data.errors should be boolean"
移除 ajv 並重新安裝即可：
npm uninstall ajv
npm install ajv@6.8.1watch ENOSPC
出現的錯誤設息如下：
Error: watch /home/jacky/web-dev/semi-automatic/public ENOSPC
at FSWatcher.start (fs.js:1382:19)
at Object.fs.watch (fs.js:1408:11)
at createFsWatchInstance (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:38:15)
at setFsWatchListener (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:81:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:233:14)
at FSWatcher.NodeFsHandler._handleDir (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:429:19)
at FSWatcher.<anonymous> (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:477:19)
at FSWatcher.<anonymous> (/home/jacky/web-dev/semi-automatic/node_modules/chokidar/lib/nodefs-handler.js:482:16)
at FSReqWrap.oncomplete (fs.js:153:5)
調高 ENOSPC watch 的數值即可 (參考 Error: ENOSPC: System limit for number of file watchers reached · Issue #1 · LendisFabri/Vuena-Pet-Shop-System · GitHub)：
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -pvue.config.js 配置檔案
vue.config.js 是一個可選的配置檔案 (必須自行新增)，如果專案項目的根目錄中 (和 package.json 同層目錄) 存在該檔案，那麼它會自動被 @vue/cli-service 加載，也就是能改變 Vue CLI 的預設行為。
相關設定配置参考 | Vue CLI 3
設定運行環境 IP
運行的環境 IP 預設為 0.0.0.0 (就是 localhost)，如果不是直接操作伺服器，必須要更改為外部 IP 才能訪問，可如下指定 IP:Port 或網址：
vim vue.config.jsmodule.exports = {
devServer: {
public: '192.168.0.112:8080'
}
}
設定發佈的資源路徑
發佈的程式如果要在瀏覽器使用本地端 file:// 的方式訪問，必須將資源 (CSS 的 <link> 和 JavaScript 的 <script>) 預設的絕對路徑 / 改為相對路徑 ./ 的方式：
vim vue.config.jsmodule.exports = {
baseUrl: './'
}
檔案結構
hello-world/ # 專案目錄 │ ├── dist/ # 使用 npm run build 構建完成的檔案 │ ├── node_modules/ # 依賴的模組 │ ├── public/ # 公共資源檔案，不做任何編譯壓縮處理，使用絕對路徑指定的檔案 │ │ │ ├── favicon.ico # icon 圖片 │ └── index.html # 網站入口 │ ├── src/ # Vue 與前端的原始檔案 │ │ │ ├── assets/ # 公共資源檔案，與 public 不同的是，assets 會經由 webpacd 構建處理，使用相對路徑指定的檔案，如 LOGO 圖片 │ ├── components/ # Vue 公共組件 │ ├── views/ # Vue Router 頁面組件 │ ├── App.vue # 項目入口 │ ├── main.js # 項目的核心 │ ├── router.js # 路由設定 │ └── store.js # Vuex 狀態管理 │ └── package.json # 相當於對整個項目的解釋說明文件
發佈
執行發佈指令後，會將構建完成的檔案產生至專案項目下的 dist 目錄中，可將它們複製到網站伺服器的根目錄中即可：
發佈的程式如果要在瀏覽器使用本地端 file:// 的方式訪問，必須進行額外設定，可參考設定發佈的資源路徑
npm run build> hello-world@0.1.0 build /root/hello-world > vue-cli-service build ⠴ Building for production... DONE Compiled successfully in 28145ms 16:49:02 File Size Gzipped dist/js/chunk-vendors.3ef78f5a.js 115.88 KiB 40.35 KiB dist/js/app.02d4ba93.js 5.99 KiB 2.25 KiB dist/js/about.984e39bd.js 0.44 KiB 0.31 KiB dist/css/app.780d211b.css 0.42 KiB 0.26 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
其它
移除 port
使用 npm run serve 指令運行專案項目，會發現有時已經退出了，但 port 仍然被佔用的情況，這時就須手動殺掉。
查看目前所有使用的 port，可看到 8080、8081、8082 並沒有 PID 資訊，所以也就無法使用 kill 指令殺掉：
ss -ltnpState Recv-Q Send-Q Local Address:Port Peer Address:Port
LISTEN 0 128 0.0.0.0:22 0.0.0.0:*
LISTEN 0 128 127.0.0.1:34839 0.0.0.0:* users:(("node",pid=31400,fd=19))
LISTEN 0 128 0.0.0.0:8090 0.0.0.0:*
LISTEN 0 128 0.0.0.0:443 0.0.0.0:*
LISTEN 0 64 127.0.0.1:44483 0.0.0.0:* users:(("cockpit-bridge",pid=32530,fd=12))
LISTEN 0 128 127.0.0.1:6379 0.0.0.0:*
LISTEN 0 64 127.0.0.1:42637 0.0.0.0:*
LISTEN 0 128 127.0.0.1:44301 0.0.0.0:*
LISTEN 0 128 0.0.0.0:80 0.0.0.0:*
LISTEN 0 128 0.0.0.0:8080 0.0.0.0:*
LISTEN 0 128 0.0.0.0:8081 0.0.0.0:*
LISTEN 0 128 0.0.0.0:8082 0.0.0.0:*
沒有顯示 PID 的 port，可使用 npx 指令來殺掉：
npx kill-port 8080 8081 8082npx: 3 安裝成功，花費 1.475 秒 Process on port 8080 killed Process on port 8081 killed Process on port 8082 killed
參考
本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.
