Spring+Vue实现后台管理系统day01

Spring+Vue实现后台管理系统day01
准备的工具：
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 vue
npm run serve
看到这个界面则启动成功
安装ElementUI：`npm i element-ui -S

准备工作完成后就可以在本地浏览器Http：//localhost：8080/看到页面
二：Vue搭建后台主题框架
打开Element官网添加链接描述找到左侧Contain布局容器右侧有一个王小虎的实例，点击显示代码
将el-container中的代码全部复制到home.vue中的新建div中。启动后页面效果如下
对页面进行完善和布局
加上搜索边框<div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></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" @click="load">搜索</el-button> </div>
再加入新增删除导入导出等边框<div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></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" @click="load">搜索</el-button> </div>
效果如下