社区club-web的那2个小项目(PC端和移动端)-vue架构梳理
vue组件文件以.vue结尾,包含三部分:- template: 模板,被编译到render function中- style: 样式,可以使用less/sass作为预处理器;局部css可以使用scoped- script: 组件的JS逻辑部分
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进行测试访问。
更多推荐
所有评论(0)