前端笔记6——第一次使用element-ui（VUE环境）

1.首先创建项目

vue create anttest

2.安装element-ui

npm i element-ui

3.在main.js文件中引用element-ui

//引入ElementUI组件库
import ElementUI from ‘element-ui’
//引入ElementUI全部样式
import ‘element-ui/lib/theme-chalk/index.css’

4.USE ElementUI

Vue.use(ElementUI)

5.app.vue文件中使用element-ui样式

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <button>原生的按钮</button>
    <input type="text" />
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />

    <el-date-picker v-model="value1" type="date" placeholder="选择日期">
    </el-date-picker>

    <br />
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
    </el-row>
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <!-- 把圆改为长方形 -->
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <!-- 把icom从"el-icon-check"改为"el-icon-user"  -->
      <el-button type="success" icon="el-icon-user" circle></el-button>
    </el-row>
  </div>
</template>

最终效果：