7、vueJs基础知识07

UI组件库

　　element-ui和mint-ui 其实都是借鉴了bootstrap

　　bootstrap:
　　　　由twitter 开源
　　　　简洁、大方
　　　　官网文档https://www.bootcss.com/

　　　　基于 jquery（使用时必须先引入jq）

　　　　栅格化系统+响应式工具 (移动端、pad、pc)
　　　　按钮

　　使用工具　

　　　　bower 前端包管理器 jquery#1.11.1
　　　　　　自动解决依赖
　　　　npm node包管理器 jquery@1.11.1

都是由饿了么团队开源的一个基于vue 组件库
　　elementUI PC
　　MintUI 移动端

在运行vue项目中，更改页面时会自动刷新，是因为运行了两个

　　HMR：hot modal reload

　　WDS：web dev server

Element-ui

elementUI:
    如何使用

    官网:http://element.eleme.io/
使用:
1. 安装 element-ui
    npm i element-ui -S

    npm install element-ui --save-dev

    //   i    ->    install
    //   D     ->    --save-dev  开发依赖
    //   S    ->    --save         开发生产依赖
2. 引入   main.js    入口文件
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'（需要引入css）

    全部引入
3. 使用组件
    Vue.use(ElementUI)

    style-loader
    css-loader      引入css  （loader:'style!css'）
    
    file-loader    字体图标库    


    less:
        less  （定义变量，函数，传参）
        less-loader

　　

按需加载相应ui组件

按需加载相应组件:    √
    就需要 按钮，需要安装一个插件 babel-plugin-component
1. babel-plugin-component
    cnpm install babel-plugin-component -D
2. .babelrc文件里面新增一个配置
      "plugins": [["component", [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]]]
3. 想用哪个组件就用哪个
    引入:
        import {Button,Radio} from 'element-ui'
    使用:
        a). Vue.component(Button.name, Button);  个人不太喜欢
        b). Vue.use(Button);   √
    ui组件的引入和使用可以单独写在一个js文件中

　　发送请求:
　　　　vue-resourse 交互

　　　　axios（用法与vue-resourse相同）

　　　　自定义的组件也可以加事件，@click.native ="get"（类似于事件委托）
　　　　github上获取用户信息https://api.github.com/users/SSX1608

mint-ui

　　移动端 ui库

　　http://mint-ui.github.io/

1. 下载
    npm install mint-ui -S

    -S
    --save
2. 引入
    import Vue from 'vue';
    import Mint from 'mint-ui';
    import 'mint-ui/lib/style.css' （还需要引入css模块）
    Vue.use(Mint);

    按需引入:
    import { Cell, Checklist } from 'minu-ui';
    Vue.component(Cell.name, Cell);
    Vue.component(Checklist.name, Checklist);

http://mint-ui.github.io/docs/#!/zh-cn2