在vue-cli脚手架中vantUI

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/muzidigbig/article/details/81121647

第一步：需要我们创建一个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 插件后将不允许导入所有组件

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