Vue3（二）集成Ant Design Vue

目录
  • 一、集成Ant Design Vue
  • 二、组件的使用
    • 1、完整引用
    • 2、组件引用
  • 三、组件使用示例
    • 1、我们在home主页做修改
    • 2、重新启动服务查看效果
  • 四、总结

上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目（一）接下来承接上一篇文章的基础继续展开下面文章的内容

一、集成Ant Design Vue

SQL：

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

兼容性：

Ant Design Vue 2.x 支持所有的现代浏览器。

如果需要支持 IE9+ ，你可以使用 Ant Design Vue 1.x & Vue 2.x。

对于 IE 系列浏览器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

二、组件的使用

官网地址：https://2x.antdv.com/docs/vue/getting-started-cn

1、完整引用

在main.ts中修改内容如下：

ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
//优点就是方便开发，缺点就是打包的时候会使文件较大（但不并影响什么）
createApp(App).use(store).use(router).use(Antd).mount('#app')

2、组件引用

完整引入后，我们就能快乐的使用组件了，如果你之前使用过Vue2.0或者 Element UI相对上后会更快。

三、组件使用示例

我们来为home主页，添加一个按钮，如下图：

1、我们在home主页做修改

HTML：

<template>
  <div class="home">
    <a-button type="primary" danger>Primary</a-button>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
});
</script>

2、重新启动服务查看效果

双击server启动，查看结果如下图：

四、总结

到此这篇关于Vue3集成Ant Design Vue 的文章就介绍到这了,更多相关Vue3集成Ant Design Vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用Vue3 创建Vue CLI 项目（一）

    利用Vue3 创建Vue CLI 项目（一）

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • vue3:setup的两个注意点详解

    vue3:setup的两个注意点详解

    目录 在vue2中 在vue3中 setup的注意点 setup生命周期在beforecreated之前 setup可以拿到两个参数,props和context context.attrs context.emit context.slot 总结 在vue2中 父组件传属性给子组件 子组件接收属性 如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长 使用的时候名字比较长 vue2,父组件在子组件里使用插槽 打印插槽里的内容 如果父组件使用了子组件2个插

  • Vue3中emits与attrs的区别分析

    Vue3中emits与attrs的区别分析

    目录 结论 实践分析 扩展 总结 结论 当在父组件自定义事件,若没有在子组件中声明时,将自动绑定在父组件的$attrs上:而当在子组件声明时,则不会在父组件的$attrs上出现 实践分析 为了验证emits和attrs的区别,我们构造这样的组件结构 <div> <com-one-vue/> </div> <div> <com-one-vue/> </div> 其具体的Vue文件及代码为(注意,以下语法均采用 setup语法糖 ): A

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • 浅谈Vue3 父子传值

    目录 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 2.子组件依旧通过 props 来接收并且在模版中使用 子传父: 总结 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父组件中的数据定义为 : fatherData  , 子组件需要接收的数据定义为: sonData . // 父组件 <template> <div class="a

  • vue3 非父子组件通信详解

    vue3 非父子组件通信详解

    目录 第一种方法 App.vue Home.vue HomeContent.vue 数据的响应式 修改响应式Property 总结 业务场景是,不是父子组件实现通信 文件目录 第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <sc

  • Vue3（二）集成Ant Design Vue

    Vue3（二）集成Ant Design Vue

    目录 一.集成Ant Design Vue 二.组件的使用 1.完整引用 2.组件引用 三.组件使用示例 1.我们在home主页做修改 2.重新启动服务查看效果 四.总结 上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目(一)接下来承接上一篇文章的基础继续展开下面文章的内容 一.集成Ant Design Vue SQL: npm install ant-design-vue@2.0.0-rc.3 --save 兼容性: Ant Design Vue 2.x 支持所有的现代浏览器. 如果

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • Ant Design Vue 添加区分中英文的长度校验功能

    原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决方案,所以自己试着基于v-decorator的自定义校验validator实现了一下,核心代码如下: 校验插件 const validators = { /** * 可区分全角字符/半角字符的长度校验. * @param min * @param max * @returns {Function}

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • ant design vue datepicker日期选择器中文化操作

    按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')&q

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • ant design vue导航菜单与路由配置操作

    此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select

随机推荐