一、開發環境

(一) 安裝配置 Node.js

1、下載安裝 Node.js

下載地址：https://nodejs.org/zh-cn/

檔名：node-v16.13.1-x64.msi

2、檢測 PATH 環境變數

點選 開始 => 執行 => "cmd"

執行 "path" ，確認輸出結果中包含：C:\Program Files\nodejs\

3、檢查 Node.js 版本

執行 "node --version" ，確認輸出結果：v16.13.0

(二) 安裝配置 Visual Studio Code

1、下載 Visual Studio Code

下載地址：https://code.visualstudio.com/

檔名：VSCodeUserSetup-x64-1.63.0

2、安裝 Visual Studio Code

在安裝過程中，勾選 "新增到PATH"

3、配置語言

開啟外掛面板，搜尋 Chinese ，安裝 Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code

4、安裝外掛

依次安裝外掛：HTML CSS Support 、ESLint 、Vetur 、vue-helper

二、工作區

(一) 新建工作區

在 D盤 中新建資料夾：Study

在 Visual Studio Code 中點選 檔案 => 開啟資料夾 ，選中 Study

在 Visual Studio Code 中點選 檔案 => 將工作區另存為 ，輸入檔名 Study.code-workspace 後 儲存

(二) 關閉工作區

在 Visual Studio Code 中點選 檔案 => 關閉工作區

(三) 開啟終端

在 Visual Studio Code 中點選 檢視 => 終端

三、新建專案

(一) 安裝 vue

依次執行以下命令：

npm install [email protected] ：安裝 vue 3.0

npm install @vue/cli ：安裝 vue 客戶端工具

vue --version ：檢視 vue 客戶端工具 版本號

vue upgrade --next ：更新 vue 客戶端工具 到最新版本

npm install @vue/cli-init ：安裝 vue 初始化專案 工具

(二) 建立專案

執行以下命令：

vue init webpack runoob-vue3

之後需要進行一些配置，預設回車即可，直到出現：

vue-cli · Generated "runoob-vue3".

進入專案：

cd runoob-vue3

執行專案：

npm run dev

(三) 專案打包

執行以下命令：

npm run build

執行完成後，會在 Vue 專案下生成一個 dist 目錄，該目錄一般包含 index.html 檔案及 static 目錄，static 目錄包含了靜態檔案 js 、css 以及圖片目錄 images（如果有圖片的話）

四、元件

(一) 根標籤

所有元件由 template 、script 、style 三個標籤組成

template 標籤內必須且只能有一個子標籤

script 標籤使用規範：

export default {
  name: 'pageName',
  data () {           // 存放檢視資料
    return {
      num: 1,
      str: 'abc'
     }
   },
  methods: {          // 宣告檢視函式
    btnClick () {
     this.num++
     }
   }
}