vue2.0-elementUI

Posted 2020-09-22 672530440

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

<template>
  <div id="app">
    <el-button type="primary">主要按钮</el-button>
    <el-button type="danger">主要按钮</el-button>
    <el-button type="info" icon="close">主要按钮</el-button>
    <el-button type="success" icon="edit">主要按钮</el-button>
    <el-button type="warning" icon="search">主要按钮</el-button>

    <span class="el-icon-delete"></span>
    <span class="el-icon-loading"></span>

    <el-row>
      <el-col :span="12">
        <div class="my-grid"></div>
      </el-col>
      <el-col :span="12">
        <div class="my-grid"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="my-grid">
          <Date></Date>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="my-grid"></div>
      </el-col>
      <el-col :span="8">
        <div class="my-grid"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Date from ‘./components/Date.vue‘
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  components:{
    Date
  }
}
</script>

<style scoped lang="less">
@color:red;
.height(@h){
  height:@h;
}
.my-grid{
  .height(50px);
  border:1px solid @color;
  
}
</style>

 

vue问题:
    论坛
    http://bbs.zhinengshe.com
------------------------------------------------
UI组件
    别人提供好一堆东西

    目的: 
        为了提高开发效率
        功能

    原则: 拿过来直接使用

vue-cli  ->  vue-loader

bootstrap:
    twitter    开源
    简洁、大方
    官网文档

    基于 jquery

    栅格化系统+响应式工具  (移动端、pad、pc)
    按钮
    
都支持页面引入：<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

也可以通过打包工具写在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包管理器      [email protected]
--------------------------------

饿了么团队开源一个基于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    ->    --save
2. 引入   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 -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);   √
---------------------------------------------------
发送请求:
    vue-resourse        交互

    axios
---------------------------------------------------
element-ui    ->  pc

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‘
    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);

// tabs
import {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

<template>
  <div id="app">
    <el-button @click="get">普通按妞</el-button>
  
    <div>
      {{myMessage}}
    </div>

    <hr>

    <el-button type="primary">普通按妞</el-button>

    <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
    <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>

    <!-- 日历 -->
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>

    <!-- rate -->
    <el-rate v-model="val"></el-rate>

    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>

    <!-- 选项卡 -->
    <el-tabs type="card">
      <el-tab-pane label="用户管理">

        <el-badge :value="200" :max="99" class="item">
          <el-button size="small">评论</el-button>
        </el-badge>
      
      </el-tab-pane>
      <el-tab-pane label="配置管理">
          <el-switch
            v-model="bSign"
            on-text=""
            off-text="">
          </el-switch>
      </el-tab-pane>
      <el-tab-pane label="角色管理">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- button -->
    <myButton @click.native="get"></myButton>

  </div>
</template>

<script>
import myButton from ‘./components/Button.vue‘
import axios from ‘axios‘
export default {
  components:{
    myButton
  },
  name: ‘app‘,
  data () {
    return {
      myMessage:‘默认数据‘,
      msg: ‘Welcome to Your Vue.js App‘,
      radio:"1",
      value1:‘‘,
      val:5,
      bSign:true,
      tableData: [{
        date: ‘2016-05-02‘,
        name: ‘王小虎‘,
        address: ‘上海‘
      }, {
        date: ‘2016-05-04‘,
        name: ‘王小虎‘,
        address: ‘上海‘
      }, {
        date: ‘2016-05-01‘,
        name: ‘王小虎‘,
        address: ‘上海‘
      }, {
        date: ‘2016-05-03‘,
        name: ‘王小虎‘,
        address: ‘上海‘
      }]
    }
  },
  mounted(){
    this.get();
  },
  methods:{
    get(){
      axios.get(‘https://api.github.com/users/itstrive‘)
      .then(function(res){
        this.myMessage=res.data;
      }.bind(this)).catch(function(err){
          console.log(err);
      })
    }
  }
}
</script>

<style>
.item{
  margin-top:30px;
}
</style>

Button.vue

<template>
    <div>
        <el-button>请求数据</el-button>
        <el-button>请求数据</el-button>
        <el-button>请求数据</el-button>
        <el-button>请求数据</el-button>
    </div>
</template>

.babelrc

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