关于vue.js:vuevant按需导入

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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!