https://www.pudn.com/news/6259411392dc900e62b86302.html
自己引入不了，很多方法试了试也没用，记录一下解决方法
修改main.js文件为：
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import router from ‘./router’;
import store from ‘./store’;
import ‘vant/lib/index.css’;
import loadVant from ‘./libs/vant’;
loadVant(createApp(App)
.use(store)
.use(router))
.mount(’#app’);
修改babel.config.js文件为：
module.exports = {
presets: [
‘@vue/app’,
],
plugins: [
[‘import’, {
libraryName: ‘vant’,
libraryDirectory: ‘es’,
style: true,
}, ‘vant’],
],
};
然后在src文件夹新建文件夹libs，libs下新建文件vant.js,内容为：
import { Button, Card } from ‘vant’;
/**
挂载Vant组件,按需引入
@param {App} appElement
*/
const loadVantComponets = (appElement = null) => {
if (appElement && typeof appElement.use === ‘function’) {
return appElement.use(Button).use(Card);
}
throw new Error(‘AppElement is not a validate object~’);
};
export default loadVantComponets;
以上是拷贝来的，但是我的项目里面不用修改babel.config.js也可以，所以我就没修过，也不知道啥原因
知道原因了，因为main.js中样式已经全局写入了，如果不写全局样式可以安装插件
yarn add babel-plugin-import 或 npm i babel-plugin-import
安装完插件就需要在babel.config.js中写入以下内容就可以了
plugins: [
[‘import’, {
libraryName: ‘vant’,
libraryDirectory: ‘es’,
style: true,
}, ‘vant’],
],
=================================
以下是我项目中改到的地方：
src下创建vantUI目录，创建index.js文件，内容如下：
import { Button, Icon } from 'vant';
const loadVantComponets = (appElement = null) => {
if (appElement && typeof appElement.use === 'function') {
return appElement.use(Button).use(Icon);
}
throw new Error('AppElement is not a validate object~');
};
export default loadVantComponets;
main.js如下：
import { createApp } from 'vue'
import App from './App.vue'
// 引入vue-router
// import VueRouter form 'vue-router'
import router from './router'
import store from './store'
// // 全局引入vant
// import vant from 'vant'
// import 'vant/lib/index.css'
// 按需引入vant
import 'vant/lib/index.css'
import loadVant from './vantUI/index.js'
// createApp(App).use(store).use(router).mount('#app')
// 全局引入vant
// createApp(App).use(store).use(router).use(vant).mount('#app')
// 按需引入vant
loadVant(createApp(App).use(store).use(router)).mount('#app')
yarn add babel-plugin-import
