在 Vue 中使用Vant

Vant 是有赞前端团队开发的一套针对移动端的Vue组件库。拥有丰富、时尚的组件和完善的文档。使用起来非常方便。本文简单描述如何在 Vue 中集成 Vant。

本文描述的是Vue 与 Vant 集成时最简单的一种方法，也是官方推荐的方法，适用于Vue 2.x, Vue Cli 3.x 以上的版本。更多集成方法可以参考 Vant官方

在项目中加入 Vant 依赖库

进入项目目录，执行以下命令(使用yarn作为包管理工具):

1	yarn add vant

加入开发依赖

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，为安装 babel-plugin-import，可以执行以下命令:

1	yarn add --dev babel-plugin-import

执行以上两步以后，可以观察项目中的 package.json 文件，应该看到来两个依赖库被加入,类似如下:

"dependencies": {
  "core-js": "^3.4.4",
  "vant": "^2.4.1",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "^4.1.0",
  "@vue/cli-plugin-eslint": "^4.1.0",
  "@vue/cli-service": "^4.1.0",
  "babel-eslint": "^10.0.3",
  "babel-plugin-import": "^1.13.0",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "vue-template-compiler": "^2.6.10"
},

修改 babel.config.js 文件，引入 babel-plugin-import。如下:

plugins: [
  ['import', {
    libraryName: 'vant',
    libraryDirectory: 'es',
    style: true
  }, 'vant']
]

完整的 babel.config.js 文件如下:

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

通过如下三步准备以后，就可以在组件中使用各种 Vant 组件了。例如:

我们想在一个名为 LoginPage.vue 的组件中使用 Vant 的Button 组件，则需要：

引入 Button 组件

1	import { Button } from 'vant';

在 LoginPage 组件中声明 components:

export default {
  name: 'LoginPage',
  components: {
    [Button.name]: Button
  }
}

[Button.name] 为Button 的名字，也就是在模版中会用到的标签名，对于Button来说就是: van-button

在模版中加入 Button

1	<van-button type="primary" size="small" v-on:click="onClick"> Login </van-button>