一、项目介绍

二、vue脚手架启动和基本配置

2.1 创建Vue-CLI项目

在你要创建项目的文件夹下打开cmd命令框：
在终端输入
```
vue create xxx
```
xxx为项目名称，如下图所示：
回车选择 Manually select features

2.2 安装element UI

访问Element-UI官网根据文档提示安装element UI插件

npm i element-ui -S

如果上方命令安装不了出错，如下图所示：

有可能是npm的版本和elementUi不兼容，可以使用输入下面指令解决：

npm install --legacy-peer-deps element-ui --save

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'Vue.use(ElementUI)new Vue({el: '#app',render: h => h(App)
});

二、侧边栏头部布局

1.2 Container 布局

首先在elementUI官网里找到合适的布局格式，比如如下所示的布局，然后点击显示代码，把代码复制下来：

侧边栏和头部基本是固定死的，所以我们要把这两个定为主路由，在src\components\home文件夹下创建一个HomeIndex.vue文件，里面放侧边栏和头部模块，然后把复制过去的代码粘贴到里面。

<template><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container>
</el-container>
</template><script>
export default {}
</script><style></style>

最后在App.vue文件内引用一下即可：

<template><Main></Main>
</template><script>
import Main from '@/components/home/HomeIndex.vue'
export default {components: {Main}
}
</script><style></style>

最后运行结果：成功

之后改一下样式：添加背景色什么的，在HomeIndex.vue文件下，就是站体布局代码下面添加less样式代码即可

<style lang='less' scoped>// 头部样式
.el-header{
background-color: #373D41;
}// 侧边栏样式
.el-aside{background-color: #333744;
}// 主体部分样式
.el-main{background-color: #eaedf1;
}
.home-container{height: 100vh;
}</style>

最后运行一下：成功！

附此部分HomeIndex.vue的完整代码：

<template><el-container class="home-container"><!-- 头部 --><el-header>Header</el-header><el-container><!-- 侧边栏 --><el-aside width="200px">Aside</el-aside><!-- 主题 --><el-main>Main</el-main></el-container>
</el-container>
</template><script>
export default {}
</script><style lang='less' scoped>// 头部样式
.el-header{
background-color: #373D41;
}// 侧边栏样式
.el-aside{background-color: #333744;
}// 主体部分样式
.el-main{background-color: #eaedf1;
}
.home-container{height: 100vh;
}</style>

1.3 头部布局

Vue开发后台管理系统相关推荐

SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Vue + ElementUI 后台管理系统实现主题风格切换
一.目的此次写作内容是在我之前发布一篇文章的基础上进行新增的. 上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实 ...
xadmin开发后台管理系统常见问题
Xadmin开发后台管理系统点我下载xadmin的demo 关注公众号"轻松学编程"了解更多. 添加小头像 https://blog.csdn.net/qq_34964399/a ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
tp和 vue 管理后台管理系统_vue-antd后台管理系统
vue-antd本项目的定位是后台管理系统,适配中文.英文.日文.mock数据,开箱即用技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + axios ...
asp 退出登录修改cookie能进入后台_Vue3.0 - Composition API 体验版开发后台管理系统...
手把手撸码前端,实战大公司级后台管理系统开发,正规实践了解项目开发整体流程由0到1搭建后台管理系统,采用 Vue3.0 - Composition API 体验版开发,优先体验3.0 API 语法: ...
结合服务器+后端+前端，完成 vue项目后台管理系统
目录以上是项目的服务器php.后端.前端.已经可以正常运行一登录: 登录页进度条:戳这里Vue项目电商后台管理系统 nprogress--进度条_活在风浪里的博客-CSDN博客二侧导航三 ...

Vue开发后台管理系统