vite创建vue3+ts+antdesignvue项⽬⼀. 通过vite命令构建vue3+ ts
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
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from "path"
// 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: {
"@": solve(__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,
antdesignvue 配置外部文件
},
];
// 导出路由
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
store/index.ts
import { createStore } from 'vuex'
// 获取modules⽂件夹下所有ts⽂件
const files: any = a.globEager("./modules/*.ts")
let modules: any = {}
Object.keys(files).forEach((key) => {
// 将获取到结果按照 key:value 的形式存放到modules对象中
place(/(\.\/|\modules\/|\.ts)/g, '')] = files[key].default })
console.log('模块',modules)
export default createStore({
modules
})
编译启动
...未完待续（后续研究增加vue-class-component）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。