vant官网

vant2.0官网

使用vant

参考vant官网–>快速上手–>通过npm安装/引入组件

[1]导入vant 的所有组件

• [1] 安装 vant ：npm i vant -S (通过此命令安装的是最新版本)

• [2] 导入组件

  // [1]引入vant
  import Vant from 'vant'
   // [2]引入vant的样式文件；
  import 'vant/lib/index.css'
  // [3]全局注册 vant 组件
  Vue.use(Vant)
  

• [3]检验是否安装成功

  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    

[2] 按需引入组件

• [1] 安装 vant ：npm i vant -S (通过此命令安装的是最新版本)

• [2] 导入组件

   // [1] 按需引入组件
   import { Button} from 'vant';
   // [2] 按需引入样式文件
   import 'vant/lib/button/style';
   // [3] 全局注册组件
   Vue.use(Button);
  

• [3]检验是否安装成功

  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    

[3]自动按需引入组件

前提：需要借助babel-plugin-importbabel插件，该插件的作用是在源码编写阶段或者 babel 编译 js 阶段，通过部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。

• [1]安装插件

  npm i babel-plugin-import -D
  

• [2]在babel配置文件中添加配置

   module.exports = {
     plugins: [
        ['import', {
           libraryName: 'vant',
           libraryDirectory: 'es',
           style: true
        }, 'vant']
   ]
  }
  

• [3]使用

  // [1] 按需引入组件
   // 这里引入的组件在经过编译后插件会自动将代码转化为方式二中的按需引入形式
    import { Button } from 'vant';
    // [2] 全局注册组件
    Vue.use(Button)
  

• [4]检验是否安装成功
  • 在app.vue中写一个按钮，查看是否显示且样式正确；

  •    <van-button type="primary">主要按钮</van-button>
    

使用过程中遇到的问题

[1]问题1-版本冲突

问题：在下载 vant 时发现报错unable to resolve dependency tree；
原因：我此时使用的vue版本为2.6.14版本，因此如果下载vant3会出现版本冲突。
解决：下载对应版本的vant;

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

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