vue+vant(按需导入)

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在使用vue+vant进行开发的时候,我们可能不会使用到那么多的组件,很多的时候我们都是按需导入,下面我来分享一下vue+vant按需导入的方法,希望对你有所帮助。
4.废话不多说,直接上操作:

//使用 npm 模式安装 vant
npm i vant -S

5.方法一,手动按需导入,在main.js中添加如下代码:

//方法一,手动按需导入:
import { Switch,Button } from 'vant';
import 'vant/lib/button/style';
import 'vant/lib/switch/style';

Vue.use(Button);
Vue.use(Switch);

6.方法二,自动按需导入:

//方法二,自动按需导入:
//在终端执行如下命令(管理员身份):
npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

然后在 babel.config.js 中配置
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

在mian.js中添加如下代码:

import { Switch,Button } from 'vant';
Vue.use(Switch);
Vue.use(Button);

7.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!