基于vue的material design风格的cnode社区
Vue JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
build
config 登陆提示 Jun 4, 2017
screen
src
static
.babelrc
.editorconfig
.gitignore
.postcssrc.js
README.md
index.html
package.json

README.md

vue-cnode社区

预览地址:点此查看 使用chrome模拟手机查看

基于vue全家桶的Material Design风格Cnode社区

尽量接近原生App的Material Design风格,参考了Google Play,Cnode的Android客户端。

另外推荐一下自己另一个vue + express + nodejs爬虫构建的整站移动书城项目:地址

技术栈

vue2 + vue-router2 + vuex + es6 + webpack + axios + scss + flex + vue-material

描述

  • 单页面应用:通过vue-router跳转
  • 状态管理:使用vuex实现组件通信,也有一些父子组件使用props通信
  • MD风格:使用vue-material组件库来实现高仿原生md风格
  • icons:使用Google官方的material design icon
  • markdown编辑器:mavonEditor
  • 无限滚动:vue-mugen-scroll 实现思路是滚动到底部使page加1,然后通过watch监听page的变化,再获取数据通过concat凭借到原列表
  • 移动端适配:在head标签通过js动态设置html标签的font-size,配合sass的自定义函数,具体可以参考这篇文章,使用方式比如width:100px;可以写成width:pr(100);

Build Setup

git clone git@github.com:tgxhx/vue-md-cnode.git

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

功能

  • 登录
  • 保存登录
  • 注销
  • 切换分类
  • 主题列表
  • 主题详情
  • 滚动加载
  • 发帖
  • 回复
  • 回复某人
  • 收藏
  • 点赞
  • 个人中心
  • 消息
  • 消息已读
  • 移动端适配

部分截图