vant组件的引入方式

vant组件的引入方式

这里接着上一篇（vue cli3脚手架创建vant项目环境）

1.全局导入所有组件

注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件
在main.js里面写入

import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 

在页面里面使用
这里拿按钮和Cell单元格举例：

运行效果如下：

2.自动按需引入组件

首先安装 babel-plugin-import 插件
回到

搜索 babel-plugin-import 并安装 或者使用终端命令行安装

npm install babel-plugin-import --save

1.在 babel.config.js里面配置plugins

2.按需使用

<template> <div class="hello"> <h1>{
     { msg }}</h1> <!-- 按钮 --> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> <!-- SwitchCell 开关单元格--> <van-cell-group> <van-switch-cell v-model="checked" title="标题" /> </van-cell-group> </div> </template> <script> import Vue from 'vue'; //按钮 import {  Button } from 'vant'; Vue.use(Button); //SwitchCell 开关单元格 import {  SwitchCell } from 'vant'; Vue.use(SwitchCell); import {  Cell, CellGroup } from 'vant'; Vue.use(Cell).use(CellGroup); export default {  data(){  return{  msg:'你好vue!!!', checked: true, } } } </script> 

运行效果如下：

3.手动按需引入组件（不使用插件的情况下）

1.引入组件及样式

//按钮 import Button from 'vant/lib/button'; import 'vant/lib/button/style'; 

2.挂载组件 （注意：名字是与标签名对应的）

components:{  'van-button':Button, 'van-switch-cell':switchCell, 'van-cell-group':cellGroup } 

3.使用组件

<!-- 按钮 --> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> 

这种方式看vant官方文档太简单的描述 着实没明白 原来想起来在vue学习笔记有写过组件引用方式 总算成功了。

这里我只描述了一个button组件 实际我引用了3个组件 方法一样就不赘述了 。
运行效果如下：

完整代码如下：

<template> <div class="hello"> <h1>{
     { msg }}</h1> <!-- 按钮 --> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> <!-- SwitchCell 开关单元格--> <van-cell-group> <van-switch-cell v-model="checked" title="标题" /> </van-cell-group> </div> </template> <script> //按钮 import Button from 'vant/lib/button'; import 'vant/lib/button/style'; //SwitchCell 开关单元格 import switchCell from 'vant/lib/switch-cell'; import 'vant/lib/switch-cell/style'; //cell-group import cellGroup from 'vant/lib/cell-group'; import 'vant/lib/cell-group/style'; export default {  data(){  return{  msg:'你好vue!!!', checked: true, } }, components:{  'van-button':Button, 'van-switch-cell':switchCell, 'van-cell-group':cellGroup } } </script> 

用vant写了一个简单的案例：

ok，vant组件库使用就写到这里。