ant-design-vue怎么全局引入?

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

ant-design-vue怎么全局引入?

1、先用vue的脚手架工具vue-cli创建一个vue项目

2、安装ant-design-vue

使用命令行工具,切换到项目路径下,使用命令【npm i --save ant-design-vue】安装,如下图

279759ee3d6d55fb4dae6adf60224f4a21a4dddb.png

3、全局引入

(1)完整引入

main.js中全局引入并注册

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

在页面中不再需要引入注册组件,可以直接使用所有的组件

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

(2)导入部分组件

在main.js中导入并注册需要在项目中使用的组件

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

在项目中可以直接使用这个已经注册的组件

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

更多前端开发知识,请查阅 HTML中文网 !!

以上就是ant-design-vue怎么全局引入?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏