ant-design-vue 是一款基于 vue 框架封装的组件库, 那么 ant-design-vue 如何使用? 下面本篇文章给大家简单介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
安装
NPM install ant-design-vue --save
然后在 main.JS 里面引入
- import ant from 'ant-design-vue'
- import 'ant-design-vue/dist/antd.less'
- Vue.use(ant)
如下所示
到此你就可以使用它的组件了.[注意: 如果你不需要自定义主题颜色, 把 import 的 Less 文件改为 CSS 文件]
配置一下自定义主题
在项目根目录建立 vue.config.JS 文件, 这里你可以修改主题的颜色 (默认为蓝色)
- module.exports = {
- CSS: {
- loaderOptions: {
- Less: {
- modifyVars: {
- 'primary-color': '#1DA57A',
- 'link-color': '#1DA57A',
- 'border-radius-base': '2px',
- },
- javascriptEnabled: true
- }
- }
- }
- };
如图所示:
这一步需要安装个插件, 不然报错 Module not found: Error: Can't resolve'Less-loader'
如下命令
NPM install Less Less-loader --save
然后就可以使用了, 比如在 home.vue 文件里加入一个按钮
<a-button type="primary">AAAAA</a-button>
启动项目后
可以看到, 成功引入了这个 UI 框架, 以及更改了主题颜色
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17769.html