###### tags: `Vue`

# Vue-Cli 專案建立

# 0. 大綱

本章節將一步一步從安裝npm到架設vue-cli專案，並加入第三方的套件。

# 1. 安裝npm&node.js

## 1.1 npm是什麼?

- npm : 全名為node package manager，用於管理套件的軟體，主要都是透過cmd指令來執行。
- node.js : 基於V8引擎，使js能在伺服器上執行。主要是因為安裝時會附帶npm。

[下載 | Node.js](https://nodejs.org/zh-tw/download/)

- 安裝完node.js，其附帶的npm也就安裝完成了。接下來便可以試著在cmd上打指令。

>💡 `npm -v`

- 如果得到以下畫面，便代表npm已安裝成功了。


>`g` : 全域安裝，使其他專案也可使用此套件。

# 2. 架設Vue-Cli專案
## 安裝Vue
`npm i -g @vue/cli`

## 2.1 使用指令建立專案

1. 在你想要建立專案的地方開啟cmd。
2. 輸入指令:`vue create [project_name]`，project_name填入你所要的專案名稱。以我為例，專案名稱命名為test-vue，然後就會在該路徑底下建立專案的資料夾。
1. 選擇第一個選項，Vue 3。若要自定義選項(ex:router)，可選第三個選項。


2. 等他建立完成，要一段時間。成功會看到此畫面


3. 成功建立專案後，輸入`cd [your_project_name]`，進入你剛建立的專案的資料夾。
4. 輸入`npm run serve` ，便可以啟動專案


5. 進入到網址[localhost:8080](http://localhost:8080/)，看到下方的畫面表示一個基礎的專案已建立成功。


## 2.2. 使用Vue UI建立專案

- 上個小節，我們使用指令建立專案，可能有些人會覺得打指令很麻煩。沒關係，我們可以使用Vue UI來建立專案。
1. 首先，進入任意的cmd打指令`vue ui`來啟動UI。成功啟動預設會自己開啟瀏覽器。



2. 按下選項”新增”，並選擇要建立的專案位置，按下”在此新增新專案”。輸入專案名，選擇”包管理器”=npm，因為我們使用的是npm。


3. 選擇模板，跟前一小節一樣，選第一個，Vue 3，並按下”新增專案”，即會開始建立專案。



4. 建立成功後會看到此畫面。按下左方的”任務。進入後按下serve的執行。



5. 看到綠色勾勾後，就代表專案已成功啟動。按下”啟動APP”即可開啟網頁。



# 3. 使用VSCode來寫Vue

並沒有一定要用vscode才能寫vue，只是我也想不到還有誰能用。

## 3.1. VSCode的延伸模組

- 延伸模組
1. ****Vue Language Features (Volar) :**** 將vue語法highlight，不然全是一樣的顏色。

[Vue Language Features (Volar) - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

2. ****Chinese (Traditional) Language Pack for Visual Studio Code**** : 就vscode漢化。

[Chinese (Traditional) Language Pack for Visual Studio Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)

3. ****Auto Rename Tag :**** 好用於開發html，修改tag時會前後都修改。

[Auto Rename Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

4. ****Bracket Pair Colorization Toggler :**** 使括號有不同顏色，對眼睛較好。

[Bracket Pair Colorization Toggler - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)

5. ****Code Spell Checker :**** 檢查程式碼有無拼對，解決變數或函式因為拼錯而報錯的問題。

[Code Spell Checker - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

6. ****indent-rainbow :**** 使空行有顏色，對眼睛很好。

[indent-rainbow - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

7. ****npm Intellisense :**** js的intellisense，且可套用從npm install的套件。

[npm Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

## 3.2. Vue-Cli專案中各項文件的功能


- node_modules : 此資料夾放的是該專案所使用的套件，沒事不要亂開，你會後悔。
- public : 此資料夾放的是公共資源，不會經過編譯。
- src : 此資料夾放的是指程式碼
- assets : 此資料夾放的是靜態資源，ex:css、image等，會經過編譯。
- components : 此資料夾放的是Vue元件。
- App.vue : 主元件。
- main.js : 創建並載入整個Vue實體，會載入整個專案所使用的js檔。使用套件大多是在此import
- package.json : 紀錄專案的相依性、版本、執行腳本等。
- vue.config.js : 設定此專案的vue配置，webpack的配置也在此設定。

## 3.3. 概念圖


# 4. 安裝套件

- 此小節將以ElementPlus的套件，來實作如何新增套件並使用。
- 並不建議使用vue ui來新增套件，因為其支援數量沒有比npm還多。

## 4.1. 在main.js將套件全部載入

1. 在該專案的根目錄開啟cmd，並執行`npm install element-plus --save`來安裝elementPlus套件。安裝成功，會在package.json裡看到“dependencies”裡多了”element-plus”:


2. 進入到main.js裡，新增程式碼來import套件。


3. 在jsconfig.js中新增`"types": ["element-plus/global"]`。新增此程式碼來使套件的元件也會有元件的顏色。


4. 在App.vue裡新增一個按鈕，`<el-button>button</el-button>`，並儲存。vue-cli有熱重載，會直接更新網頁。成功的話，會看到以下畫面:


# 5. 打包

目前vue打包有兩種工具，vite與webpack。而vue-cli已內建webpack。

## 5.1. 用指令打包

1. 在cmd中輸入指令`npm run build`，來打包專案。打包完的檔案會出現在dist資料夾中。成功的畫面如下:


## 5.2. 用Vue UI打包

1. 進入[Vue UI](http://localhost:8000/)控制台，並按下任務，執行build。


2. 看到綠色勾勾，表示打包成功


## 5.3. 執行打包完的檔案

- 在執行前，還需要安裝一個套件，[serve](https://www.npmjs.com/package/serve)，安裝完才能使用`serve`指令去啟動打包完的專案。

>💡 `npm install serve`

1. 進入dist資料夾中，開啟cmd並執行指令`serve`，執行成功會出現:


2. 進入[localhost:3000](http://localhost:3000/)，成功會出現:


# 6. 設置應對不同模式的.env檔

在vue-cli中，執行`npm run serve`時，預設都是development模式，你也可以指定其他模式，輸入`npm run serve --mode=production` ，來執行production模式。當你想要dev與prod之間在執行的時候有些許不同，ex : api的位址，這時就可以設定.env檔來實現。通常是放在根目錄。

- .env : 預設是mode=production，如果不需要則不要配置此文件。
- .env.development : 對應mode = development。
- .env.production : 對應mode = production。


- .env檔的格式固定為`<key> = <value>`， 且若要在程式碼裡面讀取，則前面皆須加上”VUE_APP”，ex : “VUE_APP_VARIABLE”。
- .env本質上就是專門存放全域變數的文件。
- 若要在程式碼中使用.env檔裡的變數，則使用`process.env`，像是:


# 7. 參考資料

[【D4 - npm 你到底是誰】大家都叫我npm install!! 但這甚麼意思 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10234060)

[Vue CLI](https://cli.vuejs.org/#getting-started)

[建立第一個 Vue 元件 - 學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)

[A Vue 3 UI Framework | Element Plus](https://element-plus.org/en-US/)

[Webpack 前端打包工具 - 使用 vue-loader 手動建置出 Vue CLI 環境](https://awdr74100.github.io/2020-04-13-webpack-vueloader/)

[Configuration | webpack](https://webpack.js.org/concepts/configuration/)

[1-1 Vue.js 簡介 | 重新認識 Vue.js | Kuro Hsu](https://book.vue.tw/CH1/1-1-introduction.html)

[vue.config.js 的完整配置（超详细）！](https://juejin.cn/post/6886698055685373965#heading-27)

[process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署_pulledup的博客-CSDN博客](https://blog.csdn.net/pulledup/article/details/127347042)

# 8. 下載資源

[vue-cli-element-plus.rar](https://drive.google.com/file/d/1Ihrw8jDmg5zEnICaTzeG1I7GDwDrZgwr/view?usp=drivesdk)

[](http://192.168.3.15/leo.chang/vue-original-project)