vue初尝试--组件

github代码同步网址

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

组件是vue中比较重要的一个概念，网页结构的构成都要依赖组件，页面的某个组成部分都才可以写成一个组件，然后在其他的页面中调用该组件，组件一般都写在components文件夹中。下面举一些具体的例子进行详细讲述：

1、网页首先进入index.html入口文件，当dom渲染到<div id="app"></div>部分的时候，vue默认机制就跳转到src文件夹中main.js文件，在main.js里面寻找到一个全局组件App.vue，进而跳转到App.vue中进行dom渲染

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

---

2、组件都写在<template>标签内，当dom渲染到<router-view/>时，就自动跳转到router中的index.js路由文件中，路由文件定义相应的url进入相应的组件，路由的定义分下面4步
router中的index.js文件

import Vue from 'vue'![微信截图_20180314103850.png](https:https://img.haomeiwen.com/i3810529/fe7323678a38f5a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import Router from 'vue-router'
//1、 定义组件，从其他文件import进来
import layout from '../components/layout'

Vue.use(Router)

//2、定义路由对象，每个路由应该映射一个组件
const routes =[
  {
    path:'/',
    component:layout
  }
]

//3、创建 router 实例，然后转 `routes` 配置
const router = new Router({
  mode: 'history',
  routes
})

//4、创建和挂载路由，从而让整个应用都有路由功能
export default router

PS：第三步中的mode:'history'是为了去除url中的"#"

---

3、编写layout.vue组件，这里推荐使用一个前端框架，element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架

• 安装（推荐使用npm的方式安装，它能更好的和webpack打包工具配合使用）
  cnpm install --seve element-ui
  加上--save命令，在package.json里就会自动加入，下次拉取项目直接install就可以直接安装
  安装element-ui package.json
• 引入element-ui（element-ui可以完整引入，也可以按需引入，http://element.eleme.io/#/zh-CN/component/quickstart），为了达到减少项目体积的目的，建议按需引入，比如要用element-ui中的菜单组件，就在main.js文件中：

import {
  Menu,
  MenuItem,
} from 'element-ui'

Vue.use(Menu)
Vue.use(MenuItem)

• 编写layout文件，顾名思义，layout可以作为一个布局文件，在整个layout里面会有标题、菜单等子组件，为了使结构更加清晰，可以将标题栏、菜单等部分都写成组件的形式，然后在layout中调用

<template>
  <div>
    <side-bar></side-bar>
  </div>
</template>

<script>
import sideBar from "./wigdets/side-bar.vue";
export default {
  components: {
    sideBar
  }
}
</script>

---

4、编写side-bar.vue组件

• element-ui的组件语法都可以在官网上找到相应的例子，只要按照官网的例子进行编写就可以了
  PS：样式文件安装sass语法cnpm install sass-loader node-sass --save-dev安装这两个依赖包之后就可以用sass语法写样式文件，这种语法的好处是可以定义变量，方便在后面的样式定义可以避免编写重复的变量
  安装sass语法.png

<template>
  <div id="navBar">
    <el-menu  class="el-menu-vertical-demo" text-color="#fff" unique-opened router>
      <el-menu-item index="1-1">
        <span slot="title">User</span>
      </el-menu-item>
      <el-menu-item index="1-2">
        <span slot="title">Service</span>
      </el-menu-item>
      <el-menu-item index="1-3">
        <span slot="title">Source</span>
      </el-menu-item>
      <el-menu-item index="1-4">
        <span slot="title">App</span>
      </el-menu-item>
      <el-menu-item index="1-5">
        <span slot="title">Key</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
  $sideWidth: 260px;

  #navBar {
    z-index: 2;
    width: $sideWidth;
    height: 100%;
    background: #3E3E3E;
    flex-shrink: 0;
    color:#B8B8B8;

    span{
      color:#B8B8B8;
    }

    i {
      font-size: 20px !important;
      padding: 0 10px 0 40px;
      display: inline-block;
      width: 75px;
      color:#B8B8B8;
    }
  }

  $menuHeight:70px;

  .el-menu{
    border-right: 0;
    background: #3E3E3E;
  }

  .el-menu-item{
    height: $menuHeight;
    line-height: $menuHeight;
    font-size: 16px;
    border-bottom: 1px solid rgba(107, 108, 109, 0.19);
    padding: 0 10px;
  }

  #navBar .el-menu-item:hover{
    background: #575757 !important;
    cursor: pointer;

    span{
      color: #F36A5A;
    }
  }

  #navBar .el-menu-item.is-active{
    background: #f5f5f5 !important;

    span{
      color: #F36A5A;
    }

    i{
      color: #F36A5A;
    }
  }
</style>

layout中side-bar.png