vue项目引入vant后不生效问题的解决办法

之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。其次是引入 vant.js import 然后 Vue.use 在main.js中引入。其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。以为这样就完了，结果就是样

玩代码的老秦

5812人浏览 · 2022-08-13 14:28:13

玩代码的老秦 · 2022-08-13 14:28:13 发布

之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。

按照正常的方式：

首先是安装 npm i vant@2.12.48 -S

其次是引入 vant.js import 然后 Vue.use 在main.js中引入

以为这样就完了，结果就是样式不生效。原因就是缺少样式文件的引入。

但是，我们这里是按需引入，不能直接import样式文件，需要在Babel配置文件引入插件：

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

启动项目会提示babel-plugin-import错误，其实是需要安装babel-plugin-import的：

npm i babel-plugin-import -S

安装后，再启动，就成功了！

其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。

更换版本跟安装是一样的：

npm install vant@2.12.48 -S

会自动更换相关的连接。