项目安装组件库

1、组件库的变化

1.1element

      vue2 https://element.eleme.cn/#/zh-CN     element-ui
      vue3 https://element-plus.gitee.io/zh-CN/ element-plus

1.2antd

      vue2 https://antdv.com/components/overview
      vue3 https://www.antdv.com/docs/vue/migration-v3-cn

1.3vant

      vue2 https://vant-contrib.gitee.io/vant/v2/
      vue3 https://vant-contrib.gitee.io/vant/#/zh-CN

  安装vant组件库

    npm i vant

  按需引入vant组件库

    npm i unplugin-vue-components -D

  修改配置文件 修改后重启项目

2、组件注册方式

2.1常用方式一

      import { Button, Cell, CellGroup } from "vant";

      export default defineComponent({
        components: {
          VanButton: Button,
          VanCell: Cell,
          VanCellGroup: CellGroup,
        },
        setup() {
          return {};
        },
      });

2.2常用方式二

<script setup>
    import { Button, Cell, CellGroup, Icon, Toast } from "vant";
<script/>

2.3特别提醒

2.3.1.Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。

      在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。比如

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

        详情可见官网 https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#4.-yin-ru-han-shu-zu-jian-de-yang-shi

2.3.2在使用<script setup>中到如组件时要注意

1. 使用组件不要用单标签
2. 使用组件标签名不要省略 要用全称 <van-cell-group> 或者 <VanCellGroup>
3. 由于导入的是Button 但是使用的是van-button所以eslint会检测、报错 那么我们要让eslint忽略这个问题 // eslint-disable-next-line no-unused-vars

<van-cell-group>
    <van-cell title="单元格" value="内容">
    </van-cell>
    <van-cell title="单元格" value="内容">
    </van-cell>
</van-cell-group>
    // eslint-disable-next-line no-unused-vars
import { Button, Cell, CellGroup, Icon, Toast } from "vant";

3、移动端响应式适配

3.1选择插件

      npm install postcss-px-to-viewport --save-dev

3.2修改配置文件

3.3 重启项目 修改组件bug

3.4. 处理vant自定义样式的几种方式

第一种

<style lang="less">
    :root {
        --van-dialog-border-radius: 8px;
    }
</style>

第二种 

<style lang="less" scoped>
    :deep(.van-button) {
        --van-button-primary-background-color: red;
    }
</style>

第三种 通过 ConfigProvider 覆盖

第四种 通过jsx代码块 自定义组件

第五种 自定义图标的处理    

1. 下载图标 放大
2. 使用自定义图标库
3. 插槽