Elment UI的使用说明

时间 2019-12-14

标签 elment 使用说明繁體版

原文原文链接

1、 Elment UIcss

　　一、简介html

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

　　二、组件分类node

　　　　 ElementUI 适用于PC端webpack

　　　　 MintUI 适用于手机移动端

　　三、官网web

　　　　http://element.eleme.io/

2、快速上手npm

　　一、安装elment uielement-ui

　　　　cnpm install element-ui -Sjson

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

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

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

　　　三、Vue.use(ElementUI); //使用ElementUI组件，这种方式引入了ElementUI中全部的组件

　　　　四、示例：

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

View Code

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

　　　　一、 CSS样式和字体图标都须要由相应的loader来加载，因此须要style-loader、css-loader

　　　　二、默认并无style-loader模块，因此须要单独安装

　　　　　　cnpm install style-loader --save-dev

　　　　三、示例

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
    })
  ])
}

View Code

　　　　四、使用组件

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

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

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

　　　　　　一、安装loader，须要两个：less、less-loader

　　　　　　　　cnpm install less less-loader -D

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

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

　　　　　　一、安装babel-plugin-component

　　　　　　　　cnpm install babel-plugin-component -D

　　　　　　二、配置.babelrc文件

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

View Code

　　　　　　三、只引入须要的插件