vite创建vue3+ts+ant design vue项目 vue

1.通过vite命令构建vue3+ts项目

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

根据步骤选择

项目名称
框架（vue,react…）
js或ts

文章图片

vite官网

2.安装ant design vue 【vite创建vue3+ts+ant design vue项目】安装2.x版本

npm i --save ant-design-vue@next

ant design vue 官网
按需加载
vite按需加载需要引入插件

npm i vite-plugin-style-import -S

在vite.config.ts中配置

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' // 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`; }, }] })], })

在App.vue文件中试用一下

> // 实验性vue语法,简化了操作， //其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行 // 然后把导出的变量定义到上下文中，并包含在返回的对象中。 // 所以我这里可以直接使用了，如果在vue2.x中还要在compoents中注册一下 import { Button } from "ant-design-vue";

效果

文章图片

3.安装Vuex

npm install vuex@next -S

在src目录下创建store文件夹
在store文件夹下创建index.ts文件和modules文件夹

文章图片

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 })

modules/user.ts

export default { state: () => ({ userInfo: 'sbafff' }) }

在main.ts中挂在

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

在控制台中打印的结果

文章图片

4.安装vue-router 先配置vite中对src的别名@，完成后就可以用@访问src下的内容
在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

安装vue-router

npm i vue-router@next -S

文章图片

router/index.ts

import { createRouter, createWebHistory } from "vue-router"; import Layout from '@/layouts/index.vue' import Test from '@/views/index/test.vue' import Index from '@/views/index/index.vue' // 路由信息 const routes = [ { path: "/", name: "Index", component: Index, }, { path: "/test", name: "test", component: Test, }, ]; // 导出路由 const router = createRouter({ history: createWebHistory(), routes }); export default router;

在main.ts中挂在

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

效果