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://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
      </el-menu-item>
      <el-menu-item index="1-2">
        <span slot="title">Service
      </el-menu-item>
      <el-menu-item index="1-3">
        <span slot="title">Source
      </el-menu-item>
      <el-menu-item index="1-4">
        <span slot="title">App
      </el-menu-item>
      <el-menu-item index="1-5">
        <span slot="title">Key
      </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>

相关推荐