搭建ant-design-vue的基础工程
vue3ant-design-vue

1.版本选择

  • vue 3.0
  • ant-design-vue:2.x

2.安装脚手架

yarn global add @vue/cli



3.创建项目

vue create antd-demo



4.添加ant-design-vue组件

ant-design-vue@next



5.设置组件的按需加载
5.1添加依赖

@babel/preset-env
babel-plugin-import
@babel/plugin-transform-runtime
less
less-loader

5.2修改babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "lib",
        "style": true
      }
    ]
  ]
}



5.3 在HelloWord模块中测试下是否可以按需加载

<script>
import {Button} from "ant-design-vue"
export default {
  name: 'HelloWorld',
  components:{ AButton:Button },
  props: {
    msg: String
  }
}
</script>


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



image1.png

button正常显示了。

暂无评论