NUXT3学习笔记2

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,
 }
 }
 },
 ...
 }
})

引⼊⼀个组件：

Add

 说明修改成功！