vue项目中安装和使用vant组件

2019年9月16日 173次阅读 来源: Jello

最近使用vue在开发微信公众号内嵌H5页面，采用一些组件可快速提高开发效率。vant是一款基于Vue构建的移动UI组件（https://youzan.github.io/vant…），提供非常友好的API开发文档及可视化页面，接下来在vue-cli构建的项目中安装和使用

1.进入项目目录运行安装命令
npm i vant -S
《vue项目中安装和使用vant组件》

安装成功后，在package.json中可以看到依赖

  "dependencies": {
    ...
    "vant": "^2.0.9", 
    ...
  }

2.安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
《vue项目中安装和使用vant组件》

3.在.babelrc文件中配置plugins（插件）

 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "import",
      [
        {
          "libraryName": "vant",
          "style": true
        }
      ]
    ]
  ]

《vue项目中安装和使用vant组件》

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)
    原文作者：Jello
    原文地址: https://segmentfault.com/a/1190000019822589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞