vue-cli中使用 Ant Design Vue

安装Cli工具

npm install -g @vue/cli
yarn global add @vue/cli

创建新项目

vue create antd-demo

安装antd vue

yarn add ant-design-vue

项目配置

全局引入

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

按需加载

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

• 使用 babel-plugin-import #
  babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）。

yarn add babel-plugin-import --dev
cnpm i babel-plugin-import --dev

• 使用 vue-cli 3 的小伙伴 #
  修改babel.config.js文件，配置 babel-plugin-import
  

plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
    ]
  ]

• 组件中使用
  
• 全局使用