uniapp+v2使用vant前要：一直在v3+ts，习惯vant的库了，有个老项目想引入使用一直失败。记录引入 van

前要：一直在v3+ts，习惯vant的库了，有个老项目想引入使用一直失败。记录引入

vant官网：vant-weapp.uihtm.com/#/home

vantvue2官网：vant-weapp.uihtm.com/vant/v2/#/z…

vant 2.x（npm 版本）是为 H5 设计的，而 vant-weapp 是专门为微信小程序/uni-app 设计的版本，两者不能混用.使用小程序（两个都需要npm下来）

vant-weapp 仅支持小程序/App ,暂不支持H5 。所以npm下来的2.0的vant是不能用的，只能使用vant-weapp

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

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

# Vue 2 小程序项目，安装依赖：h5只需要第一个，小程序需要两个npm
npm i vant@latest-v2 -S 这一步不能少，不然在main.js会找不到vant
npm i vant-weapp -S  创建wxcomponents目录（把npm下载下来的lib目录下面所有文件复制进去，dist复制到同级目录

引入组件（h5）

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

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

babel-plugin-import 只对 npm 版本的 vant（h5）有效，对 vant-weapp（小程序）无效

重点：

babel-plugin-import 是编译时转换 import 语句
vant-weapp 是微信小程序原生组件，通过 usingComponents 配置加载，不需要 import

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

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

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

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式  【到这h5就可以用了，有些ui库也是到这
就可以用了，vant-weapp特殊一点】

import { Button } from 'vant';
Vue.use(Button)

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

详解

创建 babel.config.js【h5】

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

或者
module.exports = {
  presets: ['@vue/app'],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

main.js 中 import 和 Vue.use()【h5】
更新 main.js【需要哪些组件就注册哪些】【h5】

babel-plugin-import 会自动将 import { Button } from 'vant' 转换为按需引入的形式

如果你使用 TypeScript，可以使用 ts-import-plugin 实现类似功能

import { Button, Field, Cell, CellGroup, Icon, Dialog } from 'vant'
Vue.use(Button)
Vue.use(Field)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Icon)
Vue.use(Dialog)

在 pages.json 中全局注册一次【小程序】

    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents": {
                "van-button": "/wxcomponents/button/index",
                "van-field": "/wxcomponents/field/index",
                "van-cell": "/wxcomponents/cell/index",
                "van-cell-group": "/wxcomponents/cell-group/index",
                "van-icon": "/wxcomponents/icon/index",
                "van-dialog": "/wxcomponents/dialog/index",
                "van-rate": "/wxcomponents/rate/index",
                "van-slider": "/wxcomponents/slider/index",
                "van-toast": "/wxcomponents/toast/index"
        }
    },

3. 所有页面直接使用，无需重复引入【小程序】

如果你需要更多组件，只需要在 globalStyle.usingComponents 中继续添加即可！【小程序】

小程序用不上import和上面的use注册

4.路径配置【小程序】

在项目根目录创建 wxcomponents 目录 uni_modules（npm i vant-weapp -S下载的包里面找，每个人不一样，我是提前创建好的cv来用） -》 wx-vant-components -》wxcomponents -》wx-vant-components 下面的文件全部复制到wxcomponents

样式引入App.vue

	/*每个页面公共css */
	@import "/wxcomponents/dist/common/index.wxss";

最后提一句： Vue3 + TypeScript 的小程序项目不能使用 import + Vue.use() 的方式引入 vant。这是由小程序的架构决定的，与 Vue 版本无关。只要是小程序就需要vant-weapp