vite系列#vite與Pinia整合範例


整合之前練習的Pinia購物車作業

  • 打開pini購物車專案,我們練習從作業中的完成品進行轉移

vite專案安裝sass

  • 首先目前的前一個vit專案還沒有安裝sass,我們要先在vite專案中安裝sass才能和pini購物車專案長一樣
    • 進入vite文件輸入sass查找資料
    • 在vite專案下輸入指令npm add -D sass(須先切換)nvm use v18 node最新穩定版
    • 安裝好回到App.vue(以下是文字顏色是測試練習)
    • 文字顏色變成紅色測試成功

vite專案安裝bootstrap

  • 繼續npm i bootstrap載入bootstrap 再重新啟用npm run dev

    • 接下來到vite專案中的src資料夾中新增all.scss檔案
    • 到bootstrap官網中的customize中的sass的import方式
      • 複製程式碼 放在all.scss檔案中調整一下路徑,不需要進入../node/modules
      • 以下bootstrap路徑不需要加斜線
      • 回到app.vue 在style引入scss
  • 回到main.js註解掉原本載入的css因為已經載入bs

    • 回到bs5的網站中測試拿一個按鈕元件貼在app.vue中,先把templat內容清掉,貼上一個按鈕元件/script中多的程式碼也可以先清掉等一下做設定

  • 以上代表bs5已有正確套用

重頭戲:把Pinia專案的元件一個一個貼過來vite專案中

  • 在pinia專案中我們主要把購物車都放在layout.html中,因此可以把layout.html想成是vite專案中的app.vue,我們一個一個把pinia專案的元件貼到vite專案中

  • navbar部分開始:

    • pinia/testComponents/NavbarComponent
    • vue-vite/src/assets/compontnts ->新增NavbarComponent.vue檔案並在裡面加入template的區塊標簽,把pinia中的template區塊貼上來
      • 接下來繼續把pinia/testComponents/NavbarComponent的export整個區塊貼在vue-vite/src/assets/compontnts ->新增NavbarComponent.vue的script標籤區塊內
        • 會發現錯誤是因為先前的pinia是有cdn的方式做載入,但在vite中是由import的方式做載入import { mapState } from "pinia";
      • vite的stores是複數 pinia專案中是單數記得要改回成複數,然後把pinia store中的cartStore.js檔案複製過來

    • 回到app.vue將navbar元件貼上,並做一些程式碼修改畫面就出現了


  • 產品列表的部分:







你可能感興趣的文章

Day 143

Day 143

同步 Sync 與非同步 Async

同步 Sync 與非同步 Async

使用上聯想語法

使用上聯想語法






留言討論