vant-ui 按需引入

1.当我们在项目中使用vant的时候,首先安装vant-ui插件分别是:先安装vant-ui,再安装按需引入的插件

安装vant-ui
npm i vant --save
安装按需引入的插件
npm i babel-plugin-import -D

2.在min.js中引入vant

import 'vant/lib/index.css';
// 全局引入按需引入UI库 vant
import '@/plugins/vant'

3.在vant官网中找到按需引入并把它复制到在src目录下配置 .babelrc 文件中

注:可观看vant官网在复制:
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }

4.在src目录下创建一个plugin文件夹在文件夹里创建一个js文件.之后在建好得js文件中首先导入vue,在导入需要的vant-ui插件,通过vue.use() 全局注入
1.创建
vant-ui 按需引入_第1张图片

2.全局注入

// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List,Card, Cell,Swipe,Grid, GridItem, SwipeItem,Tag, Tabbar,Icon,Search, TabbarItem,Overlay} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Icon)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Card);
Vue.use(Tag);

Vue.use(Overlay);

Vue.use(Tabbar).use(TabbarItem)

你可能感兴趣的:(笔记,vue)