Installation, on-demand introduction, global introduction and style modification of Vant component library

Table of contents

1. Download and install

2. Global introduction: introduced in the main.js file

3. Import on demand: introduce it in the main.js file (recommended)

4. Manually introduce components on demand: introduce them into the page where the component is used

5. Introduce other content: (Configure according to project requirements)

6. Modify the original style of the component:

---

1. Download and install

  1.1 Install Vant:

      Vue 3 project, install the latest version of Vant: npm i vant -S

      Vue 2 project, install Vant 2: npm i vant@latest-v2 -S

  1.2 Install the plug-in: yarn add babel-plugin-import -D (babel.config.js configuration file)

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

  1.3 Postcss.config.js configuration file for adaptation:

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};

2. Global introduction: introduced in the main.js file

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3. Import on demand: introduce it in the main.js file (recommended)

import Vue from "vue";
import App from "./App.vue";
import "vant/lib/index.css";
import { Form, Field, Button, List, Icon, Toast } from "vant"; // 按需引入,优化加载速度

Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(List);
Vue.use(Icon);
Vue.use(Toast);

4. Introduce components on demand: introduce them into the page where the component is used

手动按需引入
1. 引入:
     import Button from 'vant/lib/button'; // button组件
     import 'vant/lib/button/style';               // button样式
2. 注册：
export default {
    components: { // 手动注册组件名
        VanButton: Button  //注册大驼峰，使用写短横线
       === //[Button.name]: Button
 }}
3. 使用：
<van-button type="primary">主要按钮</van-button>

自动按需引入：
1. 安装插件:yarn add babel-plugin-import -D
2. 在babel配置文件里 (babel.config.js):
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']]}
3. 全局注册 - 会自动按需引入
import { Button } from 'vant';
Vue.use(Button)

5. Introduce other content: (Configure according to project requirements)

import router from "./router"; // 路由对象
import "@/mobile/flexible"; // 适配，当网页宽度改变, 会修改html的font-size
import "vant/lib/index.css"; // vant组件样式
import "./assets/common.less"; // 引入公共样式
import "amfe-flexible"; // 页面适配，动态设置 REM 基准值
import "@vant/touch-emulator"; // 桌面端将mouse事件转换成touch事件
... ... （导入的vant组件）

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

6. Modify the original style of the component:

Method 1: Find the current class name through Google debugging tools, and modify it through ::v-deep style penetration (style nesting cannot be done without downloading less)

::v-deep {
  .van-field__label {
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .van-nav-bar {
    background-color: #1989fa;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}

Method 2: Manually add a class name to the tag and modify it, class = 'tab'

.tab {
   display: flex;
   justify-content: end;
   align-items: center;
}