在 Vue 中使用Vant

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

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

  1. 在项目中加入 Vant 依赖库

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

1
yarn add vant
  1. 加入开发依赖

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

1
yarn add --dev babel-plugin-import

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"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"
},
  1. 修改 babel.config.js 文件,引入 babel-plugin-import。如下:
1
2
3
4
5
6
7
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]

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

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

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

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

  1. 引入 Button 组件
1
import { Button } from 'vant';
  1. 在 LoginPage 组件中声明 components:
1
2
3
4
5
6
export default {
name: 'LoginPage',
components: {
[Button.name]: Button
}
}

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

  1. 在模版中加入 Button
1
<van-button type="primary" size="small" v-on:click="onClick"> Login </van-button>

本文标题:在 Vue 中使用Vant

文章作者:梅老师

发布时间:2019年12月30日 - 09:12

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/vue/vue-use-vant/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。