Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/little-buddy/trytochat

打算用 vue + nest 做一个聊天demo.刷了几题leetcode，暂时搁浅。
https://github.com/little-buddy/trytochat

Last synced: about 1 month ago
JSON representation

打算用 vue + nest 做一个聊天demo.刷了几题leetcode，暂时搁浅。

Awesome Lists containing this project

README 

        
Vue+nodeJS 的形式构建一个 具有基本功能的 聊天web应用

---

## 目前觉得需要有的功能

* 存储聊天记录 

* 聊天互动反馈

* 用户记录

* websocket 的使用

* 登陆页面，能够适应 PC + Web

* 好友登记，只有登记了好友，才能把相应的聊天记录弄出来

* 其实可以作临时demo，但我觉得要一点难度，就把状态存储，然后进行处理

* 先期 选择渲染，后期再迁移 服务端渲染



突然觉得。我要是能把登陆模块 从 前端 -> 后端 做完美。就 oK 了



###

* 第一步 -> 用vue构建出聊天页面以及一些基本的互动

* 第二步 -> 构建node端的websocket设置

* 第三步 -> 缓存处理 以及 写入数据库( 这里的redis我打算用自己服务器进行远程连接，本地模拟多台服务部署 )



####

畅想

可以用webRtc，进行一些视频通话的功能，感觉有点难，难在传输的清晰度。。这个只是一个畅想，本地通过人脸识别，或许可以试试看



#### 实际操作，本项目不使用 vue-cli 进行配置，而是选择 自己动手从0搭建



各框架的版本请参见 package.json



毕竟刚起步，花了比较多的时间去适应这个web环境以及vue的开发模式。目前更深层次的子父组件通信还没接触到



# 踩坑点



- postcss-import 只是增加了 @import 语法，无法让webpack跟踪 url下的 路径，所以需要配合 postcss-url 

才能使postcss具有单独处理路径的能力

- postcss-preset-env 本以为这个东西类似bable-preset-env，会把目前阶段的规范全都加进去，但是我在使用 

@apply关键字的时候发现它并没有把所有规范加入，所以抛弃

- postcss-autoprefixer 没有指明浏览器的范围，似乎按目前最新2个版本是不会自动添加兼容前缀的 

- postcss-cssnext 应该是最完美的解决方案并且它本身包含autoprefixer，所以实际上你只需要引入该文件就不用添加上面4

个的依赖，import的语法可以通过sass-loader来解析，毕竟你还是无法摆脱scss的函数语法的

- 又发现一个坑，就是cssnext下的颜色变化，全称无效缩写有效但变化不准确

- 目前的感觉就是 input[type=checkbox] 用来消除原始样式，用伪元素就无法添加浮动样式了，只能添加一个硬元素



		对于使用vue进行子父组件传值，子组件可以通过 @Event 和 $emit 的形式向父组件传值，

		而父组件想要向子组件传值，要么使用层层传递，要么通过ref的形式，通过provide/inject

		的形式，但这种形式有一个弊端就是传递的值需要在父组件初始化之前就已经存在

		

		react可以通过拦截将props属性进行变更，通过context进行传递，vue呢？我一直有个问题：

		到底组件写到什么程度才有必要使用vuex，像我写的avatar仅仅才三层，写起来就异常繁琐

		

		而像react-navigation那样的库，它是一个路由库，但它本身内部实现了redux的机制，在我看来，

		复杂的UI状态并不比业务逻辑来的简单，使用状态库应该是一个必然