Vue开发后台管理系统

一、项目介绍

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

2.1 创建Vue-CLI项目

1. 在你要创建项目的文件夹下打开cmd命令框：
2. 在终端输入

   vue create xxx

   xxx为项目名称，如下图所示：

3. 回车选择 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 头部布局