您现在的位置是：首页 >其他 >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弹出框没样式：解决

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()