antd 适合 vue 使用. ant design 有 vue 版本的, 对应的名称为 ant-design-vue. 在 vue 项目中可以使用
NPM i --save ant-design-vue
命令进行安装, 然后即可使用了.
ant design 的 vue 版本 --ant-design-vue 介绍
ant-design-vue 是蚂蚁金服 Ant Design 官方唯一推荐的 Vue 版 UI 组件库, 它其实是 Ant Design 的 Vue 实现, 组件的风格与 Ant Design 保持同步, 组件的 html 结构和 CSS 样式也保持一致. 用下来发现它的确称得上为数不多的完整的 VUE 组件库与开发方案集成项目.
官网:
https://www.antdv.com/docs/vue/introduce-cn/
优点:
提炼自企业级中后台产品的交互语言和视觉风格.
开箱即用的高质量 Vue 组件.
共享 Ant Design of React 设计工具体系.
ant-design-vue 的全局引入
1, 先用 vue 的脚手架工具 vue-cli 创建一个 vue 项目
2, 安装 ant-design-vue
使用命令行工具, 切换到项目路径下, 使用命令 [NPM i --save ant-design-vue] 安装, 如下图
3, 全局引入
(1) 完整引入
main.JS 中全局引入并注册
- import Antd from 'ant-design-vue'
- import 'ant-design-vue/dist/antd.css'
- Vue.use(Antd)
在页面中不再需要引入注册组件, 可以直接使用所有的组件
- <template>
- <div>
- <a-button type="primary">hello world</a-button>
- </div>
- </template>
- <script>
- export default {}
- </script>
(2) 导入部分组件
在 main.JS 中导入并注册需要在项目中使用的组件
- import {
- Button
- } from "ant-design-vue";
- import 'ant-design-vue/lib/button/style/css'
- Vue.component(Button.name, Button)
在项目中可以直接使用这个已经注册的组件
- <template>
- <div>
- <a-button type="primary">hello world</a-button>
- </div>
- </template>
- <script>
- export default {}
- </script>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17770.html