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框架，以及更改了主題顏色