Vue进阶(幺幺零):ant-design-vue vue ant-design

connygpt 2024-10-26 09:21 11 浏览

ant-design-vue是蚂蚁金服 Ant Design【https://antdv.com/】官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件风格与Ant Design保持同步，组件html结构和css样式也保持一致。用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。

下面具体讲解下该组件库的应用实践。

一、安装组件库

npm install ant-design-vue --save

如果网络环境不佳，推荐使用 cnpm。

二、引入

在main.js中全局引入并注册

a.全部引入

import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
Vue.use(ant)

b.引入部分组件

import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
Vue.use(Button)

c.按需加载

ant-design-vue使用babel-plugin-import进行按需加载。

安装babel-plugin-import插件

npm i babel-plugin-import --save-dev

修改.babelrc文件，在plugins节点下，添加下面这个配置项：

 "plugins": ["transform-vue-jsx", "transform-runtime",
    [
        "import",
        {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "lib",
            "style": "css"              
        }
    ]
]

在需要使用相关组件的页面引入，并注册即可实现按需加载。

 <template>
  <div>
    	<a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
    components:{ AButton:Button },
}
</script>

应用

直接在项目中可以使用，在antd官网复制即可

<a-button type="primary">Primary</a-button>

注：请严格按照官方文档操作，否则会错的很离谱。

例如，应用icon图标时，正确使用方式如下：

<a-icon type="fullscreen"/>

而绝非如下方式：

<a-icon type="fullscreen"></a-icon>

使用上述错误方式，会导致浏览器无法解析ant-design-vue，从而报错！

antdesignofvue

上一篇：如何提高Linux安装软件的速度?给CentOS8配置DNF/YUM国内下载源
下一篇：开源分享:一个基于ant-design的vue后台系统模板

Vue进阶(幺幺零):ant-design-vue vue ant-design

一、安装组件库

二、引入

应用

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三

Vue进阶(幺幺零):ant-design-vue vue ant-design

一、安装组件库

二、 引入

应用

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三

二、引入