Ant Design Vue 使用-引入 ant-design-vue并且使用

布满荆棘的人生 2022-09-06 10:19 569阅读 0赞

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。

Ant Design Vue  
中文文档：[https://www.antdv.com/docs/vue/introduce-cn/][https_www.antdv.com_docs_vue_introduce-cn]  
Github:[https://github.com/vueComponent/ant-design-vue/][https_github.com_vueComponent_ant-design-vue]  
star：15k

### 特性 ###

*  提炼自企业级中后台产品的交互语言和视觉风格。
 *  开箱即用的高质量 Vue 组件。
 *  共享 [Ant Design of React][] 设计工具体系。

### 支持环境 ###

*  现代浏览器和 IE9 及以上(需要 [polyfills][])。
 *  支持服务端渲染。

## 引入 ant-design-vue ##

### 1. 安装脚手架工具 ###

打开cmd，以管理员身份运行

![0570359a64978b66311f4e1ad6b54537.png][]

全局安装脚手架工具  
以下两个命令都是可以的，就看自己喜欢习惯使用到哪个了。

$ npm install -g @vue/cli
    # OR
    $ yarn global add @vue/cli

![c19f98eb70a70b4637861dc13d759df6.png][]

### 2. 创建一个项目 [\#][Link 1] ###

使用命令行进行初始化。

$ vue create antd-demo

我这里不想在c盘创建项目，暂时先进入d盘创建一个新的项目  
如果对项目不做要求，可以一路回车默认安装

![cfc5de102aaa4901bacbbf14655e2e6c.png][]

并配置项目。

若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。

![734e1ec75d97b59faddafee5ca8ddd0c.png][]

![66a1ef5d830fdb78cd11cb6cf7fd011b.png][]

初始化完成之后  
打开d盘  
可以看见antd-demo

![344d660c73c8d414b2fdf8c350db9305.png][]

执行

$ cd antd-demo
    $ yarn serve

![ec4323fff7ce5464e147beee72d64966.png][]

打开浏览器、  
输入

- Local:   http://localhost:8080/
      - Network: http://192.168.199.181:8080/

可以看见  
创建成功

![5cb497b65fa78576b8b2c919f5e7db86.png][]

### 3. 使用组件 ###

安装 ant-design-vue

$ npm i --save ant-design-vue

如果安装太慢了  
就用一下  
$ cnpm i --save ant-design-vue

![7581698928e6f9d6d230c706966b19c0.png][]

安装完成

![7c128563201ae0bfe673d1c1585f5af0.png][]

图片.png

在components文件夹下面创建test.vue文件，复制一段Ant Design Vue官方文档的代码，进行测试

<template>
      <div>
        <a-button type="primary">
          Primary
        </a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">
          Dashed
        </a-button>
        <a-button type="danger">
          Danger
        </a-button>
        <a-config-provider :auto-insert-space-in-button="false">
          <a-button type="primary">
            按钮
          </a-button>
        </a-config-provider>
        <a-button type="primary">
          按钮
        </a-button>
        <a-button type="link">
          Link
        </a-button>
      </div>
    </template>

#### 在App.vue中引入test.vue ####

![aa88a29d251ad1ed0d43055bc146065d.png][]

使用了一下导航菜单的代码 [https://www.antdv.com/components/menu-cn/][https_www.antdv.com_components_menu-cn]

<template>
      <div style="width: 256px">
        <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button>
        <a-menu
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
        >
          <a-menu-item key="1">
            <a-icon type="pie-chart" />
            <span>Option 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="desktop" />
            <span>Option 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="inbox" />
            <span>Option 3</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
            <a-menu-item key="5">
              Option 5
            </a-menu-item>
            <a-menu-item key="6">
              Option 6
            </a-menu-item>
            <a-menu-item key="7">
              Option 7
            </a-menu-item>
            <a-menu-item key="8">
              Option 8
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
            <a-menu-item key="9">
              Option 9
            </a-menu-item>
            <a-menu-item key="10">
              Option 10
            </a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="11">
                Option 11
              </a-menu-item>
              <a-menu-item key="12">
                Option 12
              </a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          collapsed: false,
        };
      },
      methods: {
        toggleCollapsed() {
          this.collapsed = !this.collapsed;
        },
      },
    };
    </script>

打开main.js,加入Ant Design Vue的js和css

**main.js完整引入**

import Vue from 'vue'
    import Antd from 'ant-design-vue'
    import App from './App'
    import 'ant-design-vue/dist/antd.css'
    Vue.config.productionTip = false
    
    Vue.use(Antd)
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

再次运行，组件中的效果如下：

输入命令：  
yarn serve

![59bd6aa6adf2ae453515336c18dd5183.png][]

![13ff50b62ad8b04704f7e9e8c2948533.png][]

[https_www.antdv.com_docs_vue_introduce-cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.antdv.com%2Fdocs%2Fvue%2Fintroduce-cn%2F
[https_github.com_vueComponent_ant-design-vue]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FvueComponent%2Fant-design-vue%2F
[Ant Design of React]: https://links.jianshu.com/go?to=http%3A%2F%2Fant-design.gitee.io%2Fdocs%2Fspec%2Fintroduce-cn
[polyfills]: https://links.jianshu.com/go?to=https%3A%2F%2Fvuecomponent.github.io%2Fant-design-vue%2Fdocs%2Fvue%2Fgetting-started-cn%2F%23%25E5%2585%25BC%25E5%25AE%25B9%25E6%2580%25A7
[0570359a64978b66311f4e1ad6b54537.png]: /images/20220829/7ee887fb1f4e4d31bf709621d879b503.png
[c19f98eb70a70b4637861dc13d759df6.png]: /images/20220829/5736737ab2ca470c9c23b19d5b1a6dd3.png
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.antdv.com%2Fdocs%2Fvue%2Fgetting-started-cn%2F%232.-%25E5%2588%259B%25E5%25BB%25BA%25E4%25B8%2580%25E4%25B8%25AA%25E9%25A1%25B9%25E7%259B%25AE
[cfc5de102aaa4901bacbbf14655e2e6c.png]: /images/20220829/5a24238b628642b4acd40933ab06c51a.png
[734e1ec75d97b59faddafee5ca8ddd0c.png]: /images/20220829/889b719c9f4c42f8bd7e3328ebe2d871.png
[66a1ef5d830fdb78cd11cb6cf7fd011b.png]: /images/20220829/4dda0f323ccb459cbae375ea64ff6b91.png
[344d660c73c8d414b2fdf8c350db9305.png]: /images/20220829/5d3581ccba3f452f804de520dcf99f38.png
[ec4323fff7ce5464e147beee72d64966.png]: /images/20220829/f03d13ee99b8416b86fa1955d1240ec0.png
[5cb497b65fa78576b8b2c919f5e7db86.png]: /images/20220829/6b6069d453f44c2eb30ea0a59928057e.png
[7581698928e6f9d6d230c706966b19c0.png]: /images/20220829/0d937650c43149f89f263ed596c60451.png
[7c128563201ae0bfe673d1c1585f5af0.png]: /images/20220829/17d1980a5e9b4fed8b084a81bbdefc9e.png
[aa88a29d251ad1ed0d43055bc146065d.png]: /images/20220829/057ec9f879504cc5ba610d60166706a3.png
[https_www.antdv.com_components_menu-cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.antdv.com%2Fcomponents%2Fmenu-cn%2F
[59bd6aa6adf2ae453515336c18dd5183.png]: /images/20220829/2eb53a78956847148f7741c439f107c0.png
[13ff50b62ad8b04704f7e9e8c2948533.png]: /images/20220829/7d2e24545b6547a9bf3763038d06745a.png