Je code donc je suis là.

0%

VueJs Vue Cli 3 environment deployment 開發部署

大部分的許多專案的開發,都是偏向 Cli 環境部署的方式開發,也就是常聽到的「腳手架」的方式,但為什麼是「腳手架」?還是這也代表「起手式」?也就是專案在開發,應該就把要開發與運行的環境架設好,到時要打包輸出相容個瀏覽器的語法就會變得簡單多了。

雖然剛開始設定有點繁複,但只要習慣了、工具都齊了,這樣開發起來在測試也會順手許多,所以開發基本功還是要學起來。

實際上以 Cli 的方式部署,也有許多優點,因為他不只會幫你部署,還把整個專案需要用的檔案與資料夾都自動生成,讓你一安裝完就可以寫「Hello World」,當然這些自動生成的檔案我們也需要去了解其作用與規則,不然檔案放錯位置也是會產生錯誤的。

需注意的是,每一個 Cli 的版本都會不太ㄧ樣,所以安裝時的選項也會依版本而略有不同。

安裝後產生的檔案包也可以稱為「開發模板」我們可以在 vue-cli 的 github官網上找到文件。

Vue Cli 3 的開發環境部署步驟

1.先確認本機是否裝了 Vue 的 cli 套件

vue -- version 或是 vue -V(大寫的 V)

如果沒有,先以以下兩個方式一個選裝好 cli
npm install -g @vue/cli
npm install -g @vue/cli-service-global
或是yarn global add @vue/cli
如果連npmyarn都跑不起來,表示你的電腦上沒安裝管理套件工具,請先去npmyarn的官方網站看看怎麼安裝囉。

2.至想創建專案的位置,執行並給予專案名稱(小寫)

官網解說

vue create [ProjectName]

3.進入設置專案選項(一律以上下移動與按空白鍵選取選項)

這時即進入開發部署的選項區,最好先了解一下,各個選項的作用,當然之後也可以修改,但比較麻煩,所以如果可以還是先想好自己要的開發環境,以及需要什麼工具,一次就把它安裝好。

==選擇套件工具==

1
2
3
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) // 預設
Manually select features // 自選,有其他選項如sass

==進入選擇 list==
使用<space>選擇 | <a>全選或全不選 | <i> 相反,選了可取消

1
2
3
4
5
6
7
8
9
10
? Check the features needed for your project:
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors // 使用 sass
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

==進入各細項的選擇==
SASS

1
2
3
4
5
6
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supporte
d by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass) // Node
Less
Stylus

寫作風格與語法檢查

1
2
3
4
5
Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

何時檢查語法寫作風格

1
2
3
? Pick additional lint features:
❯◉ Lint on save // 儲存時檢查
◯ Lint and fix on commit // git commit 時檢查

要將這些套件的設定值放哪裡?

1
2
3
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json

要將這些預設值儲存起來以後用嗎?

1
? Save this as a preset for future projects? (y/N)

如果選 y 以後一開始的選項就可選擇。

4. 安裝完成啟動伺服器

1
2
3
4
5
6
7
8
9
10

⚓ Running completion hooks...

📄 Generating README.md...

🎉 Successfully created project test.
👉 Get started with the following commands:

$ cd test // 先進入專案檔案內
$ npm run serve // 啟動伺服器

啟動完畢會顯示本地和客戶端的位址:

1
2
3
4
5
6
7
8

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.53.40:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.
// 請注意,開發版本未進行優化。 要創建生產版本,請運行npm run build。

部署完成的檔案的結構

部署完成後,檔案的結構大致上長這樣,但會依安裝的套件不同而些許不ㄧ樣。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 (相當於對整個項目的解釋說明文件)

在現有的專案中安裝插件

使用 vue create 來創建一個新專案的時候,有些插件會根據你選擇的特性被預安裝好,如果想在一個已經被創建好的專案中安裝一個插件,可以使用。vue add 命令:
vue add @vue/eslint

其他指令

npm 快速安裝 bootstrap
npm install bootstrap --save

設定參考網站

MIS 腳印: Vue CLI 3 安裝與使用教學
使用 vue-cli 3 快速建立 Vue 專案及專案配置 Vue.config.js