vite創建vue3+ts+ant design vue項目

一. 通過vite命令構建vue3+ ts

vite官網

npm init @vitejs/app
 
or
 yarn create @vitejs/app

通過附加命令指定項目名稱和指定模板

生成的文件結構
在src內添加route store views 文件夾

二.安裝其他插件

ant-design-vue vuex vue-router 等

1. ant-design-vue

// 選擇最新版本  2+
 npm i --save ant-design-vue@next  

2.vuex

npm install vuex@next -S  

3. 安裝vue-router

npm i vue-router@next -S 

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")  //  __dirname 和 path 顯示紅色的波浪線需要安裝插件npm i @types/node -S 
    }
  }
})

main.ts中掛載 vuex和route

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
createApp(App).use(router).use(store).mount('#app')

router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import Test from '@/views/test.vue'
import Index from '@/views/index.vue'
// 路由信息
const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "/test",
    name: "test",
    component: Test,
  },
];

// 導出路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

store/index.ts

import { createStore } from 'vuex'

// 獲取modules文件夾下所有ts文件
const files: any = import.meta.globEager("./modules/*.ts")
let modules: any = {}
Object.keys(files).forEach((key) => {
  // 將獲取到結果按照 key:value 的形式存放到modules對象中
  modules[key.replace(/(\.\/|\modules\/|\.ts)/g, '')] = files[key].default
})
console.log('模塊',modules)
export default createStore({
  modules
})

編譯啟動

...未完待續（后續研究增加vue-class-component）