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

最新推荐文章于 2024-05-16 18:21:23 发布

原创

最新推荐文章于 2024-05-16 18:21:23 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #vant-ui #vant #局部引入

本文介绍了在vue-cli3.0项目中使用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)