快捷導(dǎo)航

在idea中全局引入并運行ElementUI方式

更新時間：2024年10月14日 14:40:06 作者：小迷糊and小菜雞

本文詳細(xì)描述了如何在IDEA中使用ElementUI,包括從官網(wǎng)獲取連接、在IDEA終端運行命令安裝ElementUI,以及如何在項目中全局引入ElementUI,通過新建頁面并配置index.js和ElementUI.vue,可以實現(xiàn)在本地服務(wù)器上的展示

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'});

插入后

練習(xí)筆記

新建頁面

配置index.js

配置后

插入代碼

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

ElementUI.vue

<template xmlns="">
  <div>
 
<!--網(wǎng)頁橫向分成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="請輸入內(nèi)容"></el-input>
        <el-input show-password style="width: 200px" v-model="password" placeholder="請輸入密碼"></el-input>
        <el-input style="width: 200px" v-model="value1" placeholder="請輸入內(nèi)容" prefix-icon="el-icon-search"></el-input>
        <el-input clearable style="width: 200px" v-model="value2" placeholder="請輸入內(nèi)容" 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="請輸入內(nèi)容，我猜" :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value3"> </el-autocomplete>
    </el-row>
 
<!-- 下拉框
        el-row     頁面橫向排列
        el-select  下拉框
        el-option  下拉框的內(nèi)容
        @  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="復(fù)選框 A"></el-checkbox>
        <el-checkbox label="復(fù)選框 B"></el-checkbox>
      </el-checkbox-group>
    </el-row>
 
<!--  日期時間
        一定要設(shè)置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="結(jié)束時間" @change="changeDateRange">
      </el-date-picker>
    </el-row>
 
<!--   表格
          el-table-column 列的表頭字段
          header-cell-style 表頭設(shè)置顏色字體大小等
          border  邊界
      -->
    <el-row style="margin: 100px 0">
      <el-tsble :data="tabledata"  border :header-cell-style="{background:'aliceblue',fountSize:'13px'}">
        <el-table-column label="職業(yè)" 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關(guān)山'}],
      //下拉選擇
      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:"珈藍(lán)",card:22233544417788},
        {label:"滄海",card:32254778855212},
      ],
      //單選 多選
      radio:'',
      checkList:[],  //checkList:''  會同時選中
      //日期時間
      date:'',
      datetime:'',
      daterange:'',
 
 
    }
  },
 
  //方法
  methods: {
    querySearch(query, cb) {   // 調(diào)用 cd全稱：callback 返回建議列表的數(shù)據(jù)
      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>