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()]})],// ssrssr: {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>
说明修改成功!