- 综合排序
- 最热优先
- 最新优先
- 来自专栏青年码农
Ant-design-vue项目实现动态路由
1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
3.4K1714发布于 2020-10-13 - 来自专栏执行上下文
Ant-design-vue Table 增加单选操作！
因为 UI 组件库使用的 ant-design-vue，在看过 api后发现 table组件已经内置了相关功能。直接使用即可。 使用方式 新建一个table组件。
2.5K10编辑于 2024-04-01 - 来自专栏执行上下文
Ant-design-vue Table 自定义列斑马纹效果
业务需求 在使用 ant-design-vue 的 Table组件的时候，在某个业务模块的内因其承载的功能比较多，各个条件间界定不明显导致感官上十分的模糊，所以需要增加类似斑马纹的填充区分。
78310编辑于 2024-09-27 - 来自专栏编程微刊
Ant Design Vue 使用-引入 ant-design-vue并且使用
Design Vue 中文文档：https://www.antdv.com/docs/vue/introduce-cn/ Github:https://github.com/vueComponent/ant-design-vue 引入 ant-design-vue 1. 安装脚手架工具 打开cmd，以管理员身份运行 全局安装脚手架工具 以下两个命令都是可以的，就看自己喜欢习惯使用到哪个了。 使用组件 安装 ant-design-vue $ npm i --save ant-design-vue 如果安装太慢了 就用一下 $ cnpm i --save ant-design-vue 安装完成 }; </script> 打开main.js,加入Ant Design Vue的js和css main.js完整引入 import Vue from 'vue' import Antd from 'ant-design-vue /App' import 'ant-design-vue/dist/antd.css' Vue.config.productionTip = false Vue.use(Antd) new Vue(
1.9K10编辑于 2025-05-20 - 来自专栏青年码农
ant-design-vue运行时动态切换主题色
1.创建项目 使用vue-cli V3.0+创建项目 vue create antd-vue-theme-demo 选择css预处理器（其他的根据项目所需选择） 由于ant-design-vue的样式使用的是 这里改成了2.7.2 改完后保存，并重新下载依赖 yarn install 下载完后启动项目 yarn serve 在浏览器输入localhost:8080就可以看到创建好的项目 项目已经启动成功，接下来ant-design-vue 2.安装ant-design-vue yarn add ant-design-vue 然后在main.js中添加所需的antd组件 注意：ant-design-vue支持完整引入和按需加载，这里我们不要用完整引入 module.exports = { presets: [ '@vue/app' ], plugins: [ ["import", { libraryName: "ant-design-vue 提取antd的less变量文件 我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中，然后在index.html页面中直接引用，最后使用less.js中的modifyVars
6.6K1513发布于 2020-10-13 - 来自专栏前端技术分享|前沿资讯|读书分享
vue-cli 3.x安装及ant-design-vue初使用
-v v8.12.0 E:\stydy>webpack -v 4.29.6 E:\stydy>npm -v 6.4.1 E:\stydy>vue -V 3.7.0 3.创建项目 我在此处想使用 ant-design-vue 1.安装 npm install ant-design-vue --save-dev npm install less less-loader --save-dev 2.引入 src/main.js // 以 Button 组件为例 import { Button } from 'ant-design-vue' Vue.component(Button.name, Button); 3.组件使用 < // 配置babel-plugin-import, 用于按需加载组件代码和样式 plugins: [ [ "import", { libraryName: "ant-design-vue plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style
2.4K10发布于 2019-08-12 - 来自专栏友人a的笔记丶
Ant-Design-Vue 3.x 图标库如何实现自动引入？
需求来源 Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。 1.
2.6K20编辑于 2023-02-17 - 来自专栏Candy 的修仙秘籍
使用 unplugin-vue-components 按需引入组件（内附实现原理）
按需引入，可以减少体积大小，但需要通过以下方式加载组件： import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/lib import { Button } from 'ant-design-vue'; 但这种仍然需要手动引入组件，而且还必须使用 babel 而 unplugin-vue-components 可以不需要手动引入组件 /es from: path, // ant-design-vue/es/button/style/css sideEffects: `ant-design-vue { Button } from 'ant-design-vue/es' import 'ant-design-vue/es/button/style/css' 而 ant-design-vue/es/ /es', sideEffects: 'ant-design-vue/es/button/style/css', } 然后修改 Vue 编译后的代码（**unplugin-vue-components
5.7K40编辑于 2023-06-18 - 来自专栏CRPER折腾记
ant-design-vue 1.6.2版本,jsx写法下报ant-portal指令异常解决姿势
Vue 2.x使用ant-design-vue 1.6.2版本,jsx写法下弹出组件报ant-portal指令异常解决姿势 前言 今天遇到这个问题,我觉得有必要放出来. 应该会有人遇到和我一样的问题, 毕竟ant-design-vue的用户群体还是挺多的~~ 问题 异常图 image.png 基础条件 已经配置了按需加载 render jsx写法下引入这两类组件 image.png
92410发布于 2020-06-12 - 来自专栏IT综合技术分享
组件分享之前端组件——用于自定义表单的前端组件form-create
npm install @form-create/ant-design-vue 引入 iview <! -- import ant-design-vue --> <script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"> -- import form-create --> <script src="//unpkg.com/@form-create/<em>ant-design-vue</em>/dist/form-create.min.js Vue.use(formCreate) element-ui import formCreate from '@form-create/element-ui' Vue.use(formCreate) <em>ant-design-vue</em> import formCreate from '@form-create/<em>ant-design-vue</em>' Vue.use(formCreate) image.png image.png 更多内容可以参考其官方的
2K30编辑于 2022-05-16 - 来自专栏希里安
云原生模块开发-k8s节点信息获取
/App.vue'; import Antd from 'ant-design-vue'; const app = createApp(App); app.use(Antd); app.mount('# Button>text</Button> </template> <script> import { defineComponent } from 'vue'; import { Button } from 'ant-design-vue '; import 'ant-design-vue/dist/antd.less'; const app = createApp(App); app.use(Antd); 删除以下代码 if (import.meta.env.DEV ) { import('ant-design-vue/dist/antd.less'); } 然后直接引入官网的表格示例代码即可： <template> <a-table :columns="columns }</template> </template> </a-table> </template> <script lang="ts"> import type { TableProps } from 'ant-design-vue
43330编辑于 2023-10-30 - 来自专栏编程微刊
Ant Design Vue 使用
Design Vue 中文文档：https://www.antdv.com/docs/vue/introduce-cn/ Github: https://github.com/vueComponent/ant-design-vue 引入 ant-design-vue 1. 安装脚手架工具 打开cmd，以管理员身份运行 全局安装脚手架工具 以下两个命令都是可以的，就看自己喜欢习惯使用到哪个了。 使用组件 安装 ant-design-vue $ npm i --save ant-design-vue 如果安装太慢了 就用一下 $ cnpm i --save ant-design-vue 安装完成 }; </script> 打开main.js,加入Ant Design Vue的js和css main.js完整引入 import Vue from 'vue' import Antd from 'ant-design-vue /App' import 'ant-design-vue/dist/antd.css' Vue.config.productionTip = false Vue.use(Antd) new Vue(
1.8K20发布于 2021-11-24 - 来自专栏子舒的个人博客
vue2 中引入 Ant Design 报错问题
https://1x.antdv.com/docs/vue/getting-started-cn/ 根据 Ant Design 官方文档，在 vue2 中安装组件时使用指令： npm i --save ant-design-vue npm i --save [email protected] // main.js import Antd from 'ant-design-vue'; import 'ant-design-vue/dist
49620编辑于 2023-08-23 - 来自专栏一尾流莺学前端
【架构师（第三十篇）】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
vue' import { useStore } from 'vuex' import { useRouter } from 'vue-router' import { message } from 'ant-design-vue jest.mock('ant-design-vue'); // 模拟外部模块 vuex jest.mock('vuex'); // 模拟外部模块 vue-router jest.mock('vue-router jest.mock('ant-design-vue'); // 模拟外部模块 vuex jest.mock('vuex'); // 模拟外部模块 vue-router jest.mock('vue-router 模拟第三方库 ant-design-vue message ant-design-vue 组件库的 message 如何 mock // 先引入真实的 message 方法 import { message } from 'ant-design-vue'; // 模拟第三方库 ant-design-vue，第二个参数模拟方法 jest.mock('ant-design-vue', () => ({ message
2.6K30编辑于 2022-12-10 - 来自专栏无道编程
Vue按需引入Ant Design的一些问题（采坑）
关于Element UI的按需引入请看这（也是坑）：https://www.misiai.com/articles/16.html 安装ant design就不说了： npm i --save ant-design-vue 提取出引入模块 言下之意就是把引入这些组件写到专门的一个js配置文件里面： config\AntDesign.js import {Button, message} from 'ant-design-vue cli-plugin-babel/preset' ], plugins: [ [ "import", {libraryName: "ant-design-vue
3.3K10发布于 2020-05-21 - 来自专栏Java架构师必看
基于vue的ui框架哪个最简单_vue配什么ui框架比较好
缺点： 就目前来说用户数量和社区活跃度没有vue2高，有一定的学习成本（包括学习ts） 各个UI框架的比较 根据目前市场常用的框架进行初步筛选，入选了4款框架，分别为element-ui, ant-design-vue ant-design-vue: 阿里（但是根据提交纪录，基本还是原作者唐金州在维护） View UI:北京视图更新科技有限公司 Vuetify: Vuetify公司（国外） github上的Star数量也在一定程度上反映了市场的占有率 ant-design-vue: 15.2K View UI: 25.3K i View (23.9K) + View Ui(2.4K) Vuetify: 32K 对浏览器的兼容性问题也是衡量框架适用性的重要指标 element-plus: 官网没有提到兼容性；鉴于element-ui只是为vue3提供的组件库，而vue3目前不支持IE，所以可以理解 element plus的浏览器兼容性和vue3一样：不支持IE ant-design-vue 及以上浏览器，部分组件和功能不支持 IE Vuetify: ie11+及safari10+ 保持框架的持续更新对于框架的使用寿命来说是至关重要的 最后更新时间 Element：2021-09-02 ant-design-vue
2.3K30编辑于 2022-10-24 - 来自专栏执行上下文
哦吼，两个小问题~
Ant-design-vue a-select 下拉滚动的时候出现数据重复 1、问题描述 在滚动下拉列表的时候 数据由正常逐渐变成全部一样的。所以想是不是key值重复了。 Ant-design-vue a-checkbox-group 追加数据后第一个无法选中 1、问题描述 ant-design-vue a-checkbox-group 追加数据后原本第一个无法选中。
33720编辑于 2023-07-24 - 来自专栏前端资源
Antd Vue LocaleProvider国际化组件zh_CN中文配置
a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue a-locale-provider :locale="zhCN"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue
5.3K10发布于 2019-12-30 - 来自专栏青年码农
Ant-design-vue+vue-i18n实现前端国际化
项目基于Vue-cli3.x进行开发，使用了ant-design-vue框架，然后需要做国际化。 此时做国际化需要考虑两方面的国际化，一是ant-design-vue内部组件的国际化，二是国际化我们的业务显示，业务显示我们选用vue-i18n进行国际化。 $on(),这个是组件传值的一种方式，需要在main.js中配置， moment.locale("cn");这个是ant-design-vue内部组件的国际化切换方法。 $i18n.locale = localStorage.lang }, src下新建languages文件夹，下面分模块 页面切换多语言 这样就完成了Ant-design-vue + vue-i18n
4.9K1813发布于 2020-10-13 - 来自专栏前端资源
Vue项目使用Ant Design升级后报错`LocaleProvider` is deprecated的解决方法
更新/升级 Ant Design for Vue 版本： npm install ant-design-vue --save 我使用的是 npm ，如果你习惯用 yarn ，可以执行如下命令： yarn add ant-design-vue 更新成功，首先是报了一堆错误，下面是截取的部分，包括 moment 的路径错误： error in . 在 main.js 中引入并注册一下就好了： import { ConfigProvider } from 'ant-design-vue';//引用 Vue.component(ConfigProvider.name
4.3K10发布于 2020-07-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号