vue项目架构

项目架构

前几天刚刚了解了一些iOS项目的架构，觉得感慨万分，如果在我的项目成型之前读到这些文章该多好，至少我的项目架构会考虑的更全面一些。
吃一堑，长一智，所以手头上的vuejs搭建的kd云之家的项目架构要提前考虑好。
公司没有人搞过vue，前端工程师姐姐也是第一次搞，何况我这个iOS出身的。百度吧，百度不行就谷歌。

---

搜到一个项目，和一篇文章。项目不错，文章有指导意义，虽然作者很谦虚。。。

1. 看项目最直观的是网络 api 的封装，分两层，网络请求封装为一层（get，post），对外业务层封装为一层

2. 项目不大，其他最重要的倒是对vue的准确适用
   

   • router API
     router API在vue页面中
     route: {
data(transition) {
var params = transition.to.params;
api.cafe.topics(params.slug, params.page, resp => {
transition.next({
pagination: resp.pagination,
topics: resp.data,
});
});
}
},
     

   在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。


可见对于页面的初始化加载，用这个比用ready，create要正当一些
• computed
  computed: {
user() {
return this.$root.user;
},
canWrite() {
var permission = this.cafe.permission || {};
return permission.write;
},
isAdmin() {
var permission = this.cafe.permission || {};
return permission.admin;
}
},
  你应该注意到 Vue.js 的计算属性不是简单的 getter。计算属性持续追踪它的响应依赖。在计算一个计算属性时，Vue.js 更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，而不是调用 getter。

可见compute 可以使用缓存机制，对于增加速度是有帮助的。

• 组件命名
  计算科学中最难的两件事是命名和缓存失效。
  由于vue采用组件化开发，每个组件都是一个文件，文件比较多，所以命名要提现出该控件的通用性。不要觉得命名短才是好，命名应该尽量表达清晰意义。