Vant 在vue中 按需引入和全部加载

1. 问题描述: 在vue-cli 2.x 脚手架中练习使用vant组件库, 在main.js用于组件的时候 报错 Vant is not defined

因为我是测试练习vant的 ; demo分为 全部加载 和按需加载两种方式

按需加载

1.首先搭建vue脚手架,
2.下载vant
3. 下载 babel-plugin-import (按需加载使用)
3.当下载好了以后,就可以在 .vue文件中使用了
下载vant: cnpm install vant -S
下载babel-plugin-import: cnpm install babel-plugin-import -S
首先引入: (官方文档):

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

我的写法:

<template>
	<van-popup v-model="show" position="top" :style="{ height: '30%' }" />
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
</template>
<script>
import { Popup } from "vant";
import { Cell, CellGroup } from "vant";

components:{
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
}
</script>

大家可以在计算属性中打印一下你引入的组件,看看里面有什么了
关于在components 中 [cell.name] :cell 这种写法 我想应该是这样

一、如果属性名称是常量（固定值），获取属性值的方式有：
对象.属性名称
对象[属性名称]
二、如果属性名称是一个变量（不固定值），获取属性值方式只能是：
对象[属性名称]

全部加载

第一步: 下载vue脚手架
vue init webpack 项目名;

第二步: 下载vant

cnpm install vant -S
在main.js 中 以引入并使用
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant);

-未修改之前的 .babelrc 文件

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

第三部: 安装babel-plugin-import (这部是按需加载的时候需要用到的,如果你全部引入了 就不需要)

 cnpm install babel-plugin-import -S

-在 下载 babel-plugin-import 后修改 .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","style":true}]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

第四.如果你安装了babel-plugin-import 这个 然后需要把这个卸载掉, 然后重新项目; 在你卸载掉babel-plugin-import 这个的时候 .babelrc这个文件也要恢复到一开始没修改的样子偶(就是上面的’'未修改之前的 .babelrc 文件)

cnpm uninstall babel-plugin-import -S

接下来重启项目就应该可以了