第一步:需要我们创建一个vue-cli脚手架项目,步骤如右侧文章链接(vue-cli脚手架安装步骤)

第二步:通过cd ...进入我们的项目中,开始引入我们的vantUi库

安装Vant(进入项目中)

npm i vant -S:这是简写形式。

npm install vant --save:这是完整写法。

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装。

npm install vant --save --registry=https://registry.npm.taobao.org

引入组件

方式一. 使用 babel-plugin-import (推荐)

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

 在.babelrc中配置plugins中插入组件

// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

在项目中使用组件方式:

按需使用Vant组件1:

不在src/main.js里加入代码,而在需要的组件/页面中单独引入(按需引入):

 

按需使用Vant组件2

我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button组件,在src/main.js里加入下面的代码:

import { Button } from 'vant'

Vue.use(Button)

有了这段代码之后,我们就可以在需要的组件页面中加入Button了.

<van-button type="primary">主要按钮</van-button>

方式三. 导入所有组件

在src/main.js里加入下面的代码:

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';

Vue.use(Vant);

 注意:配置 babel-plugin-import 插件后将不允许导入所有组件

 

 

 若有不足请多多指教!希望给您带来帮助!

Logo

前往低代码交流专区

更多推荐