Vue3 全家桶實踐

Vue3 實踐

使用 vite 創建一個 Vue3 項目，並實踐 vue-router4、vuex4 結合 Composition API 的使用。

1. 使用 vite 創建 Vue3 項目

• 創建
  運行命令行 npm init vite-app vue3-demo 創建一個 vue3 應用

• 文件結構
  成功之後是這樣嬸兒的
  

• run 起來
  然後 cd vue3-demo -> npm install -> npm run dev 就跑起來了一個 vue3 應用

• vue3 API 的使用
  vue3 中暴露的 API 與 vue2 有不同，使用方式有一些區別
  

2. vue-router4 結合 Compostion API 使用實踐

vue-router4 API 相對於之前也有一些區別，使用方式也有不同。

• 安裝 npm i -S [email protected]
  

• 使用 vue-router
  

• 掛載到 vue 上
  

• 結合 Composition API 使用 vue-router

  • push
    
  • 當前路由
    
  • 當前路由的值
    

3. vuex4 結合 Compostion API 使用實踐

• 安裝 npm i [email protected] -S

• 使用 vuex

• 掛載到 vue 上

• 結合 Composition API 使用 vuex

參考

• vue-next
• vite
• vuex
• vue-router