Vite系列#安裝vite＆在 Composition API 及 Options API 進行切換

安裝vite以及環境介紹

• ＃0-到vite官網中的guide中，運用npm安裝vite
  • 先利用nvm將node更新
  • 再安裝最新的vite(下圖中當我們輸入npm run install時，代表我們要求照專案中附設的package.json中的套件一一安裝，專案資料夾就會出現node_modules)
    
  • 開啟終端機
  • 那我們要怎麼運行vite呢？
  • 打開你的package.json中觀看scripts腳本這裡：
  • 在你的終端機中輸入npm run dev 按下去後就會把vite開發環境開啟了（複製終端機的網址的打開網頁）
    
  • 接下來認識當前專案資料夾的結構
    • 
    • 
    • 
    • 注意必須在main.js中script標籤中加入type="module"屬性才能在該檔案中使用es module 中import檔案的方式
    • 
    • 這就是vite運作的方式
      ## 在 Composition API 及 Options API 進行切換
• 在進入vite之後，在每個.vue檔案都相當於一個元件
  
• 我們要習慣多檔案的開發形式（拆分）
• 打開app.vue會發現setup的屬性 這是composition API
  
• 現在我們將composition api改寫為option api
  
• 再來我們改寫HelloWorld.vue元件為option api
  • 原來是這樣寫：
    
  • 改寫成option api寫法
    
    
  • 我們透過props把msg資料傳入
    

那我們如何在vite專案中新增一個元件？

• 在components資料夾下新增一個元件檔案，命名規則是大駝峰寫法也就是運用兩個單字方式來建立元件名：CardComponent.vue
• 裡頭呢寫入template標籤並寫入一個div標籤
  
  
• 如何寫入js呢？