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