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>

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

vue3+vite+ant-design-vue项目搭建相关推荐

vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
Ant Design Vue - 环境搭建（Windows）
前言官方文档:https://www.antdv.com/docs/vue/introduce-cn/ 首先,您要自己搭建一个 vue 环境,我这里通过 cli 创建一个项目,如下图所示: 一.安装 ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
[Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范和组件化编码规范 3.它适用于企业级的中后台搭建二.快速创建项目 1.安装脚手架 npm ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...

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

安装引入ant-design-vue

main.js文件引入

安装路由插件

vue3+vite+ant-design-vue项目搭建相关推荐

最新文章

热门文章