ant-design-vue 全局和局部引入组件

最新推荐文章于 2024-08-11 08:15:00 发布

Helen_fight

最新推荐文章于 2024-08-11 08:15:00 发布

阅读量7.8k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yemuxia_sinian/article/details/123476954

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中引入Ant Design Vue库，包括全局引入和局部引入的方法。全局引入是在main.js中加载antd.css和使用Antd插件，而局部引入则是在需要的组件中按需导入Anchor及Link组件。示例代码展示了具体的实现步骤，帮助开发者理解两种引入方式。

摘要由CSDN通过智能技术生成

1、全局引入，在main.js里面引入

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

html使用：

<template>
  <div class="page-wrap">
    <a-anchor>
      <a-anchor-link href="#a" title="aaa"></a-anchor-link>
      <a-anchor-link href="#b" title="bbb"></a-anchor-link>
    </a-anchor>
</template>

2、局部引入，在main.js引入css样式

import 'ant-design-vue/dist/antd.css';

然后在页面上引入组件和注册：

<script>
import { Anchor } from "ant-design-vue";

export default {
    name: "Demo",
    components: {
        aAnchor: Anchor,
        aAnchorLink: Anchor.Link
    },
    data() {
        return {}
    }
}
</script>

html使用：

<template>
  <div class="page-wrap">
    <a-anchor>
      <a-anchor-link href="#a" title="aaa"></a-anchor-link>
      <a-anchor-link href="#b" title="bbb"></a-anchor-link>
    </a-anchor>
</template>