Vant 安装使用

Vant 是开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

1.首先，我们需要安装Vant，在现有的Vue2.0的项目中，可以通过npm安装

安装命令为 npm i vant -S

npm i vant -S

 

npm i 只下载文件，npm i -S 不仅下载文件，还会写入 package.json,以后 npm i 的时候，会读取 package.json 自动安装。

2.安装完成后，可以选择在main.js中引入vant使用，这样是全局引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "vant";//引入vant
import "vant/lib/index.css";//引入vant的样式

Vue.use(Vant);//使用vant

Vue.config.productionTip = false;

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

当只需要其中几项时，可以按需引入，{}为解构赋值

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "vant/lib/index.css"; //引入vant的样式
import { Button } from "vant"; //按需引入
Vue.use(Button); //使用

Vue.config.productionTip = false;

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

3.引入成功后，复制vant官网按钮组件，可以看到样式如下

接下来就可以采用最朴素的方式使用vant了