vue初尝试--组件
组件 (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>