移动端使用vant-ui，局部引入方案

安装

安装方式就不赘述了，按照官网方法。

问题

我是在vue-cli3.0基础上创建的项目，但是最后在配置

PostCSS

时出问题了，打包时报错：

Invalid options in vue.config.js: "plugins" is not allowed

，这个问题是在

vue.config.js

中配置需要通过

pluginOptions

中去配置。

// vue.config.js
module.exports = {
pluginOptions: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

局部引入组件

由于移动端用不到多少

vant

中的组件，如果将组件全部打包进去，

SPA

页面本来就首页加载比较慢（不包括

SSR

开发方式），所以就进行了局部引入,这样就不用在每个组件中去引入（过于繁琐），全部引入（打包过大，没必要）

// main.js
import Vue from 'vue'
import App from './App.vue'
import { Button, Toast } from 'vant'

Vue.config.productionTip = false

Vue.use(Button, Toast)

new Vue({
render: h => h(App),
}).$mount('#app')

这样就可以在组件中直接使用

vant

的组件了

// test.vue
<template>
<div class="test">
<van-button @click="handleClick">默认按钮</van-button>
</div>
</template>

<script>
export default {
name: 'Test',
methods: {
handleClick () {
this.$toast('别点了') // 入口文件引入Toast,默认会挂载到prototype上
}
}
}
</script>

• 点赞
• 收藏
• 分享
• 文章举报

userkevin 发布了1 篇原创文章 · 获赞 0 · 访问量 36 私信 关注