vue 学习第二节

整体页面框架搭建

因为本人前端基础差，特别是css方面所以一般我都是用静态的方式先弄一个架子出来在一步一步替换死的变成活的

先看看静态的页面

接下来死的先把这个界面迁移到vue项目中

• 写一个顶部导航组件
• 写一个左侧菜单组件
• 写一个右侧内容组件

顶部组件

1. 在components目录新建一个head.vue
2. 按照vue组件写法

  <template>
     code
  </template>
  <script>
     code
  </script>
  <style scope>
    code
  </style>
  具体代码：现在data数据是死的后面再改
  <template>
  <header class="header">
    <div>
      <img alt="element-logo" src="http://cdn.aixifan.com/acfun-pc/1.9.4/img/logo.png" />
      <div class="nav">
        <el-menu @select="handleSelect" class="el-menu-demo" default-active="1" mode="horizontal" theme="dark">
          <el-menu-item index="1">
              处理中心
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
                我的工作台
            </template>
            <el-menu-item index="2-1">
                选项1
            </el-menu-item>
            <el-menu-item index="2-2">
                选项2
            </el-menu-item>
            <el-menu-item index="2-3">
                选项3
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="3">
                订单管理
            </el-menu-item>
              <el-menu-item index="4">
                退出
              </el-menu-item>
          </el-menu>
        <div class="line"></div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'head',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handleSelect: function (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
.nav {
  float: right;
  line-height: 80px;
  background: transparent;
  padding: 0;
  margin: 0;
}
</style>

3.在App.vue中使用组件

import HeadNav from './components/Head'
这里默认组件名不能用html的标签来命令；而且在使用组件的时候驼峰要转成-分割
在html里就使用组件:
<head-nav class="header"></head-nav>
css:
.header {
  height: 80px;
  background-color: #324057;
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 80px;
  z-index: 100;
  display: table;
  position: fixed;
}

1. 运行测试看看效果
   

接下来搞左侧导航

1. 按上面的方式撸一个组件先
2. 搞个css，把组件放到app.vue里

<template>
  <div>
    <el-col>
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            导航一
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组二--一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-document"></i>导航四</el-menu-item>
        <el-menu-item index="5"><i class="el-icon-document"></i>导航五</el-menu-item>
        <el-menu-item index="6"><i class="el-icon-document"></i>导航六</el-menu-item>
        <el-menu-item index="7"><i class="el-icon-document"></i>导航七</el-menu-item>
        <el-menu-item index="8"><i class="el-icon-document"></i>导航八</el-menu-item>
        <el-menu-item index="9"><i class="el-icon-document"></i>导航九</el-menu-item>
        <el-menu-item index="10"><i class="el-icon-document"></i>导航十</el-menu-item>
        <el-menu-item index="11"><i class="el-icon-document"></i>导航十一</el-menu-item>
        <el-menu-item index="12"><i class="el-icon-document"></i>导航十二</el-menu-item>
        <el-menu-item index="13"><i class="el-icon-document"></i>导航十三</el-menu-item>
        <el-menu-item index="14"><i class="el-icon-document"></i>导航十四</el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'nav',
  data () {
    return {

    }
  },
  methods: {
    handleOpen: function (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose: function (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

1. 跑起来看看效果
   

现在我们基本知道开发的基本套路了，后面在来完善,顺便再来分析下下面要做的，右侧内容区域不是固定的，会根据菜单的具体变化进行响应变化，肯定就要用vue-router了，但是我们先还是写一个死的先