Vue笔记-Ant Design Vue的使用（Vue3）

这里文档要这样看：

这里

npm install ant-design-vue@2.0.0-rc.3 -savenpm install axios@0.21.0  --save

在main.js中添加antd.css及Antd

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

修改App.vue

<template><a-layout><a-layout-header class="header"><div class="logo" /><a-menutheme="dark"mode="horizontal"v-model:selectedKeys="selectedKeys1":style="{ lineHeight: '64px' }"><a-menu-item key="1">nav 1</a-menu-item><a-menu-item key="2">nav 2</a-menu-item><a-menu-item key="3">nav 3</a-menu-item></a-menu></a-layout-header><a-layout><a-layout-sider width="200" style="background: #fff"><a-menumode="inline"v-model:selectedKeys="selectedKeys2"v-model:openKeys="openKeys":style="{ height: '100%', borderRight: 0 }"><a-sub-menu key="sub1"><template #title><span><user-outlined />subnav 1</span></template><a-menu-item key="1">option1</a-menu-item><a-menu-item key="2">option2</a-menu-item><a-menu-item key="3">option3</a-menu-item><a-menu-item key="4">option4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><laptop-outlined />subnav 2</span></template><a-menu-item key="5">option5</a-menu-item><a-menu-item key="6">option6</a-menu-item><a-menu-item key="7">option7</a-menu-item><a-menu-item key="8">option8</a-menu-item></a-sub-menu><a-sub-menu key="sub3"><template #title><span><notification-outlined />subnav 3</span></template><a-menu-item key="9">option9</a-menu-item><a-menu-item key="10">option10</a-menu-item><a-menu-item key="11">option11</a-menu-item><a-menu-item key="12">option12</a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout style="padding: 0 24px 24px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item>List</a-breadcrumb-item><a-breadcrumb-item>App</a-breadcrumb-item></a-breadcrumb><a-layout-content:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">Content</a-layout-content></a-layout></a-layout></a-layout>
</template><script>import {defineComponent} from 'vue'export default defineComponent({name: 'app',components: {}});
</script><style>#components-layout-demo-top-side-2 .logo {float: left;width: 120px;height: 31px;margin: 16px 24px 16px 0;background: rgba(255, 255, 255, 0.3);}.ant-row-rtl #components-layout-demo-top-side-2 .logo {float: right;margin: 16px 0 16px 24px;}.site-layout-background {background: #fff;}
</style>

程序运行截图如下：

Vue笔记-Ant Design Vue的使用（Vue3）相关推荐

Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
[ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
Ant Design Vue 切换中英文改变Menu和内容
前言,目前一个小项目使用的是Ant Design Vue,情况是路由从接口获取并渲染到页面上,切换国际化语言时,Menu 和内容都中英文自动切换. Ant Design Vue 结构 Ant D ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...

Vue笔记-Ant Design Vue的使用（Vue3）

Vue笔记-Ant Design Vue的使用（Vue3）相关推荐

最新文章

热门文章