网站建设 设计提成,一共有多少网站,网站首页制作模板,安康市汉滨区新闻移动端vant
插件安装#xff08;按需导入#xff09; 重启生效
# 通过 npm 安装
npm i unplugin-vue-components -D# 通过 yarn 安装
yarn add unplugin-vue-components -D
导入基于 vite 的项目#xff1a;
如果是基于 vite 的项目#xff0c;在 vite.config.js 文件中…移动端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特殊点的ToastDialogNotify,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()
