1、配置Ant design Vue (两个安装方式随便选一种,yarn会安装的更快)
npm i ant-design-vue --save
yarn add ant-design-vue
2、使⽤的 Vite,你可以使⽤ unplugin-vue-components 来进⾏按需加载。
yarn add unplugin-vue-components --save
在nuxt.config.ts中引⼊
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver} from "unplugin-vue-components/resolvers";
export default defineNuxtConfig({
vite: {
plugins: [
// 按需引⼊组件
Components({
resolvers: [AntDesignVueResolver()]
})
],
// ssr
ssr: {
noExternal: ['ant-design-vue'],
}
}
})
主题配置
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver} from "unplugin-vue-components/resolvers";
export default defineNuxtConfig({
vite: {
plugins: [
// 按需引⼊组件
Components({
resolvers: [AntDesignVueResolver({
importStyle: 'less' //配置为less
})]
})
],
css:{
preprocessorOptions: {
less: {
modifyVars: {
'primary-color': '#ea6f5a'
},
javascriptEnabled: true,
}
}
},
...
}
})
引⼊⼀个组件:
<a-button type="primary">Add</a-button>
说明修改成功!