介绍
Vuejs火了有一段时间了，但是之前自己还没有一个线上项目中使用它。刚搞公司前一段时间有个新项目要开发，再加上大BOSS那边要求使用Vuejs来做，自己也就毫不犹豫的接了下来，并用了Vuejs作为开发框架。那为什么要用它呢？有以下原有：
- 易用/灵活/性能（哈哈~来自官网）
- 对自身的技术面的拓展和提升
- 后台项目，表单编辑比较多，很适合使用双向绑定的方式来控制
data和view - 公司层面希望技术栈统一
过程
技术
1.构建工具
构建工具方面参考了尤大大的[vue-cli](https://github.com/vuejs/vue-cli)和vue-element-admin(https://github.com/PanJiaChen/vue-element-admin)，当然也可以看看自己的小(DEOM)[https://github.com/Hancoson/vue-manage]。也基本都是copy第三方的，没有自己去造轮子。
2.技术栈
使用到的技术栈如下：
目录结构：
1 |
|
3.主要技术点分析
路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21export default new Router({
//mode: 'history',
routes: [
{
path: '/',
redirect: '/admin/index/carousel'
}, {
path: '/',
component: resolve => require(['../components/common/home/home.vue'], resolve),
children: [
//首页
{
path: '/',
component: resolve => require(['../components/pages/focus/Index.vue'], resolve)
},
……
]
}
]
})数据流：
父组件到子组件，在父组件调用子组件时通过
v-bind(:)绑定动态数据，在子组件，使用Prop方法（单项绑定，防止数据倒流）父：
<edit-dialog :dialogData="dialogData" :rendom="new Date().getTime()"></edit-dialog>子：
1
2
3
4props: {
dialogData: Object,
rendom: Number
}子组件中通过
watch方法来监控数据是否改变，可触发相应的方法。子组件到父组件，在父组件中使用
v-on(@)绑定自定义事件接收，在子组件中使用$emit来监控，并传给回掉。
父：<edit-dialog @message="recieveMessage"></edit-dialog>子：
1
this.$emit('message', data)
非父子组件，有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
1
var bus = new Vue()
1
2// 触发组件 A 中的事件
bus.$emit('id-selected', 1)1
2
3
4// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
小结
乱七八糟的写了很多，也算是对这段时间用vue.js的一个回顾。不得不承认，在使用vue.js的过程当中开始逐渐喜欢上了这个优美而简洁的框架。因此也愿意跟更多的人分享使用它的经验。也欢迎大家一起交流。
