1.ant组件导入方式

1.完整导入

import antd from 'ant-design-vue'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

import Vue from 'vue'
import App from './App.vue'

//完整导入：一次性导入所有的组件
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'; //需要注意的是，样式文件需要单独引入。
Vue.use(antd)

Vue.config.productionTip = false

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

使用：

<template>
  <div class="hello">
    <a-button type="primary" @click="btnClick">antd按钮 </a-button>
    <a-input placeholder="请输入"></a-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    btnClick() {
      this.$message.info('这是一条消息')
    }
  }
}
</script>

<style scoped>

</style>

效果：点击按钮，弹窗了消息

image.png

2.局部导入

2.1 在main.js按需导入组件button message及其样式

import Vue from 'vue'
import App from './App.vue'

// 按需加载组件
import Button from 'ant-design-vue/lib/button'
import message from 'ant-design-vue/lib/message'
import 'ant-design-vue/lib/button/style' // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
import 'ant-design-vue/lib/message/style'

Vue.use(Button)
Vue.prototype.$message = message

Vue.config.productionTip = false

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

2.2 使用：

<template>
  <div class="hello">
    <a-button type="primary" @click="btnClick">antd按钮 </a-button>
    <a-input placeholder="请输入"></a-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    btnClick() {
      this.$message.info('这是一条消息')
    }
  }
}
</script>

<style scoped>

</style>

2.3 效果：点击按钮，弹窗了消息

image.png

如果你使用如下方式，并不是按需加载，依然是整体导入了所有的组件

import { Button } from 'ant-design-vue'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
2.1 main.js

import Vue from 'vue'
import App from './App.vue'

//局部导入：只导入在项目中使用的组件
import { Button, Input, message } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'; //导入ant样式文件
Vue.use(Button)
Vue.use(Input)
Vue.prototype.$message = message

Vue.config.productionTip = false

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

2.2 使用：

<template>
  <div class="hello">
    <a-button type="primary" @click="btnClick">antd按钮 </a-button>
    <a-input placeholder="请输入"></a-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    btnClick() {
      this.$message.info('这是一条消息')
    }
  }
}
</script>

<style scoped>

</style>

2.3 效果：点击按钮，弹窗了消息

image.png

3.按需加载

3.1安装babel-plugin-import插件

npm install babel-plugin-import --save-dev

3.2babel.config.js配置babel-plugin-import插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true //默认导入的样式文件为less文件
    }]
  ]
}

注意：因为style:true, 默认导入的式less样式文件，需要安装less-loader来解析less文件

npm install less-loader@6.0.0 --save-dev

此处我指定了less-loader版本，因为不指定版本会默认安装最新版本，安装会失败报错，而安装less-loader的4，3版本，ant定制主体会失败
如果要导入css文件，使用如下配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: (name) => `${name}/style/css` //修改导入的样式文件为css文件
    }]
  ]
}

3.3按需加载ant组件

import Vue from 'vue'
import App from './App.vue'

//按需引入：babel-plugin-import会帮你转换为import Button from 'ant-design-vue/lib/button'
import {Button} from 'ant-design-vue'
Vue.use(Button)

Vue.config.productionTip = false

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

使用：

<template>
  <div class="hello">
    <a-button type="primary" @click="btnClick">antd按钮 </a-button>
    <a-input placeholder="请输入"></a-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    btnClick() {
      this.$message.info('这是一条消息')
    }
  }
}
</script>

<style scoped>

</style>