Elment UI的使用说明

 一、 Elment UI

　　1、 简介

　　　　Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率，就如同bootstrap。

　　2、组件分类

　　　　 ElementUI  适用于PC端

　　　　 MintUI 适用于手机移动端

　　3、官网

　　　　http://element.eleme.io/

二、快速上手

　　1、 安装elment ui

　　　　cnpm install element-ui -S

　　2、 在main.js中引入并使用组件（全局引入）

　　　　1、import ElementUI from 'element-ui'          //只是引入了ElementUI的js文件

　　　　2、import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入，引入的是ElementUI的css样式文件

　　　    3、Vue.use(ElementUI);  //使用ElementUI组件，这种方式引入了ElementUI中所有的组件

　　　　4、示例：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
import App from './App.vue'

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
})

　　3、 在webpack.config.js中添加loader    

　　　　1、 CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader

　　　　2、默认并没有style-loader模块，所以需要单独安装

　　　　　　cnpm install style-loader --save-dev

　　　　3、示例

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test:/.css$/,
        loader:'style-loader!css-loader'//加载elment ui的style和css
      },
      {
        test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
        loader: 'file-loader'
      },
      {
        test:/.less$/,
        loader:'less-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

　　　　4、 使用组件

<template>
  <div id="app">
    {{msg}}
    <br>
    <!-- 按钮 -->
    <el-button type="primary">我的按钮</el-button>
    <el-button type="danger">我的按钮</el-button>
    <el-button type="info">我的按钮</el-button>
    <el-button type="warning">我的按钮</el-button>
    <el-button type="success">我的按钮</el-button>
    <br>
    <br>
    <el-button type="success" icon="edit">编辑</el-button>
    <el-button type="success" icon="search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
    <hr>
    <br>
    <!-- 图标 -->
    <i class="el-icon-close"></i>
    <i class="el-icon-delete"></i>
    <i class="el-icon-loading"></i>
    <hr>
    <!-- 布局 -->
    <el-row>
      <el-col :span="6" class="grid">welcome</el-col>
      <el-col :span="6" class="grid">to</el-col>
      <el-col :span="6" class="grid">itany</el-col>
      <el-col :span="6" class="grid">网博</el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="grid">welcome</el-col>
      <el-col :span="12" class="grid">to</el-col>
    </el-row>
    <hr>
    <!-- 日期选择器 -->
    <DatePicker></DatePicker>
    <!-- 文件上传 -->
    <Upload></Upload>



  </div>
</template>

<script>
import DatePicker from './components/DatePicker.vue'//引入自己定义的组件
import Upload from './components/Upload.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: '欢迎来到南京网博'
    }
  },
  components:{//注册自己引入的组件
    DatePicker,
    Upload
  }
}
</script>

<style lang="less"> /* 必须要指定lang="less" */
  .grid{
    border:1px solid #ccc;
    font-size:20px;
    color:@color;
    .h(50px);
  }
  @color:red;
  .h(@height){
    height:@height;
  }
</style>

<template>
    <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      size="small"
      :picker-options="options">
    </el-date-picker>    
</template>

<script>
    export default {
        data(){
            return {
                value:'',
                options:{
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;//计算时间在今天之前
                    },
                    firstDayOfWeek:1
                }
            }
        }
    }
</script>

<template>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</template>

<script>
    export default {
        data(){
            return {
                fileList: [
                        {
                            name: 'food.jpeg', 
                            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                        }, 
                        {
                            name: 'food2.jpeg', 
                            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                        }
                ]
            }
        },
         methods: {
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          }
        }
    }

</script>

　　　　5、 使用less（动态css，在style中必须要指定lang="less"）

　　　　　　1、安装loader，需要两个：less、less-loader

　　　　　　　　cnpm install less less-loader -D

　　　　　　2、 在webpack.config.js中添加loader    

　　　　6、 按需引入组(局部引入)

　　　　　　1、 安装babel-plugin-component

　　　　　　　　cnpm install babel-plugin-component -D  

　　　　　　2、 配置.babelrc文件
  

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

　　　　　　3、只引入需要的插件