LOGO

MIS 腳印

記錄 IT 學習的軌跡

Vue CLI 3 安裝與使用教學

Vue CLI 3 能夠快速建立 Vue.js 的專案項目環境,並提供開發階段便利的運行環境 (代碼修改,瀏覽器均會自動同步更新),以及可使用 vue.config.js 變更 Vue CLI 3 的預設行為,到最終上線階段的發佈。

Vue.js

安裝

必須使用選項 -g 全域方式安裝:

[root@localhost ~]# npm install -g @vue/cli

# ... 以上省略 ...

+ @vue/cli@3.4.0
added 667 packages in 82.173s

查看安裝版本:

[root@localhost ~]# vue --version
3.4.0

建立 Vue.js 專案項目

Vue CLI 3 提供兩種方式來建立 Vue.js 專案項目。

文字模式

建立一個自訂名稱為 hello-world 的專案項目:

[root@localhost ~]# vue create hello-world
Vue 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 協助讓你寫的程式符合規範的輔助工具,區分嚴謹程度
? 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

進入專案項目:

[root@localhost ~]# cd hello-world/

運行環境 IP 預設為 0.0.0.0 (就是 localhost),如果不是直接操作伺服器,必須要更改為外部 IP 才能訪問,編輯 package.json “scripts” 內 “server” 的值 ,並使用選項 –host 來指定 IP:

也可使用 vue.config.js 配置檔案的方式,可參考設定運行環境 IP
[root@localhost hello-world]# vim package.json

# ... 以上省略 ...

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

# ... 以下省略 ...

運行專案項目:

[root@localhost hello-world]# 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.

開啟瀏覽器訪問:

所有代碼的修改,瀏覽器均會自動同步更新
npm run serve 運行項目結果

介面模式

運行環境 IP 預設為 0.0.0.0 (就是 localhost),如果不是直接操作伺服器,必須要更改為外部 IP 才能訪問。查看 vue ui 指令更改 IP 的選項:

[root@localhost ~]# vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -H, --host   Host used for the UI server (default: localhost)
  -p, --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:

[root@localhost ~]# vue ui --host 192.168.0.112
   Starting GUI...
   Ready on http://192.168.0.112:8001

於瀏覽器開啟上述 IP,並建立專案項目:

建立專案項目
設定專案項目名稱
產生專案項目

安裝中觀察終端機,會發現在執行建立項目的許多指令:

安裝 Vue CLI 插件中

運行專案項目:

所有代碼的修改,瀏覽器均會自動同步更新
運行專案項目

運行專案項目錯誤

執行 npm run serve 指令運行專案項目,出現 “ERROR Error: custom keyword definition is invalid: data.errors should be boolean” 的排除方式。移除 ajv 並重新安裝即可:

[root@localhost ~]# npm uninstall ajv
[root@localhost ~]# npm install ajv@6.8.1

vue.config.js 配置檔案

vue.config.js 是一個可選的配置檔案 (必須自行新增),如果專案項目的根目錄中 (和 package.json 同層目錄) 存在該檔案,那麼它會自動被 @vue/cli-service 加載,也就是能改變 Vue CLI 的預設行為。

設定運行環境 IP

運行的環境 IP 預設為 0.0.0.0 (就是 localhost),如果不是直接操作伺服器,必須要更改為外部 IP 才能訪問,可如下指定 IP:Port 或網址:

[root@localhost hello-world]# vim vue.config.js
module.exports = {
    devServer: {
        public: '192.168.0.112:8080'
    }
}

設定發佈的資源路徑

發佈的程式如果要在瀏覽器使用本地端 file:// 的方式訪問,必須將資源 (CSS 的 <link> 和 JavaScript 的 <script>) 預設的絕對路徑 / 改為相對路徑 ./ 的方式:

[root@localhost hello-world]# vim vue.config.js
module.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:// 的方式訪問,必須進行額外設定,可參考設定發佈的資源路徑
[root@localhost hello-world]# 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

參考


發表迴響