vue-cli ant-design-vue使用

1、vue create antd-demo

2、修改src/main.js

修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。

import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

3、修改src/App.vue

修改 src/App.vue的 template 内容。


...

我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
此时我们需要对 vue-cli 的默认配置进行自定义。

4、安装babel-plugin-import插件

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
npm install babel-plugin-import

5、修改babel.config.js文件

修改babel.config.js文件，配置 babel-plugin-import

 module.exports = {
  presets: ["@vue/app"],
+  plugins: [
+    [
+      "import",
+      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+    ]
+  ]
};

6、修改src/main.js

然后移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

  // src/main.js
  import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
  import App from './App'

  Vue.component(Button.name, Button)

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount("#app");

7、vue.config.js

不配置less-loader会报如下错误
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in F:\iBlockChain\iblockchain-client\node_modules\ant-design-vue\lib\styl
————————————————
版权声明：本文为CSDN博主「Urmsone」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Urms_handsomeyu/article/details/105804303

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}