使用vue.js构建一个知乎日报

Vue.js是我所喜爱的,知乎也是我喜爱的,突发奇想使用vue做了一个知乎日报

项目地址:

Github地址
在线预览demo

设计:

1.设计上没有按照知乎日报客户端的交互及UI设计来做,本渣亲自捏了一个,颜色以黑白灰为主,本来想加入知乎的蓝色,但是本渣设计功力实在太差,故舍弃掉了蓝色,只采用黑白灰三色。

2.日报条目采用无边界设计,只添加淡灰色的分割线来区分。

3.整个网页是一个单页应用(Single Page Web App),所有的数据使用vuex来进行管理,在store里统一管理。

预览:

3261015-5fed39fa95e6a680

3261015-7cc80745e558f778

3261015-af689615eee201e9

涉及到的技术:

  1. 该项目使用vue-cli构建、打包,配合vue全家桶(vuevuexvue-router)进行编码、开发
  2. 基础样式使用basscss,basscss对层叠样式表的设计方式简练、高效、可复用性强
  3. 网络请求使用axios
  4. 后台使用Node.js

vuex架构

  1. 将getters、mutations、actions变量名设定一个命名空间,否则store写的大了,命名肯定会乱,示例:

命名具有意义,并且写好注释。

  1. store分模块其实不用分模块,但还是分一下吧,为后续开发着想。
  2. 使用getters将状态(state)、数据(data)发往页面模版(template)上,发数据有两三种方式,根据自己习惯来吧,我是这样做的:

  1. mutations与actions:a、mutations是用来处理同步的事情的,比如给state中的变量赋值;

b、actions是用来处理异步的事情,比如网络请求;c、但是actions也是可以做同步的事情的,但最好按照vuex的建议来做:在mutations中处理同步操作

  1. 具体怎么处理的看我的github,记得点点赞啥的:

vuex地址
store地址

遇到的难题:

  1. 跨域。跨域是前端一个老生常谈的问题,我使用node做了一下中转,示例代码如下:

2.日报详情的渲染。日报详细内容知乎是一个html格式的字符串,而数据的请求及渲染是异步的,正常情况下来说,浏览器是无法解析成功的,但是vue提供的一个v-html方法,可以搞定,示例代码如下:

其中DONE_NEWS_DETAIL是数据

后记:

大家多多交流,互相学习啊,写的不好的地方情指正哦!

3 10 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部