Vite中使用Ant Design Vue3.x框架教程示例
目录
- 引言
- 安装 ant-design-vue
- main.js引入,全局使用
- 按需引入
引言
官网:
https://www.antdv.com/docs/vue/introduce-cn
文档选择vue3版本,也是官网当前推荐的
安装 ant-design-vue
npm i --save ant-design-vue
main.js引入,全局使用
import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import store from './store/index' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; createApp(App) .use(Antd) .use(router) .use(store) .mount('#app') //use必须要在mount之前
按需引入
官网没怎么写,估计很多人比较懵
首先将main.js中全局引入的注释掉
安装按需引入插件
npm i unplugin-vue-components -D
打开vite.config.js进行配置
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver, } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ AntDesignVueResolver(), ], }) ], })
注意:使用的 Vite,你可以使用unplugin-vue-components来进行按需加载。但是此插件无法处理非组件模块,如 message,这种组件需要手动加载:
import { message } from 'ant-design-vue'; import 'ant-design-vue/es/message/style/css';
以上就是Vite中使用Ant Design Vue3.x框架教程示例的详细内容,更多关于Vite使用Ant Design Vue3.x框架的资料请关注我们其它相关文章!
相关推荐
-
如何用Vite构建工具快速创建Vue项目
目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd
-
vue3+vite使用jsx和tsx详情
目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def
-
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
实现效果 本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图: sortablejs介绍 首先先来认识一下这个插件: sortablejs 大家可以去细读一下它的api文档: 这边我就着重介绍一下我用到的api. 1.group可以传入对象,参数值为name,pull,put, name:如果是要两个列表下进行拖动的话,name的值必须为一样: pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function t
-
vue中ant-design-vue组件的安装与使用
目录 1. 安装 2. 引入组件库 3. 使用 3.1 按钮样式 3.2 导航栏样式 3.3 表单样式 补充:ant-design-vue的兼容问题 总结 官方地址:Ant Design Vue 1. 安装 首先使用vue-cli创建项目,然后进入项目,使用npm安装ant-design-vue库: npm i --save ant-design-vue@next 然后在package.json文件中的dependencies中看见刚刚下载的库: 2. 引入组件库 然后在main.js中引入,注
-
Vite vue3多页面入口打包以及部署踩坑实战
目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,
-
Vue3中级指南之如何在vite中使用svg图标详解
目录 前言 vite-plugin-svg-icons 安装 使用 如何在组件中使用 创建SvgIcon组件 icons目录结构 全局注册组件 页面使用 获取所有 SymbolId 总结 前言 svg图片在项目中使用的非常广泛,今天记录一下我是如何在vue3 + vite 中使用svg图标. vite-plugin-svg-icons 预加载 在项目运行时就生成所有图标,只需操作一次 dom 高性能 内置缓存,仅当文件被修改时才会重新生成 安装 node version: >=12.0.0 v
-
vite2.x实现按需加载ant-design-vue@next组件的方法
1.使用版本 vite:2.0 ant-design-vue: 2.0.0-rc.8 vue:3.0.5 2.安装vite插件 yarn add vite-plugin-style-import -D or npm i vite-plugin-style-import -D 插件仓库地址:github 3.vite.config.js配置 import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style
-
Vite中使用Ant Design Vue3.x框架教程示例
目录 引言 安装 ant-design-vue main.js引入,全局使用 按需引入 引言 官网: https://www.antdv.com/docs/vue/introduce-cn 文档选择vue3版本,也是官网当前推荐的 安装 ant-design-vue npm i --save ant-design-vue main.js引入,全局使用 import { createApp } from 'vue' import App from './App.vue' import router
-
Ant Design 组件库按钮实现示例详解
目录 1 antd 之 Button API 2 antd 之 Button 示例 1 antd 之 Button API antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之 按钮. 按钮 Button 是一个比较基础的 UI 组件,一般在有交互的应用中都会用到. 其 DOM 节点为 <Button>...</Button>,ant
-
C语言数据结构顺序表中的增删改(头插头删)教程示例详解
目录 头插操作 头删操作 小结 头插操作 继上一章内容(C语言数据结构顺序表中的增删改教程示例详解),继续讲讲顺序表的基础操作. 和尾插不一样,尾插出手阔绰直接的开空间,咱头插能开吗?好像没听说过哪个接口可以在数据前面开一片空间吧,那我们思路就只有一个了——挪数据.那应该从第一位开始挪吗?注意,这和 memcpy 函数机制是一样的,并不意味着后面数据一起挪动,也不会彼此独立,而是相互影响,挪动的数据会对后面数据进行覆盖. 那我们的逻辑就应该是从后往前挪,那我们就直接定一个下标,指向这段空间的最后
-
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中的联动选择取消操作
项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
-
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中使用css切换的问题及解决
目录 Ant Design使用css切换问题 1.绑定一个自定义属性 2.css模块化 3.Ant Design主题方案 4.css in js ant design中css样式覆盖问题 Ant Design使用css切换问题 当想通过开关来控制主题颜色时,就必须控制css的变化,现就记录使用Ant Design切换主题过程中发现的一些问题. 切换主题的方法: 1.绑定一个自定义属性 通过绑定一个自定义属性,一键改变html的整体样式.但缺点也很明显,他仅适用于原生的样式(css全部由自己定义)
-
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中日期选择框混合时间选择器的用法说明
首先时间格式化用到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
随机推荐
- ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享
- SWT(JFace)体验之Sash(活动控件)
- 简单的Lua 连接操作mysql数据库的方法
- jQuery EasyUI Accordion可伸缩面板组件使用详解
- Gentoo 下安装与配置Nginx+ MySQL + PHP (fastcgi) 环境步骤分享
- 用Python编写一个每天都在系统下新建一个文件夹的脚本
- web.py在SAE中的Session问题解决方法(使用mysql存储)
- C语言位运算和sizeof运算符详解
- Powershell小技巧之编辑Hosts文件
- MyBatis实践之动态SQL及关联查询
- SQL Server中Check约束的学习教程
- 深入浅析JavaScript中的Function类型
- 详解spring boot使用@Retryable来进行重处理
- Oracle 随机数
- php实现生成验证码实例分享
- 浅谈android组件化之ARouter简单使用
- 分析JavaScript数组操作难点
- python 中的list和array的不同之处及转换问题
- 如何为Xcode添加删除整行、复制整行及在下方新建一行快捷键详解
- golang日志框架之logrus的使用