问题描述

在Vue2项目当中，按需引入Vant组件会出现CSS样式不显示的问题

解决方案

在使用vant组件的时候，出现样式不显示的问题，首先需要确保自己使用的vant组件的版本，由于项目开发使用的是Vue2所以对应的vant组件不能是最新版本，需要使用vant2

	yarn add vant@latest-v2 -S
	or
	npm i vant@latest-v2 -S

其次，需要在main.js入口文件当中，引入组件，并且使用。在项目开发中，单独建立了一个ui文件夹，负责管理所有的vant组件。

ui/index.js

import { Button } from 'vant';

const vant = {
    install: function (Vue) {
        // 标签栏
        Vue.use(Button);
    }
}

export default vant

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入vant
import vant from '@/ui'
// 使用vant
Vue.use(vant)

Vue.config.productionTip = false

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

由于vant组件我们采用的是默认暴露的形式，所有需要下载一个插件，并且配置babel，才能自动帮助我们按需引入

yarn add babel-plugin-import -S
or
npm i babel-plugin-import -S

接着在babel.config.js文件当中进行配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

修改配置文件之后，需要重新启动项目，就可以正常的显示vant组件的相关样式了