SpringBoot2 + Vue2 项目实战(一)集成ElementUI及整体框架搭建

一、创建项目集成element-ui

软件版本

• 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 

集成element-ui

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css'

Vue.config.productionTip = false

Vue.use(ElementUI,{size:"mini"});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 二、主体框架搭建

App.vue

gloable.css

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

.ml-5{
    margin-left: 5px;
}
.mr-5{
    margin-right: 5px;
}
.pd-10{
    padding:10px 0 ;
}

main.js

import './assets/gloable.css'

菜单栏收缩实现：

                    
                    后台管理系统
                


                

                    
                
                
                    王小虎
                    
                        查看
                        新增
                        删除
                    
                

            

Home.vue