【从头开始做项目Springboot+vue前后端分离（上）】

• 项目使用工具
• 创建新项目
• 项目文件
• 项目开始
• • 第一天（搭建页面框架）
  • • Header组件
    • Aside组件
    • HomeView表格内容
    • 组件写入App

改：已放弃使用webstorm，投入IntelliJ IDEA的怀抱，项目步骤都一样，将文中的webstorm看成IntelliJ IDEA即可
IntelliJ IDEA安装加破解教程链接
公众号“Java学习指南”回复999可获得项目相关资料,使用的软件是webstorm, mysql5.7、jdk1.8、navicat、node以及element-plus、vue-cli，webstorm需要下载一些插件，可以直接百度。主要任务是完成一个管理系统
css部分直接使用elements-plus里面现成的组件即可
https://element-plus.gitee.io/zh-CN/component/button.html.

在cmd当中输入

//先跳转到你想要创建项目的文件夹下
//vue create '项目名'
C:Usersa1002Desktopspringboot+vue框架项目>vue create springboot-vue-demo

选择manually select，手动选择router以及vuex特性即可
在webstorm里面打开即可，显示工具栏属性

之后点击编辑配置/add condiguration，点击左上角加号，找到npm，点击后在scripts后面输入serve，我们就可以通过快捷栏快速的启动服务器

最主要的是src文件，里面的assets主要放置一些图片；components里面放置的是一些组件，如导航栏、侧边栏等，其他页面直接引入组件即可用；router里面的index文件设置了一些映射，路径是什么显示哪个页面；store里面存储一些页面响应的变量；views存放的就是视图。
直接打开的页面就是App文件，main里面引入使用的依赖

主要分成三部分，头部Header，侧边导航栏Aside以及主体内容HomeView
Header、Aside都可以写成组件最后添加到App页面当中，HomeView则可以通过router映射到页面上
先给全局元素清除内外边距，并将他们变成盒子，创建global.css

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

为了能够使用elements-plus组件，需要在main.js当中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入elementplus来完成基本css，加入下面两句话
//https://element-plus.gitee.io/zh-CN/guide/quickstart.html
import ElementPlus from 'element-plus'
//全局配置国际化，默认提示语言会变成中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'

import '@/assets/css/global.css'
//加入.use(ElementPlus)
createApp(App).use(store).use(router).use(ElementPlus,{
    locale: zhCn,
}).mount('#app')
//main.js

并且已经设置了默认提示语言为中文，用法在指南的国际化当中

在components文件下新建Header.vue

Header分为三部分，后台管理，中间的空白以及下拉框，设置为flex布局，令中间的空白自适应即可
下拉框部分直接查看element-plus的文档
直接复制到下拉框部分的div即可

        
          
            
张三
            
              
            
          
          
        

问题：直接复制粘贴过来，张三两个字总是浮在上面，在前面加个
标签即可解决

同样直接复制Menu里面的侧栏

此处要注意，为了让侧边栏直接显示到整个页面的高度，为其设置高度为100vh，即使可视页面的所有高度，但因为要给头部留距离，因此减去头部高度，使用calc方法计算两个不同单位的数值，减号两旁加空格，否则会报错
问题：图标不显示
我们需要引入图标组件，首先下载图标库

npm install @element-plus/icons

其次在script部分引用组件

此时图标已显示，有人说有全局设置图标的方法，我尝试过但失败了，希望以后能解决

主题内容为表格，直接来一手复制

分为功能区，搜索区，并且要在表格上添加编辑与删除按钮，以及分页显示

并且将用到的数据以及方法写入

其中的数据在代码块内写入

三大部分已完成，填入到App中即可

在相应位置插入相应组件，内容部分写到Homeview当中，使用router-view映射即可

在script当中引入组件，router无需引入

此时大概的页面效果已完成