1. 需要安裝的幾個(gè)包
# ant-design
npm i --save ant-design-vue@next
# less
npm install less less-loader --save-dev
# babel
npm install babel-plugin-import --save-dev
2. 需要改造的文件
- bable.config.js（修改）
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 需要添加的內(nèi)容
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true
}
]
]
};
- src/plugins/Ant/index.js（添加）
import {
Carousel,
ConfigProvider,
Button
} from 'ant-design-vue'
const ant = {
install (Vue) {
Vue.component(Carousel.name, Carousel)
Vue.component(ConfigProvider.name, ConfigProvider)
Vue.component(Button.name, Button)
}
}
export default ant
- src/main.js（修改）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ant from './plugins/Ant'
createApp(App)
.use(store)
.use(router)
.use(ant)
.mount('#app')
- vue.config.js（修改）
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true
}
}
}
}
}
- src/App.vue（修改）
<template>
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
export default {
data () {
return {
locale: zhCN
}
}
}
</script>
3. 現(xiàn)在你可以使用了
<template>
<div class="hello">
<a-button type="primary">
Primary
</a-button>
<a-button>Default</a-button>
<a-button type="dashed">
Dashed
</a-button>
<a-button type="danger">
Danger
</a-button>
<a-button type="primary">
按鈕
</a-button>
<a-button type="link">
Link
</a-button>
</div>
</template>
image.png
