4.vue中UI框架

4.1 常用框架介绍

PC桌面端UI框架：

1. iview          （用户评分高功能多炫酷，解决和避免了其他UI框架出现的一些小问题）
2. bootstrap  （使用用户最多）
3. ElementUI  （饿了么团队研发，使用较多不过里还有些小bug）
4. ant design  (阿里的)

手机端UI框架：

1.BUI       
   http://www.easybui.com/docs/  很不错官网有视频介绍。视频里有介绍非常非常实用的工具，建议去看官网视频。
这个框架有现成的模板只需要一个创建模板的命令就可以创建一个大致的具有交互功能的页面。
2.vux  
  vux 基于WeUI和Vue(2.x)开发的移动端UI组件库
  基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。
3.Mint UI
  Mint UI 由饿了么前端团队推出的，Mint UI 是一个基于 Vue.js 封装的移动端组件库
4.Vant UI

4.2 Vant UI 框架介绍

4.2.1 css组件使用

1.安装Vant UI
  npm i vant -S
2.main.js 导入MintUI，并注册到Vue
  import Vue from 'vue'
 //全局引入Vant UI的样式以及组件库
 import 'vant/lib/index.css';
 import Vant from 'vant';
 Vue.use(Vant);
  var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render:e=>e(app)
  })
3.app.vue
<template>
    <div>
        <van-button type="default" @click="showPopup">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <van-popup v-model="show">内容</van-popup>
    </div>
</template>

4.2.2 按需导入组件

//1.安装babel-plugin-import插件
    npm i babel-plugin-import -D
//2.修改babel的配置文件
    {
    "presets": [
        "env",
        "stage-0"
    ],
    "plugins": [
        "transform-runtime",
        [
            "import",
            {
                "libraryName": "vant",
                "libraryDirectory": "es",
                "style": true
            }
        ]
    ]
}
 //3.修改main.js
//按需加载 用到什么就去引入什么
import { Button,Popup,Form,Field } from 'vant';
Vue.use(Button);
Vue.use(Popup);
Vue.use(Form);
Vue.use(Field);