Vue2中按需引入vant2

Vue 2 项目,安装 Vant 2:

npm i vant@latest-v2 -S

安装vant官方提供的插件

# 安装插件
npm i babel-plugin-import -D

在 babel.config.js 中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

在src文件夹下新建plugins文件夹,添加vant.js文件,注册你需要的组件

import Vue from 'vue'
import { NavBar,Button  } from "vant";
Vue.use(NavBar)
Vue.use(Button);

main.js中引入

// 引入vantUI(按需引入组件)
import '@/plugins/vant'

在代码中使用即可在页面中显示

<van-button type="info">信息按钮</van-button>

你可能感兴趣的:(javascript,vue.js,前端)