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

巴特西

14: element ui 使用

1.1 element ui 基本使用

最新文章

热门文章