# Vue 基本
### Terminal命令

npm init vue@latest ->創建Vue資料夾
npm install ->根據vue專案的需求安裝第三方套件
npm run dev ->執行/測試專案是否正常運行

### Vue專案結構
#### package.json基礎專案描述檔
專案名稱、專案版本、專案依賴哪些第三方套件
#### vite.config.js專案建置工具設定檔案
#### .vscode開發環境設定
#### node_modules第三方套件安裝設置
#### src主要的程式原始碼資料夾
#### public靜態檔案資料夾
#### dist專案建置後存放的位置

### 專案建置 - npm run build

- 可以用任何伺服器測試最後的結果
1. 打包原始碼程式(src)
2. 打包專案需要的靜態檔案(public)
3. 輸出建置後的檔案到特定資料夾(dist)

### 開發測試 - npm run dev
1. 啟用內建的測試用伺服器
2. 不輸出檔案，直接在記憶體中建置專案
3. 隨時反映原始碼的更新

### Vue App
代表一個以Vue開發的網頁應用
其中包含一到多個組件

1. 建立最基礎的HTML檔案index.html
2. . 建立一個根組件App.vue
3. 建立一個主程式檔案main.js
4. 在主程式main.js中建立Vue App:
(1)載入、設定根組件
(2)設定掛載的HTML標籤

### 建立Vue App
使用createApp函式
- 載入createApp函式
import{cresteApp}from"vue";
- 載入、設定根組件
import根組建名稱from"跟組建路徑"
const app=createApp(根組建名稱)；
- 設定掛載的html標籤
app.mount("CSS選擇器")

### 組建概念
將網頁的Html、Css、Javacript 包裹在一個vue程式檔案中

組建名稱.vue

<script setup>
 //Javacript 程式碼
</script> 
<template>
 <!--Html 樣板結構-->
</template>
<style scoped>
 /*CSS設定*/
</style>

範例

App.vue

<script setup>
 //Javacript程式碼
 console.log("我的首頁");
</script>
<template>
 <!--Html樣板結構-->
 <nav>
   網站導覽列
 </nav>
 <main>
  <div>網頁主區塊一</div>
  <div>網頁主區塊二</div>
 </main>
</template>
<style scoped>
 /*CSS設定*/
 nav{font-weight:bold}
</style>

### 開始專案
- 建立index.html
並在body裡設置最重要兩部分：
(1)在div裏掛載vue檔案，做法：id="app"(這樣寫代表掛載的檔案是app.vue)
(2)在script裏設置type="moudule" src="設置路徑"

- src資料夾裡，建立main.js
開始建立vue.app在這個主程式裡面
(1)載入 createApp 函式
`import {createApp} from "vue";`
(2)載入根組件
`import App from "./App.vue" `
(3)建立Vue.app物件
`const app=createApp(App);`
(4)掛載到Html標籤底下
`app.mount("#app");`