Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。
Ant Design Vue
中文文档：https://www.antdv.com/docs/vue/introduce-cn/
Github:https://github.com/vueComponent/ant-design-vue/
star：15k
特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Vue 组件。
- 共享 Ant Design of React 设计工具体系。
支持环境
- 现代浏览器和 IE9 及以上(需要 polyfills)。
- 支持服务端渲染。
引入 ant-design-vue
1. 安装脚手架工具
打开cmd，以管理员身份运行
全局安装脚手架工具
以下两个命令都是可以的，就看自己喜欢习惯使用到哪个了。
$ npm install -g @vue/cli # OR $ yarn global add @vue/cli
2. 创建一个项目 #
使用命令行进行初始化。
$ vue create antd-demo
我这里不想在c盘创建项目，暂时先进入d盘创建一个新的项目
如果对项目不做要求，可以一路回车默认安装
并配置项目。
若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。
初始化完成之后
打开d盘
可以看见antd-demo
执行
$ cd antd-demo $ yarn serve
打开浏览器、
输入
- Local: http://localhost:8080/ - Network: http://192.168.199.181:8080/
可以看见
创建成功
3. 使用组件
安装 ant-design-vue
$ npm i --save ant-design-vue
如果安装太慢了
就用一下
$ cnpm i --save ant-design-vue
安装完成
图片.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
使用了一下导航菜单的代码 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
