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>
以上就是本次搭建步骤!觉得可以三连一下!