前言
最近在和小伙伴们做一个微信墙的项目，踩了一些小坑，学了一些方法，仅以此篇记录
问题是页面刷新后的页面效果，这个地方诶还不太懂
需要注意的有：users的缓存、页面刷新后加载用户信息的延迟效果。
思考
业务方面的思考
1.微信墙的产品定位是什么，基于什么背景，解决什么痛点？
2.微信墙的推广策略，给用户，给我们协会带来什么效益？
3.产品设计过程做了什么事情，有什么思考，遇到什么问题？
技术方面的思考
0.技术选型
1.如何优化用户体验，理论及具体技术实现方案
2.整个微信墙前后端的流程(画个流程图)，包括前端，后端，及前后端耦合方式
3.代码架构(vue-cli脚手架)的理解，为什么这样设计，好处
4.具体技术栈的理解(以后最好是对比react做出分析)，Vue的模板编译原理(结合webpack打包原理)，双向数据绑定，编码规范；Vue-router的实现原理；Vue-resource的实现原理，为什么不使用jQuery、xhr，是否了解fetch；
5.开发过程遇到的难点，技术实现的亮点，工程提效的方法
6.对于进一步跌代的思考
参考：官网
1. 安装（推荐使用淘宝镜像cnpm，速度较快）
- npm 安装
# 最新稳定版
$ npm install vue
- 命令行工具 (CLI)
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装里面的小坑！！！
在这里卡了好久找了很多解决方法问了很多
听说node.js有很多windows的坑。。。
首先出现的问题是，我之前安装了npm 的各种包都可以正常使用，按照以上流程安装vue的时候发现无法使用，一直提示不是命令语句，一开始以为自己没安好又再安装了一次，还是不行，在网上找了方法试过重新安装node，设置环境变量等等等，都还是不行，连cnpm都不行了，哭。就这么来来回回的试，抱着再试最后一次要是还不行我就去装Linux了的心态，这一次好好选好安装路径，把东西都分类好，一步步来不心急，然后，，然后，，它就可以了，至今我没懂是为何，难道我前面安装路径没选好？？？
总之，建议安装时耐心点就这样。
2. 使用
- 如果你按照上面一步步下来都成功了的话，就会在你的根目录下生成一个my-project的文件夹
my-project文件夹
打开里面的src文件，可以看到Hello.vue
- 看到效果
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
这时就会在你的默认浏览器弹出localhost:8080。
-
主要关注以下几个文件：
-
index.html ——可以看作入口的HTML文件，组件在这里渲染
-
src/App.vue ——最外层的组件
-
src/router.js ——设置路由
-
src/components ——存放组件
-
每个xxx.vue是一个组件，引用组件需要import
-
3. 开发微信墙中遇到的问题
我在这个项目中所做的模块是签到部分
- 要求
扫描二维码签到，每两秒向后台发送一次请求，更新签到列表。 - 实现
- 签到列表采用数组的形式，把从后台获取到的newuser，push到数组中，注意数组不要过长，否则占缓存空间，而且UI交互页面不友好，暂规定数组长度为20，大于20时把前面的元素shift出来。
- 请求数据一开始使用JQuery用AJAX，但为了现阶段开发代码统一和开发效率，改用了vue-resource（原因下次分析） 如下：
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
- 那么有了signIn 的 method，要在扫描完二维码后调用，怎么办呢
这个时候就需要用到vue里面的一个生命周期钩子函数
生命周期函数详释
在扫描完二维码后，也就是挂载完成，用到的是mounted这个钩子
mounted () {
this.signIn()
}
下篇再梳理一下一些问题和思考
网友评论