第一步:先检查是否成功安装vant,在package.json中查看
没有安装的有两种方法:
1、npm
npm i vant -S
npm i babel-plugin-import -D
2、终端-命令行,输入vue ui,打开图形化界面,选择依赖安装
第二步 :检查babel.config.js
重点
第三步:vue.config.js,检查有没有设置过这个属性“requireModuleExtension”
vant-ui样式出不来基本是因为这个 requireModuleExtension:false属性,其他的第三方组件库就不知道会不会也和这个属性有关了
相关代码
// 这行放在头部
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
css: {
extract: IS_PROD,
requireModuleExtension: true,// 去掉文件名中的 .module,修改为false会导致vant-ui样式出不来
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {
// `globalVars` 定义全局对象,可加入全局变量
globalVars: {
}
}
}
},