vue-7：组件库（移动端vant）（PC端element）

移动端vant

插件安装（按需导入） 重启生效

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

导入基于 vite 的项目：

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

eg：特殊点的：Toast，Dialog，Notify,ImagePreview组件，在使用函数组件时，unplugin-vue-components无法自动引入对应的样式，因此需要手动引入样式

基础组件中：Toast轻提示没样式：解决

反馈组件中：dialog弹出框没样式：解决

// 导入
import { showToast } from 'vant';

// 导入样式使用
import 'vant/es/toast/style';
import 'vant/es/dialog/style';

 样式穿透 :deep()

PC端组件库

• vue2 推荐 element UI

• vue3 element plus记得安自动导入

  • 安装element

    • npm install element-plus --save

  • 安装按需导入，自动导入这俩插件

    • npm install -D unplugin-vue-components unplugin-auto-import

  • 配置vite.config.ts 官网

    • 

  • 安装 Icon 图标配置 ：npm install @element-plus/icons-vue

    • 

  • 通知得导入样式

                import { ElNotification } from 'element-plus'              

                import 'element-plus/es/components/notification/style/css'

样式穿透 :deep()