---
# System prepended metadata

title: 'vue-1 : 觀察並說明元件的引入, 環境架設'
tags: [vue]

---

###### 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 &nbsp; &nbsp;套件 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 管理
  
  可以下載JQ等額外套件使用
  以往都是用CDN的方式連接這些外部功能
  而使用CDN是有風險的
  如 : 無網路環境, CDN伺服器掛了, CDN位址變動...等
  
- NVM / 版本管理:
  Node Version Manager 
  Node &nbsp; &nbsp;版本 &nbsp; &nbsp; 管理
  
  是用來管理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+左鍵, 會開啟網頁顯示如下,即成功
   ![](https://i.imgur.com/6mUJ1lN.png)
   
# vue 解析 模組化 
  模組化重點 : 和其他模組做溝通

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

- 觀察vue語法 : 
   ![](https://i.imgur.com/zdIyH0b.png)
1. 可以看到開頭 < script setup >
   比一般的script多了一個setup , 用於宣告啟用vue語法中script的開頭
   而再vue語法的script裡
   可以寫入import
   
2. import 格式為:
   import 自定義檔名 from '實際檔案路徑'
   如:
   ![](https://i.imgur.com/2Ha9Eki.png)
   類似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裡的物件
   ![](https://i.imgur.com/WumO02Y.png)
   msg的內容為 Vite + Vue
   
5.  在往下看到 < style scoped >
    scoped == 這裡的CSS只會影響當下這頁, 不影響其他內容
    *優點:
     大型專案 不須與團隊討論class的命名, 
     每個字段 內容 都可以自行命名 不用擔心與他人的命名衝突
    

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

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

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

   - 當要寫上引入的內容時 再template內寫上要引入的設定好的檔名
     並在該檔名內 附加上再components/檔案裡設定好的 定義資料型態
     ![](https://i.imgur.com/Zg6W22p.png)
     這樣網頁才會知道內容vite + Vue要以字串型態呈現

   --------------------------------------------------------
  透過標籤屬性把值傳進去
  這裡的defineProps 就是溝通的橋樑, 裡面就是要傳值溝通的內容
  ![](https://i.imgur.com/VuzMcjp.png)
  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>

![](https://i.imgur.com/w5aRQSO.png)










