社区club-web的那2个小项目（PC端和移动端）-vue架构梳理

vue组件文件以.vue结尾，包含三部分：
- template: 模板，被编译到render function中
- style: 样式，可以使用less/sass作为预处理器；局部css可以使用scoped
- script: 组件的JS逻辑部分

单页应用，入口文件是main.js，会引入router,store,template。然后template引入index.html。
每个.vue文件对应一个组件，其中有tmeplate/scss/js。最后生成js，htmlwebpackPlugin插件会把scss提取出来。
这些js文件 最后会一次性插入到index.htm中。显示隐藏和跳转，由.vue中的js控制,类似angularjs中的controller。

store下面的js文件是存每个页面对应的数据，修改数据状态的。通过调用api.js中跟后端交互的一些方法，进行每个页面的数据读取修改。
可以类比小型数据库的增删改查。

vue中store和angular中service有相似之处，但vue中是全局的，定义一次，其它地方都可以用。不用像angular中依赖注入到controller中。

移动端和pc的区别：
移动端的club-web-mobile和pc端的club-web，架构，功能，代码基本都一致，差别只在ui。调试的时候，一是直接在浏览器选择手机模式调试。一是启动项目，然后通过charles拦截请求转发。

在charles工具栏tools中的Map Remote Setting中，add一个远端映射，配置协议，域名和端口。host自己配，port是项目的port。配置完成点击两次OK。

去终端用ifconfig 命令查IP。用en0的inet 中的IP去和电脑在同一局域网的手机wifi中，设置HTTP代理，服务器就是上述IP。端口：charles默认的8888，charles端口可以在Proxy下自己设置。

然后就可以在手机浏览器输入配置的host进行测试访问。