本次基于vite的项目
安装vant组件库
1.pnpm add vant
2.安装 unplugin-vue-components 插件(官方说:它可以自动引入组件,并按需引入组件的样式。)
3.配置文件 vite.config.ts
+ import Components from 'unplugin-vue-components/vite';
+ import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
vue(),
Components({
+ dts: false, // 关闭自动生成类型声明文件
+ resolvers: [VantResolver()]
})
],
server: {
port: 3200,
open: true
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
4.此时就可以使用vant里面的组件啦,但是当你使用到轻提示时,你就会发现咋搞都不出来,这时候你按需导入注册也是不管用的,翻阅文档你就会发现个别组件是需要单另引入样式的,在main模块下引入为公共样式更方便咯。