最近使用 vue 在开发微信公众号内嵌 H5 页面,采用一些组件可快速提高开发效率。vant 是一款基于 Vue 构建的移动 UI 组件(https://youzan.github.io/vant…),提供非常友好的 API 开发文档及可视化页面,接下来在 vue-cli 构建的项目中安装和使用
1. 进入项目目录运行安装命令 npm i vant -S
安装成功后,在 package.json 中可以看到依赖
"dependencies": {
...
"vant": "^2.0.9",
...
}
2. 安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D
3. 在.babelrc 文件中配置 plugins(插件)
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"import",
[
{
"libraryName": "vant",
"style": true
}
]
]
]
4. 按需要引入 vant 组件,比如我们要在 index.vue 组件中使用 Button 组件,我们可以先在组件中引入
<template>
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
</template>
<script>
import {Button} from 'vant'
export default {
components: {[Button.name]: Button
}
}
</script>
5. 若多个页面用到同一个组件,可以在 main.js 中全局引入
import {Button} from 'vant'
Vue.use(Button)