新项目的vue组件

项目地址:http://pan.baidu.com/s/1qYIxCXu

很久没有写博客的原因的是之前一直在解决一个问题,这个问题就是:我们在写组件的时候，官方推荐把css写在组件里面,但是如果我们写在把css写在组件里面的话最终打包的时候,会把组件里面的css打包到页面上,但是这样很不雅观,幸好ExtractTextPlugin提供一个功能可以把vue组件里面的css打包到具体的业务css里面,但是这样会产生一个问题,如果有一个组件我们每一个页面都会用到,那这个组件里面的css最终会被打包到每一个页面的css里面,但是我们希望的是如果这个组件每一个页面都会用到,这个组件里面的css最好可以打包到base.css里面,这样可以很好的利用页面缓存技术,

所以之前一直在解决这个问题,但是一直没有好的解决方案,最终找了一个折衷的方案,就是我们在编写组件的时候,如果这个组件是给单个页面使用的那么他的css可以写在组件里面,如果这个组件是通用的,那么我们会把他的css写在base.css里面。之所以介绍这些,是因为下面我在介绍组件的时候,都是通用组件,而你会看到我的通用组件里面并没有写css，这些css都在base.css里面,你可以根据组件名在base.css搜索到对应组件的css，而且新项目是基于bootstrap3做的,所以某一些特定组件需要您引用bootstrap3.css

下面介绍第一个组件:就是后台管理中心的菜单组件,这个组件主要包含以下功能:1:响应式 2:根据菜单数据来展示菜单（支持多层级）3：附加一个消息列表

使用:下载下来项目后找到component文件夹;其中navigation.vue，menuTree.vue，menuTreeItem.vue，navTree.vue，navTreeItem.vue就是我们的菜单组件了,menuTree.vue，menuTreeItem.vue表示左侧菜单,navTree.vue，navTreeItem.vue表示导航栏选项。我们在使用的时候直接引入navigation.vue就好了,然后在页面里使用<navigation></navigation>就可以显示,因为这是一个demo所以数据暂时是写死的,你可以在menuTree.vue里面找到配置菜单数据的选项，你可以在navTree.vue里面找到配置导航栏选项的数据,最后运行的时候不要忘记引入bootstrap的css和字体,以及base.css对应的部分