按需引入Vant

最新推荐文章于 2023-08-04 23:55:30 发布

刚上道的小白_

最新推荐文章于 2023-08-04 23:55:30 发布

阅读量523

点赞数

本文链接：https://blog.csdn.net/FengYang_/article/details/108265255

版权

封装Vant

1. 第一步

	在根部babel.config.js文件里面写入以下


// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
  plugins
}

2. 第二步

在min.js里面引入

import 'vant/lib/index.css';
// 全局引入按需引入UI库 vant
import '@/plugins/vant'

3. 第三步

在src里面创建一个文件夹plugins，在文件夹里面创建一个vant.js文件

里面写入以下（需要用什么就引入什么）

// 按需全局引入 vant组件
import Vue from 'vue'
// 导航栏
import { NavBar ,} from 'vant';
// 轮播
import { Swipe, SwipeItem } from 'vant';


Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);