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

你可能感兴趣的:(Ant Design Vue 使用-引入 ant-design-vue并且使用)