main.js

import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.use(ElementUI);new Vue({  el: '#app',  render: h => h(App)})

App.vue

 

vue问题:    论坛    http://bbs.zhinengshe.com------------------------------------------------UI组件    别人提供好一堆东西    目的:         为了提高开发效率        功能    原则: 拿过来直接使用vue-cli  ->  vue-loaderbootstrap:    twitter    开源    简洁、大方    官网文档    基于 jquery    栅格化系统+响应式工具  (移动端、pad、pc)    按钮    都支持页面引入：
     也可以通过打包工具写在main.js里面import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'最后把css打包在一个文件build.js。--------------------------------bower:    前端包管理器       jquery#1.11.1    自动解决依赖（下载bootstrap并找到最合适的jquery版本）npm:    node包管理器      jquery@1.11.1--------------------------------饿了么团队开源一个基于vue 组件库    elementUI    PC    MintUI        移动端--------------------------------elementUI:    如何使用    官网:http://element.eleme.io/使用:1. 安装 element-ui    npm i element-ui -D    npm install element-ui --save-dev    //   i    ->    install    //   D     ->    --save-dev    //   S    ->    --save2. 引入   main.js    入口文件    import ElementUI from 'element-ui'    import 'element-ui/lib/theme-default/index.css'    全部引入    3. 使用组件    Vue.use(ElementUI)    css-loader      引入css    字体图标    file-loader    less:        less        less-loader-------------------------------------------------按需加载相应组件:    √    就需要 按钮1. 下载babel-plugin-component    cnpm install babel-plugin-component -D2. .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);   √---------------------------------------------------发送请求:    vue-resourse        交互    axios---------------------------------------------------element-ui    ->  pcmint-ui    移动端 ui库    http://mint-ui.github.io/1. 下载    npm install mint-ui -S    -S    --save2. 引入    import Vue from 'vue';    import Mint from 'mint-ui';    import 'mint-ui/lib/style.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论坛:    -------------------------------------------------------Mint-ui-demo:  看着手册走了一遍https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

按需引入：

main.js

import Vue from 'vue'import App from './App.vue'import './element-ui.js'new Vue({  el: '#app',  render: h => h(App)})

element-ui.js

import Vue from 'vue'// 按钮和单选....import {Button,Radio,DatePicker,Rate,Pagination} from 'element-ui'Vue.use(Button);Vue.use(Radio);Vue.use(DatePicker);Vue.use(Rate);Vue.use(Pagination);// tabsimport {TableColumn,Table,Switch,Badge,TabPane,Tabs} from 'element-ui'Vue.use(Badge);Vue.use(Table);Vue.use(TabPane);Vue.use(Tabs);Vue.use(Switch);Vue.use(TableColumn);

App.vue

Button.vue

.babelrc

{  "presets": [    ["es2015", { "modules": false }]  ],  "plugins": [["component", [    {      "libraryName": "element-ui",      "styleLibraryName": "theme-default"    }  ]]]}