1.通過vite 腳手架

npm init vite hello-vue3 -- --template vue

2.按裝依賴，啟動專案

npm i

npm run dev

3.修改vite配置檔案

找到vite.confing.ts 並新增

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    }
  },
  plugins: [vue()],
  base: './', // 打包路徑
  server: {
    port: 3000, // 服務埠號
    open: true, // 服務啟動時是否自動開啟瀏覽器
    cors: true // 允許跨域
  }
})
注：這塊會有找不到path 的問題，我們需要先安裝型別宣告檔案
npm install --save-dev @types/node
 

4.新增路由

安裝npm i vue-router@4

建立src/router/index.ts檔案

　main.ts 檔案中掛載

import router from './router/index'
createApp(App).use(router).mount('#app')；

5.新增vuex

安裝npm i vuex@next

建立src/store/index.ts檔案

　main.ts 檔案中掛載

import storefrom './store'
createApp(App).use(store).mount('#app')；
用法：

import { useStore } from 'vuex';
const store = useStore();
console.log(store.state);


更新中。。。。。。。。