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呢?








你可能感興趣的文章

渲染 & 爬蟲

渲染 & 爬蟲

從找房子理解 ETL scheduling

從找房子理解 ETL scheduling

[28] 文法 - 述句完成值、運算式副作用、區塊

[28] 文法 - 述句完成值、運算式副作用、區塊






留言討論