springboot+vue搭建后台

代码地址：https://github.com/hyblist/SpringBoot-Vue2.git

jdk1.8

mysql

node

navicat

idea

地址：https://element.eleme.cn/#/zh-CN/component/installation

弹窗：https://layuion.com/docs/

docsify动态生成您的文档网站:https://docsify.js.org/#/

安装：

npm i element-ui -S

1、vue-cli安装：

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

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

2、创建一个名为vue的工程

vue create vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y75jaYg2-1656746400673)(springboot+vue.assets/image-20220626135443407.png)]

3、测试启动

cd vue
npm run serve

4、项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCpKvhrY-1656746400675)(springboot+vue.assets/image-20220626135932147.png)]

5、安装element-ui

npm i element-ui -S

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//{small}指定空间大小
Vue.use(ElementUI,{small})

6、修样式

新建goloable.css,并在main.js导入import ‘./assets/goloable.css’

html,body,div{
    margin: 0;
    padding: 0;
}

html,body{
    height: 100%;
}

Home.vue

goloable.css

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

App.vue

Home.vue 去除div，并设置；并进行以下设置

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



.ml-5{
    margin-left: 10px;
}

.ml-5{
    margin-right: 5px;
}

.pd-10{
    padding: 10px 0;
}

3、调整Home.vue