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

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官方文档的代码，进行测试

在App.vue中引入test.vue

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

打开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