###### tags: `vue`
DAY1-22.9.5
# vue-1 : 觀察並說明元件的引入, 環境架設
# Node.js / NPM / Vite 環境架設

# node.js 環境架設
https://nodejs.org/en/
選擇安裝的版本需求 -> 命令提示字元 -> 輸入:node -v 或 npm -v
跳出目前版本為... 為安裝成功 否則重啟電腦

LTS == 長期維護版本
Current == 開發中版本

----------------------------------------------------------

- 補充 :
node.js是一個server端後端軟體
這裡裝node.js為了其附加的NPM功能

- NPM / 套件管理:
Node package management
Node    套件           管理

可以下載JQ等額外套件使用
以往都是用CDN的方式連接這些外部功能
而使用CDN是有風險的
如 : 無網路環境, CDN伺服器掛了, CDN位址變動...等

- NVM / 版本管理:
Node Version Manager
Node    版本     管理

是用來管理Node.js版本的工具
因為Node版本更新速度很快
可能在開發階段又更新了
所以開發者需要做版本的切換
切回使用時的版本
而使用NVM, 可以快速做到版本的切換

- NPM是 "套件管理程式" 的其中一種 :
將套件程式集中存放的集中型伺服器

如同PHP上 使用Composer , 再從Composer上載入套件 ,
Node.js 使用 NPM 下載套件 ,
Windows上的 程式管理員內容 或 Microsoft Store ,
手機上存放著大量APP的 App Store等...

# Vite 包版工具的專案環境架設
https://vitejs.dev/
vite包含Live server功能...等

* 補充_專案底下的內容 :
package.json == 紀錄該專案用了哪些套件
package.lock.json == package.json裡要用的套件 需要安裝哪些東西
.vscode / extensions.json == vscode再該專案下 安裝哪些外掛的紀錄
node_modules == 實際使用的套件內容等, 勿上傳 超大, 會被github網站ben掉
vite.config.js == 定義外掛程式, 其設定檔的位置

- 安裝 :
1~7步驟皆在命令提示字元輸入

1. 開啟命令提示字元 -> 輸入 E:
會到達指定位置E槽下

2. 官網 -> Get Started -> 複製 With NPM: 底下的
<pre>npm create vite@latest</pre>
貼到命令提示字元

3. 輸入建立的自定義專案名稱:vue
4. 選擇套件 : vue
5. 選擇版本 : vue
6. 輸入 : cd vue
7. 輸入 : npm install
此時專案底下會多一個node_modules的file
8. 在專案開啟vscode, 輸入 : npm run dev
此時會顯示本地網址http://127.0.0.1... , Ctrl+左鍵, 會開啟網頁顯示如下,即成功

# vue 解析 模組化
模組化重點 : 和其他模組做溝通

在src的file內有一個預設的首頁 叫App.vue
這裡是用來寫如何呈現在網頁上的內容

- 觀察vue語法 :
1. 可以看到開頭 < script setup >
比一般的script多了一個setup , 用於宣告啟用vue語法中script的開頭
而再vue語法的script裡
可以寫入import

2. import 格式為:
import 自定義檔名 from '實際檔案路徑'
如:
類似link, 用於引入指定的內容設定

import == 解構函式??

3. template標籤 為:
呈現網頁內容的區域, 類似html的body
可以再此例中template最後包覆的
<pre><HelloWorld msg="Vite + Vue" /></pre>
看到再顯示頁面中引入了該內容

4. 通過觀察上述的
<pre><HelloWorld msg="Vite + Vue" /></pre>
可以發現 HelloWorld 是src/components/HelloWorld.vue
而 msg 是src/components/HelloWorld.vue裡寫在import裡的物件
msg的內容為 Vite + Vue

5. 在往下看到 < style scoped >
scoped == 這裡的CSS只會影響當下這頁, 不影響其他內容
*優點:
大型專案 不須與團隊討論class的命名,
每個字段 內容 都可以自行命名 不用擔心與他人的命名衝突

6. 綜合上述1~4點 得知 :
- 再src/App.vue 顯示網頁畫面內容

- 其內容可以拆分出個別的元件 個別將設定寫在src/components內

- 當需要引入拆分在別處的元件時要再script setup內 用import來做引入link

- 當要寫上引入的內容時 再template內寫上要引入的設定好的檔名
並在該檔名內 附加上再components/檔案裡設定好的 定義資料型態
這樣網頁才會知道內容vite + Vue要以字串型態呈現

--------------------------------------------------------
透過標籤屬性把值傳進去
這裡的defineProps 就是溝通的橋樑, 裡面就是要傳值溝通的內容
msg : String == 定義的東西名稱 與 資料型態

components/HelloWorld.vue 下方h1的內容
用兩個大框號 {{}}放入經過frfineProps 設定好的資料型態名稱msg

< h1>資料型態 : 字串< /h1>

frfineProps==定義屬性,參數
格式:
defineProps=({}) 是一個物件

僅載入必要的小函式
不會全部載入
server開發 client觀看 用client端角度看待 是否資料過大 下載過久

引到畫面使用時 不可用html5的保留字
已棄用的標籤可以被使用 如marquee...等
Header不能用, 但改成Headervue就可以使用

components==該資料夾為 最小單位的東西
東西寫在裡面就可以個別設定其CSS
在往外丟到要呈現的頁面上

# 定義行為
<button type="button" @click="count++">count is {{ count }}</button>