在vue框架中使用element

1. 创建一个项目，并安装element-ui插件

第一步： 命令窗口中在项目地址下： 输入npm i element-ui -S 安装elementui 依赖

2. 在main.js入口文件使用element-ui插件

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)
})
复制代码

3. 在APP.vue组件中使用element-ui组件，，这里我选择的是按钮组件，日期组件和上传图片组件，在官网中选择想要的样式复制代码到vue组件中即可

<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>
复制代码

4. 然后创建日期组件和上传文件组件，在src中创建 components/DatePicker.vue 和 components/Upload.vue 两个组件DatePicker.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>
复制代码

Upload.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>
复制代码

启动项目，展示效果图