在idea中全局引入并运行ElementUI方式
更新时间：2024年10月14日 14:40:06 作者：小迷糊and小菜鸡
本文详细描述了如何在IDEA中使用ElementUI,包括从官网获取连接、在IDEA终端运行命令安装ElementUI,以及如何在项目中全局引入ElementUI,通过新建页面并配置index.js和ElementUI.vue,可以实现在本地服务器上的展示
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'});
插入后
练习笔记
新建页面
配置index.js
配置后
插入代码
{
path: '/element',
name: 'Element',//路由名称
component: () => import('../views/ElementUI.vue')
},
ElementUI.vue
<template xmlns="">
<div>
<!--网页横向分成24份，两个盒子每份12-->
<!-- <el-row gutter="20"><!–gutter 两个盒子间距–>
<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
运行效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
IDEA 2020.1 搜索不到Chinese (Simplified) Language
小编在安装中文插件时遇到IDEA 2020.1 搜索不到Chinese ​(Simplified)​ Language Pack EAP,无法安装的问题，本文给大家分享我的解决方法，感兴趣的朋友一起看看吧2020-04-04
这篇文章主要介绍了java 进制转换实例详解的相关资料,需要的朋友可以参考下2017-04-04
SpringBoot中通过实现WebMvcConfigurer参数校验的方法示例
这篇文章主要介绍了SpringBoot中通过实现WebMvcConfigurer参数校验的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Java加载本地库的方法之System.load与System.loadLibrary
最近在做的工作要用到本地方法,所以下面这篇文章主要介绍了Java加载本地库的方法之System.load与System.loadLibrary的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
springcloud如何使用dubbo开发rpc服务及调用
这篇文章主要介绍了springcloud如何使用dubbo开发rpc服务及调用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
本篇总结的是Java异常相关的面试题，后续会持续更新，希望我的分享可以帮助到正在备战面试的实习生或者已经工作的同行，如果发现错误还望大家多多包涵，不吝赐教，谢谢2021-07-07
本篇文章主要介绍了详解用Eclipse如何创建Web项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Java之Springcloud Feign组件详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了MyBatis Plus更新对象无法设空值解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要给大家介绍了关于Spring MVC请求参数解析的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
最新评论