vue3+vite+ant-design-vue项目搭建

vite官方传送门：Vite | 下一代的前端工具链

使用如下命令安装vue3+vite项目。  my-vue-app是项目名称

npm create vite@latest my-vue-app --template vue

运行后就已经创建了一个vue3项目，当然还需要cd my-vue-app切换到项目目录安装相关依赖执行npm install

//切换
cd my-project
//安装依赖
npm install
//运行
npm run dev

这样就已经完成了。注意！注意！注意！Vite 需要 Node.js 版本 >= 14.18.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

安装引入ant-design-vue

npm i --save ant-design-vue

main.js文件引入

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(Antd).mount('#app')

安装路由插件

npm install vue-router@4

main.js中引入路由

import router from './router/router'

createApp(App).use(Antd).use(router).mount('#app')

src文件下创建router文件夹然后创建router.js文件

router.js

import { createRouter,createWebHistory } from "vue-router";
import Hello from '../components/hello.vue';
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/hello',
            component:Hello,
        }
    ]
})
export default router;

hello.vue

<template>
  <div class="hello">
    hello！我都组件
  </div>
</template>

<script></script>

<style scoped></style>

以上就是本次搭建步骤！觉得可以三连一下！