springboot+vue练手小项目[前台搭建+后台编写]（非常详细）

[ springboot+vue练手小项目 ]

• 技术栈： springboot+vue3+element-plus +Mybaties-plus+hutool
  +mysql8
• 项目介绍 ：最近刚学了springboot+vue，就想着做一个小的前后端分离的练手项目，简单的后台管理页面，有基本的登陆注册+增删改查，后面具体的模块等需要的时候的再进行完善，这只是一个练手项目，如果大家运行不出来或者有疑问，欢迎交流。
• 我是个菜鸟，也不太会写文章，若有不足欢迎指正。

1.环境搭建

1.安装node环境,npm,cli，这里不再赘述

2.在指定文件夹使用cmd指令创建项目:vue create springboot-vue-demo

3.选择Manually select features

4.选择路由和vuex，这里未选择了eslint语法检测[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.选择3.x版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![(img-H4bjGfpT-1647170194103)(C:UserserhangAppDataRoamingTypora ypora-user-imagesimage-20220309152419903.png)]](https://img-blog.csdnimg.cn/01313a7a07824b64820fb1c22a09aa4f.png)

6.输入y (路由信息为history，)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![(img-K8XKVnNm-1647170194104)(C:UserserhangAppDataRoamingTypora ypora-user-imagesimage-20220309152546319.png)]](https://img-blog.csdnimg.cn/616317c8beea4a0fa731a390d18c8dbc.png)

7.选择In package.json

8.是否保存配置

9.创建,启动项目

10.启动成功,浏览器输入8080端口进行访问

11.在idea打开项目，配置vue启动

选择npm,在npm中Script选项中输入serve

之后就可以点击启动键，快捷启动项目了

安装vue插件

2.项目基本布局

1.引入Element-plus（基于vue3.x版本）

在idea终端输入指令引入Element-ui依赖

项目中引入Element-ui，main.js文件中引入Element-plus

2.删除HelloWorld组件,删除App.vue的多余部分

在components中创建Header组件 在App.js中引入

创建css文件夹，创建global.css文件，在main.js中引入全局css样式

在components中创建Aside(侧边栏)，app.vue引入组件

Aside中引入emement导航栏样式

Home中引入四个区域 功能 搜索 表格 分页作为主体区域

3.项目目录

4.代码

global.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Aside.vue

Header.vue

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

HomeView.vue