首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue如何引用Vant组件

Vue如何引用Vant组件

作者头像
明知山
发布2020-09-03 10:19:18
1.2K0
发布2020-09-03 10:19:18
举报
文章被收录于专栏:前端开发随笔前端开发随笔

这里是Vant的官方文档https://youzan.github.io/vant-weapp/#/intro 第一步 使用终端安装Vant

npm i vant -S

第二步 使用终端安装babel-plugin-import(在编译过程中将 import 的写法自动转换为按需引入的方式)

npm i babel-plugin-import -D

第三步 Vue找到.babelrc 中添加配置 有些系统默认配置的也在里面,新的项目可直接拷贝

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import",
    {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }
  ]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]

    }
  }
}

第四步 引入个组件做测试 在main.js里面按需引入

import { AddressEdit,Area,Skeleton} from 'vant';
Vue.use(AddressEdit).use(Area).use(Skeleton);
<template>
 <van-skeleton title avatar :row="3" />
</template>

完成

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-07-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档