vue使用element

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

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

1. 在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) })

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

   #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; }

3. 然后创建日期组件和上传文件组件，在src中创建 components/DatePicker.vue 和 components/Upload.vue 两个组件DatePicker.vue：（日期组件）

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>

启动项目，展示效果图