ant-design-vue如何使用?

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)

如下所示

1.png

到此你就可以使用它的组件了。【注意:如果你不需要自定义主题颜色,把import的less文件改为css文件】

配置一下自定义主题

在项目根目录建立 vue.config.js 文件,这里你可以修改主题的颜色(默认为蓝色)

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#1DA57A',
                    'link-color': '#1DA57A',
                    'border-radius-base': '2px',
                },
                javascriptEnabled: true
            }
        }
    }
};

如图所示:

2.png

这一步需要安装个插件,不然报错 Module not found: Error: Can't resolve 'less-loader'

3.png

如下命令

npm install less less-loader --save

然后就可以使用了,比如在home.vue文件里加入一个按钮

<a-button type="primary">AAAAA</a-button>

启动项目后

4.png

可以看到,成功引入了这个UI框架,以及更改了主题颜色

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是ant-design-vue如何使用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏