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元件貼上，並做一些程式碼修改畫面就出現了
    
    
    

• 產品列表的部分：