How to install vant in uniapp

How to install vant in uniapp

Introduction: How to install vant in uniapp

Installing the Vant component library requires the following steps:

1. Enter the uniapp project directory in the terminal or command line.

2. Run the following commands to install Vant and style files using npm:

   npm i vant
   

   If your project uses the less preprocessor, you can install an additional less-loader:

   npm i less less-loader -D
   

3. App.vueAdd the following code at the top of the file in the uniapp project

   <style lang="less">
   /* 引入 Vant 样式 */
   @import "~vant/lib/index.less";
   </style>
   

4. Introduce vant in main.js:

   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css'; // 如果你使用less预处理器，这一句可以不要
   Vue.use(Vant);
   

5. So far, the Vant component library has been successfully installed and configured in uniapp.

Note: In order to avoid excessive package size, it is recommended to import only the components that need to be used on demand. At the same time, the official provides more ways to import component libraries on demand, you can refer to the corresponding chapters in the vant documentation.