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://upload-images.jianshu.io/upload_images/3810529-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（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語法寫樣式文件，這種語法的好處是可以定義變量，方便在後面的樣式定義可以避免編寫重復的變量
  

<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>

vue初嘗試--組件