关于vue.js:vuevant按需导入

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

//应用 npm 模式装置 vantnpm 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,心愿对你有所帮忙,让咱们一起致力走向巅峰!