uniapp安装vant并解决样式引入报错

背景

unaipp引入vant组件库的时候，按照官网的步骤，一直报错，本篇文章参考官网以及样式引入报错相关文章综合写出

一、 安装vant

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

二、引入组件

2.1. 方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

• 安装插件babel-plugin-import

# 安装插件
npm i babel-plugin-import -D

• 项目根目录新建.babelrc文件，代码如下：

// 在.babelrc 中添加配置
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

• 对于使用 babel7 的用户，可以新建 babel.config.js ,代码如下

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

• main.js引入并注册组件

// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
import Vue from 'vue'
Vue.use(Button)

• App.vue引入样式

<style>
	@import 'vant/lib/index.css';
</style>

2.2. 方式二. 手动按需引入组件

• main.js引入并注册组件

import Button from 'vant/lib/button';
import Vue from 'vue'
Vue.use(Button)

• App.vue引入样式

<style>
	@import 'vant/lib/index.css';
</style>

2.3. 方式三. 导入所有组件

• main.js引入并注册组件

import Vue from 'vue';
import Vant from 'vant';

Vue.use(Vant);

• App.vue引入样式

<style>
	@import 'vant/lib/index.css';
</style>

三、样式引入报错的问题

不要按照官网，直接在main.js中引入样式文件，，转到App.vue中即可