在idea中全局引入并运行ElementUI

Element UI官方网站连接入口

1.在idea终端运行命令

        cd vue

        npm i element-ui -S

2.成功后

3.全局引入ElementUI

• 插入以下代码

• import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI, {size: 'small'});

插入后

练习笔记

1.新建页面

配置index.js

配置后

       插入代码

 {
    path: '/element',
    name: 'Element',//路由名称
    component: () => import('../views/ElementUI.vue')
  },

ElementUI.vue

<template xmlns="">
  <div>
 
<!--网页横向分成24份，两个盒子每份12-->
<!--    <el-row gutter="20">&lt;!&ndash;gutter 两个盒子间距&ndash;&gt;
     <el-col :span='12'>
       <div style="width: 100%; height: 300px; background-color: dodgerblue"></div>
     </el-col>
      <el-col :span='12'>
        <div style="width: 100%; height: 300px; background-color: red"></div>
      </el-col>
    </el-row>-->
 
<!--分四份,放图片-->
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 100% " src="@/assets/logo.png" alt="">
          <div style="text-align: center">描述描述描述啥啥啥</div>
          <div style="text-align: center;color: red">价格 ￥93.00</div>
        </div>
      </el-col>
 
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 100% " src="@/assets/logo.png" alt="">
          <div style="text-align: center">描述描述描述啥啥啥</div>
          <div style="text-align: center;color: red">价格 ￥95.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 100% " src="@/assets/logo.png" alt="">
          <div style="text-align: center">描述描述描述啥啥啥</div>
          <div style="text-align: center;color: red">价格 ￥97.00</div>
        </div>
      </el-col>
 
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 100% " src="@/assets/logo.png" alt="">
          <div style="text-align: center">描述描述描述啥啥啥</div>
          <div style="text-align: center;color: red">价格 ￥99.00</div>
        </div>
      </el-col>
 
<!--      <el-col :span="6"><img style="width: 100% " src="@/assets/logo.png"></el-col>
      <el-col :span="6"><img style="width: 100% " src="@/assets/logo.png"></el-col>-->
    </el-row>
 
<!--按钮
      round 有弧度
-->
    <el-row>
      <el-button type="primary" >主要按钮</el-button>
      <el-button type="success" plain round>成功按钮</el-button>
    </el-row>
 
<!--表单
      placeholder 表单输入提示
      v-model 输入框和选择框必须有v-model属性，没有则不能输入和选中
      clearable 清空表单
 -->
    <el-row style="margin-top: 20px">
      <el-col>
        <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>
        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>
        <el-input style="width: 200px" v-model="value1" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        <el-input clearable style="width: 200px" v-model="value2" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
        <el-input  type="textarea" style="width: 200px"  v-model="value1"></el-input>
      </el-col>
    </el-row>
 
<!-- 带输入建议-->
    <el-row style="margin: 20px 0">
      <el-autocomplete style="width: 300px" placeholder="请输入内容，我猜" :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value3"> </el-autocomplete>
    </el-row>
 
<!-- 下拉框
        el-row     页面横向排列
        el-select  下拉框
        el-option  下拉框的内容
        @  v-on的简写   绑定事件
        multiple       多选
 -->
        <!--下拉选择-->
    <el-row>
      <el-select v-model="select1" @change="changeSelect">
        <el-option value="橘子"></el-option>
        <el-option value="柚子"></el-option>
        <el-option value="柠檬"></el-option>
      </el-select>
 
      <el-select v-model="select2" @change="changeSelect">
        <el-option v-for="item in fruits" :key="item.id"  :value="item.name"></el-option>
      </el-select>
 
      <el-select v-model="select3" @change="changeSelectUsers1" multiple>
        <el-option v-for="item in users1" :key="item.card" :label="item.name" :value="item.card"></el-option>
      </el-select>
<!--可搜索  绑定了label-->
      <el-select v-model="select4" @change="changeSelectUsers2" filterable>
        <el-option v-for="item in users2" :key="item.card" :label="item.label" :value="item.card"></el-option>
      </el-select>
 
    </el-row>
 
<!-- 单选/多选
        v-model 输入框和选择框必须有v-model属性，没有则不能输入和选中
 -->
    <el-row>
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
 
      <el-checkbox-group v-model="checkList" @change="selectCheckBox">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
      </el-checkbox-group>
    </el-row>
 
<!--  日期时间
        一定要设置value-format
        年月日：value-format="yyyy-MM-dd"
        年月日时分秒：value-format="yyyy-MM-dd HH:mm:ss"
-->
    <el-row>
      <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
      <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDateTime"></el-date-picker>
<!--     日期范围 -->
      <el-date-picker v-model="daterange" type="daterange"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间" @change="changeDateRange">
      </el-date-picker>
    </el-row>
 
<!--   表格
          el-table-column 列的表头字段
          header-cell-style 表头设置颜色字体大小等
          border  边界
      -->
    <el-row style="margin: 100px 0">
      <el-tsble :data="tabledata"  border :header-cell-style="{background:'aliceblue',fountSize:'13px'}">
        <el-table-column label="职业" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
      </el-tsble>
    </el-row>
 
  </div>
</template>
 
<script>
export default {
  name:'element',
  data() {
    return{
      //表格
      tabledata:[
        {name:'和尚',address:'少林寺',id:1,age:'30'},
        {name:'云梦',address:'朔梦林',id:2,age:'30'},
      ],
 
      value:'',//绑定后表单才能输入值
      value1:'',
      value2:'',
      value3:'',
      password:'',
      users:[{value:'1和尚'}, {value:'2云梦'}, {value:'3关山'}],
      //下拉选择
      select1:'',
 
      select2:'',
      fruits:[
        {name:"苹果",id:1},
        {name:"橘子",id:2},
        {name:"香蕉",id:3},
      ],
 
      select3:'',
      users1:[
        {name:"铃音",card:11155555444222},
        {name:"少林",card:22233544417788},
        {name:"沧海",card:32254778855212},
      ],
 
      select4:'',
      users2:[
        {label:"云梦",card:11155555444222},
        {label:"珈蓝",card:22233544417788},
        {label:"沧海",card:32254778855212},
      ],
      //单选 多选
      radio:'',
      checkList:[],  //checkList:''  会同时选中
      //日期时间
      date:'',
      datetime:'',
      daterange:'',
 
 
    }
  },
 
  //方法
  methods: {
    querySearch(query, cb) {   // 调用 cd全称：callback 返回建议列表的数据
      let results = query ? this.users.filter(v => v.value.includes(query)) : this.users
      console.log(results)
      cb(results);
    },
 
    changeSelect() {
      console.log(this.select)
    },
 
    changeSelectUsers1() {
      console.log(this.select3)
    },
 
    changeSelectUsers2() {
      console.log(this.select4)
    },
 
    selectRadio(){
      alert(this.radio)
    },
 
    selectCheckBox(){
      console.log(this.checkList)
    },
 
    changeDate(){
      console.log(this.date)
    },
 
    changeDateTime(){
      console.log(this.datetime)
    },
 
    changeDateRange(){
      console.log(this.daterange)
    }
 
  }
}
</script>

进入到Element页面

           localhost:8080/element

运行效果