技术 | Vue2.0 实践，顺手撸了一个小项目
如图：惬意
传送门：https://github.com/icepy/index-oa-template，或阅读原文。
这个项目的背景还要从“移动企业门户”说起，这是我厂的一个小项目，现也开源在Github上，其目的是为了给企业开发自己的企业门户提供参考和模板，可以快速的用起来，或者参考一下我们是如何来实现移动企业门户的。
Demo 效果如图：
这个项目，主要使用了Vue2.0和Vue-router，其实Vue-router不是必须的，因为这只有一个页面，但是也应用到了Vue的方方面面。在创建项目时，用了vue-cil来初始化这个项目，不过我也为它修改了一些自己想要的东西，没错就是weex相关的构建与入口，具体如何用同一个Vue2.0项目既可以跑Web也可以跑Native，你可以参考一下我这个项目中的weex分支。
既然用到了vue-router，那还是简单的贴一下代码，非常简单：
import Vue from 'vue'
import Router from 'vue-router'
import Home from 'pages/home/index.vue'
Vue.use(Router);
const routes = [
{
path: '/',
name: 'home',
component: Home
}
];
export default new Router({
routes: routes
});import Vue from 'vue';
import App from './App';
import router from './router';
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});router的配置可以看的出来，非常的简单，一个对象用来描述一个path的所有，也是如此，你可以顺手的描述其它的规则，有path，component，等等。
整体的组件也是非常简单的，因为只需要引用即可。实际上稍微复杂一点的地方，主要在page/home/index.vue文件中，因为在这个文件里做了一些其它的事情，比如获取userid实现免登，那么只有当获取到userid之后才能去获取用户信息，也就是界面 下午好，管理员，icepy的变更。我用了$watch来处理这个问题，比较简单，：
this.$watch('userId',function(){
this.getUserInfo();
});getUserInfo定义在methods中：
getUserInfo: function(){
// 根据userid获取用户详细信息
const self = this;
const getUserInfoRequest = {
url: OPENAPIHOST + '/api/get',
params: {
userid: this.userId
}
};
dingWISDK.getUserInfo(getUserInfoRequest).then(function(response){
const data = response.data;
self.meta.userInfo = data;
}).catch(function(error){
alert('获取用户信息 error：' + JSON.stringify(error));
});
}当userid有变化时，立即调用getUserInfo来更新用户界面。
其实从源代码中可以看见，界面都是一个个单独的组件，通过数据的传递来渲染，单组件文件系统，没什么好说的，大家有兴趣可以多看一看官网的文档。当你不需要加入vuex时，对于驱动界面还是比较简单的，书写下来，只是有一些地方需要注意，特别是React开发者转过来的：
- props传递，需要用v-bind:，并且在子组件中用props:[]来声明
- 监听事件时不需要bind，v-on:click="microAppsOpenLink(item,$event)"
- 建议很多东西都写全，不要写简写，比如:xxx这种，如果不是长期应用vue的开发者，看起来还要思考很久
- 因为dom变成了模板，模板有编译的过程，处理类似比如自动触发一个事件这样的需求时需要想一想，ref的处理，看起来没那么直观
- 引用组件的时候，需要显示的声明，比如：
components: {
banner: banner,
applist: applist,
item: item,
admin: admin,
userlist: userlist,
appmanager: appmanager
},也许还有很多需要注意的细微之处，待你慢慢挖掘了。
比较好的消息是WebStorm开始原生支持Vue了，可见其火热的趋势，回过头来可以看到我们做事情时的一些反思：贵在坚持。
你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。