zoukankan      html  css  js  c++  java
  • Vue(九)使用Ant Design入门——环境搭建

    安装

    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框架,以及更改了主题颜色

  • 相关阅读:
    Java 之 Maven 基础
    JavaScript 之 RegExp 对象
    Java 之 Jedis
    Java 之 Redis 基础
    Java 之 NOSQL
    JavaWeb 之 JSON
    JavaWeb 之 Ajax
    【LeetCode-数组】外观数列
    【LeetCode-树】从先序遍历还原二叉树
    【LeetCode-数组】搜索二维矩阵 II
  • 原文地址:https://www.cnblogs.com/LUA123/p/11170657.html
Copyright © 2011-2022 走看看