按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue

港控/mmm° 2021-12-14 20:57 739阅读 0赞

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com]  
> 2、后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。  
> 3、个人博客本篇文章地址 ： [https://www.xdx97.com/article/647074798064631808][https_www.xdx97.com_article_647074798064631808]  
> 1、首先我在创建项目的时候就选择了antd这个框架，所以插件那块会有一个antd-ui.js  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]  
> 如果没有的话，可以npm安装一下antd，然后在plugins目录下建立一个antd-ui.js  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

npm i ant-design-vue

#### 配置按需导入 ####

**1、配置JS**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

import Vue from 'vue'
    import Carousel from 'ant-design-vue/lib/carousel'; // 加载 JS
    import Spin from 'ant-design-vue/lib/spin'; // 加载 JS
    import Tag from 'ant-design-vue/lib/tag'; // 加载 JS
    import Icon from 'ant-design-vue/lib/icon'; // 加载 JS
    import Input from 'ant-design-vue/lib/input'; // 加载 JS
    import Button from 'ant-design-vue/lib/button'; // 加载 JS
    import Pagination from 'ant-design-vue/lib/pagination'; // 加载 JS
    import Modal from 'ant-design-vue/lib/modal'; // 加载 JS
    import Tooltip from 'ant-design-vue/lib/tooltip'; // 加载 JS
    import Steps from 'ant-design-vue/lib/steps'; // 加载 JS
    import Collapse from 'ant-design-vue/lib/collapse'; // 加载 JS
    import Divider from 'ant-design-vue/lib/divider'; // 加载 JS
    import message from 'ant-design-vue/lib/message'; // 加载 JS
    
    
    
    Vue.use(Carousel)
    Vue.use(Spin)
    Vue.use(Tag)
    Vue.use(Icon)
    Vue.use(Input)
    Vue.use(Button)
    Vue.use(Pagination)
    Vue.use(Modal)
    Vue.use(Tooltip)
    Vue.use(Steps)
    Vue.use(Collapse)
    Vue.use(Divider)
    Vue.prototype.$message = message;
    message.config({
        top: `70px`,
        duration: 2,
        maxCount: 3,
    });

**2、配置css**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]  
**最终效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5]

[https_www.xdx97.com]: https://www.xdx97.com/
[https_www.xdx97.com_article_647074798064631808]: https://www.xdx97.com/article/647074798064631808
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20211214/0a90fa698d17405daa5c174d213f360e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20211214/c0ac07bc5cf544309cd1d37fefb77444.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20211214/e190f7d6d00c43a1b3c15e3a518d5e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20211214/11e92ca9a984465aadb0d8197dc85f3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]: /images/20211214/21c87cb574584b3382aa82124cedfafa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5]: /images/20211214/ec11ce45abc94691b71dc4c37a533fb3.png