前言
最近起了个 SSR项目，用的 Nuxt，然后一开始是全量引入的 Antd，后来准备性能优化，决定按需引入，网上搜了搜，不是很多，结合网上的，然后自己踩了踩坑，成功了，写一下分享下
一、删除全量引入
一开始是全量引入的，现在要改成按需引入的话，需要改3个地方
第一步：把 Plugins 文件夹下的 antd-ui.js 删除
第二步：nuxt.config.js 文件中修改，把下面两行注释掉或者删掉
css: ['ant-design-vue/dist/antd.css'],
plugins: ['@/plugins/antd-ui'],
二、按需引入方法 ①(组件内引入)
第一种按需引入，在组件内部单独引入
直接上代码，我想在 content.vue 中用 Row, Col, Card, Form, CheckboxGroup 这几个组件
在 content.vue 中，这样写
// 引入组件
import { Row, Col, Card, Form, Checkbox } from 'ant-design-vue'
// 引入样式，我没用 less，所以没引 less，大家按自己需求引样式，具体的看 antd 的包
import 'ant-design-vue/lib/style/index.css'
import 'ant-design-vue/lib/grid/style/index.css'
import 'ant-design-vue/lib/form/style/index.css'
import 'ant-design-vue/lib/card/style/index.css'
import 'ant-design-vue/lib/checkbox/style/index.css'
// CheckboxGroup 和 FormItem 是 Checkbox 以及 Form 的属性，需要自己定义下
const CheckboxGroup = Checkbox.Group
const FormItem = Form.Item
// 把要使用的组件写到 components 中
export default {
components: {
Row,
Col,
Card,
Form,
CheckboxGroup,
FormItem,
},
}
<template>
<Row>
<Col>
<Card>
<Form>
<FormItem>
<CheckboxGroup
:options="options"
:default-value="defaultValue"
@change="change"
>
</CheckboxGroup>
</FormItem>
</Form>
</Card>
</Col>
</Row>
</template>
很简单，把组件引入，再把样式引入就可以了，样式需要仔细看看，样式文件在哪里
三个注意点：
FormItem这种，是Form的属性，所以不能直接从antd引入，需要先引入Form，再自己定义一下antd的每个组件样式，都会去引一个基本样式，在node_modules/ant-design-vue/lib/style这个目录下，所以可以在全局单独引入下（会影响所有页面布局），也可以在每个组件引一次，我这里选择在每个组件引一次（不想被 antd 的基础样式影响）- 像
Row、Col这种，样式是重复的，是在Grid下的，所以需要去引Grid的样式
三、按需引入方法②(全局引入组件)
第二种按需引入，在全局引入组件，全局引入样式（也可以单独组件内引入样式），我这里是全局引入
第一步：把 Plugins 文件夹下的 antd-ui.js 恢复（别打我）
// antd-ui.js
import Vue from 'vue'
// 跟方法①一样，引入组件，引入样式
import { Button, Card, Form, Checkbox, Row, Col } from 'ant-design-vue'
import 'ant-design-vue/lib/style/index.css'
import 'ant-design-vue/lib/button/style/index.css'
import 'ant-design-vue/lib/grid/style/index.css'
import 'ant-design-vue/lib/form/style/index.css'
import 'ant-design-vue/lib/card/style/index.css'
import 'ant-design-vue/lib/checkbox/style/index.css'
;[Button, Card, Form, Form.Item, Checkbox, Checkbox.Group, Row, Col].forEach(
(ele) => Vue.use(ele)
)
全局引入的话，组件使用的时候，需要用 kebab-case(短横线命名)
<template>
<a-row>
<a-col>
<a-card>
</a-ard>
</a-col>
</a-row>
</template>
第二步：在 nuxt.config.js 中把 antd 添加上
plugins: ['@/plugins/antd-ui']
四：总结
- 项目中不是每个页面都用到
antd，且对性能要求较高，可以使用方法①； - 项目中
antd用的比较多，对性能也有要求，可以用方法②； - 项目页面不想被
antd的基础样式影响，那么建议组件内引入样式的方法 - 觉得每次样式单独引入较为繁琐，且不介意被
antd样式影响的，在 nuxt.config.js 中全量引入样式 -
css: ['ant-design-vue/dist/antd.css']
