14: element ui 使用

1.1 element ui 基本使用

　　参考网址： http://element.eleme.io/#/zh-CN/component/button

　　1、初始一个vue项目并安装element ui

　　　　　　vue init webpack-simple element-demo

　　　　　　cd element-demo

　　　　　　npm install

　　　　　　cnpm install element-ui -S

　　　　　　npm run dev

 　　2、编辑main.js引入element ui (引入后就可以使用element中的样式了）

import Vue from 'vue'
import ElementUI from 'element-ui';                      // 引入element-ui
import 'element-ui/lib/theme-chalk/index.css';           // element-ui的css样式要单独引入
import App from './App.vue'

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

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

main.js

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

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: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        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]'
        }
      },

      // 添加加载字体字库的loader
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: 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
    })
  ])
}

webpack.config.js

　　4、在App.vue中使用element-ui

<template>
  <div id="app">
    {{msg}}

    <!--图标-->
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-row>
    </div>

    <!-- 日期选择器 -->
    <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: '测试msg'
    }
  },
  components:{
    DatePicker,
    Upload
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

App.vue

　　5、在src中创建 components/DatePicker.vue 和 components/Upload.vue 两个组件

<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>

DatePicker.vue

<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>

Upload.vue