Elment UI的使用說明

 1、 Elment UI

　　一、 簡介

　　　　Element UI是餓了麼團隊提供的一套基於Vue2.0的組件庫，能夠快速搭建網站，提升開發效率，就如同bootstrap。

　　二、組件分類

　　　　 ElementUI  適用於PC端

　　　　 MintUI 適用於手機移動端

　　三、官網

　　　　http://element.eleme.io/

2、快速上手

　　一、 安裝elment ui

　　　　cnpm install element-ui -S

　　二、 在main.js中引入並使用組件（全局引入）

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

 

　　　　　　三、只引入須要的插件