Je code donc je suis là.

0%

VueJs Vue Cli 3 environment deployment 開發部署

Posted on Edited on In

大部分的許多專案的開發，都是偏向 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
如果連npm和yarn都跑不起來，表示你的電腦上沒安裝管理套件工具，請先去npm和yarn的官方網站看看怎麼安裝囉。

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 會經由 webpack 構建處理，使用相對路徑指定的檔案，如 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