一、项目介绍
二、vue脚手架启动和基本配置
2.1 创建Vue-CLI项目
- 在你要创建项目的文件夹下打开cmd命令框：
- 在终端输入
vue create xxxxxx为项目名称，如下图所示：
-
回车选择 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>最后运行一下：成功！
文章来源：https://www.toymoban.com/news/detail-620055.html
附此部分HomeIndex.vue的完整代码：文章来源地址https://www.toymoban.com/news/detail-620055.html
<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开发后台管理系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
