home 布局

README.md

@@ -1,43 +1,8 @@
-<<<<<<< HEAD
 # vue-learn
 
 #### 介绍
 学习vue全家桶
 
-#### 软件架构
-软件架构说明
-
-
-#### 安装教程
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 使用说明
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
-
-#### 码云特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
-5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
-=======
-# vtest
 
 ## Project setup
 ```

src/components/Home.vue

@@ -1,7 +1,15 @@
 <template>
-  <div>
+  <el-container class="home-container">
-    <el-button type="info" @click="logout">退出</el-button>
+    <el-header>
-  </div>
+      Header
+      <el-button type="info" @click="logout">退出</el-button>
+    </el-header>
+    <el-container>
+      <el-aside width="200px">Aside</el-aside>
+      <el-main>Main</el-main>
+    </el-container>
+  </el-container>
+
 </template>
 
 <script>
@@ -16,6 +24,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-
+  .home-container {
+    height: 100%;
+  }
+  .el-header{
+    background-color: #363D40;
+  }
+  .el-aside{
+    background-color: #313743;
+  }
+  .el-main{
+    background-color: #E9EDF1;
+  }
 </style>