在这里插入图片描述

把(一)里面创建好的项目文件夹拖入到IDEA里面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述进行完上步操作后就可以快捷的启动项目了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里稍微修改一下可以让我们启动项目后,自动地打开页面

页面搭建和改造

请添加图片描述
对此项目文件进行改造,改造成最终我们需要的页面的样子,目标是做一个后台管理系统如上图;

首先做一个页面的header,把没用的代码去掉

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除Home.vue里的HelloWorld部分和图片部分以及HelloWorld.vue组件

创建编辑Header.vue 组件

在这里插入图片描述
在这里插入图片描述
在APP.vue里引入Header组件.

在这里插入图片描述
创建CSS文件去除一些默认的样式(去掉外边距)
.
在main.js 来引入
在这里插入图片描述
基础头部和主题就修建完了.

# spring boot # vue.js # intellij-idea
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue