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）