SpringBoot2 + Vue2 项目实战(一)集成ElementUI及整体框架搭建

一、创建项目集成element-ui

软件版本

jdk 1.8
mysql5.7+
node14.16.0
navicat
idea2021.3

vue-cli安装：npm install -g @vue/cli

npm设置淘宝镜像加速：npm config set registry https://registry.npm.taobao.org

创建vue项目：vue create vue

运行vue项目：

cd vuenpm run serve

安装ElementUI：

npm i element-ui -S

集成element-ui

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css'Vue.config.productionTip = falseVue.use(ElementUI,{size:"mini"});new Vue({router,render: h => h(App)
}).$mount('#app')

二、主体框架搭建

App.vue

<template><div id="app"><router-view/></div>
</template><style>#app{height: 100vh;}
</style>

gloable.css

*{margin: 0;padding: 0;box-sizing: border-box;
}.ml-5{margin-left: 5px;
}
.mr-5{margin-right: 5px;
}
.pd-10{padding:10px 0 ;
}

main.js

import './assets/gloable.css'

菜单栏收缩实现：

<el-menu :default-openeds="['1', '3']" style="height: 100%"background-color="rgb(48,65,86)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse">
<div style="height: 60px;line-height: 60px; text-align: center"><img src="../assets/logo.png" alt=""style="width: 20px;position: relative; top:5px;margin-right: 5px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-header style="font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px; display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px; cursor: pointer"><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><script>export default {name: 'HomeView',data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item),msg: "hello word",collapseBtnClass: 'el-icon-s-fold',isCollapse: false,sideWidth: 200,logoTextShow: true}},methods: {//点击收缩按钮出发collapse() {this.isCollapse = !this.isCollapseif (this.isCollapse) {//收缩this.sideWidth = 64this.collapseBtnClass = 'el-icon-s-unfold'this.logoTextShow = false} else {//展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}}}
</script>

Home.vue

<template><el-container style="height: 100vh;"><el-aside width="sideWidth + 'px'"style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgb(0, 21, 41); height: 100%; overflow-x: hidden"><el-menu :default-openeds="['1', '3']" style="height: 100%"background-color="rgb(48,65,86)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><div style="height: 60px;line-height: 60px; text-align: center"><img src="../assets/logo.png" alt=""style="width: 20px;position: relative; top:5px;margin-right: 5px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title">导航一</span></template><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span></template><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px; display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px; cursor: pointer"><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-botton:30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"class="ml-5"></el-input><el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"class="ml-5"></el-input><el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"class="ml-5"></el-input><el-button class="ml-5" type="primary">搜索</el-button></div><div style="margin: 10px 0"><el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button><el-button type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button><el-button type="primary">导入<i class="el-icon-bottom"></i></el-button><el-button type="primary">导出<i class="el-icon-top"></i></el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="success">编辑<i class="el-icon-edit"></i></el-button><el-button type="danger">删除<i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding:10px 0"><el-pagination:page-sizes="[5, 10, 15, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div></el-main></el-container></el-container>
</template><script>export default {name: 'HomeView',data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item),msg: "hello word",collapseBtnClass: 'el-icon-s-fold',isCollapse: false,sideWidth: 200,logoTextShow: true,headerBg: 'headerBg'}},methods: {//点击收缩按钮出发collapse() {this.isCollapse = !this.isCollapseif (this.isCollapse) {//收缩this.sideWidth = 64this.collapseBtnClass = 'el-icon-s-unfold'this.logoTextShow = false} else {//展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}}}
</script><style>.headerBg {background: #ccc !important;}
</style>

SpringBoot2 + Vue2 项目实战(一)集成ElementUI及整体框架搭建

一、创建项目集成element-ui

二、主体框架搭建

相关文章

OpenCV——《直方图操作》和《模版匹配》

测试passport

关于爬取京东商品界面出现的passport

passport.js学习笔记

passport身份验证

Passport-Configure

Passport 你的网站（在你的WebSite上实现MS Passport ）上

Laravel Passport认证-多表、多字段解决方案