Vue如何引用Vant组件

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

代码语言：javascript复制

npm i vant -S

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

代码语言：javascript复制

npm i babel-plugin-import -D

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

代码语言：javascript复制

{
  "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里面按需引入

代码语言：javascript复制

import { AddressEdit,Area,Skeleton} from 'vant';
Vue.use(AddressEdit).use(Area).use(Skeleton);

代码语言：javascript复制

<template>
 <van-skeleton title avatar :row="3" />
</template>

完成

babel.js

0 人点赞