/gank

一个 vue 的练手项目

Primary LanguageJavaScript

gank

Build Status Dependency Status

一个 vue2 实战项目，实现了一个 gank.io 资源的阅读应用。欢迎 star/fork。

项目总结

用到的开源项目

  1. vue
  2. vue-router
  3. vuex
  4. mint-ui
  5. vue-resource
  6. vue-awesome-swiper
  7. vue-cli
  8. vuejs-templates/webpack
  9. pug 本项目中 vue 模板使用 pug 书写，另外提供了 HTML 版本，可切换到 html 分支查看。

预览

demo（请用手机模式预览）

欢迎使用手机扫一扫打开，若微信中打不开请点击右上角用浏览器打开：

qrcode

实现的功能

  • 无限滚动
  • 夜间模式
  • 图片懒加载
  • 左右滑动切换
  • 多终端大小自适配(只考虑了 iOS)
  • 应用内跳转保存跳转前的位置
  • 切换主题色（做成一个小组件了）
  • 等等

首页

home

滑动切换及位置保存

slide&position-store

选择主题色及夜间模式

主题色页面的色盘颜色可在 src/config/index.js 中改变，主题色及夜间模式会保存在 localStorage 中，所以下次打开还是之前的主题

mode&theme

安装编译

注意

如果 node-sass 安装遇到问题，可参考 lmk123/blog#28

# 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

目录结构

├── assets             // Readme 图片资源
├── build              // 构建服务和webpack配置
├── config             // 不同环境的配置
├── dist               // build目录
├── index.html         // 入口文件
├── src                // 源码目录
│   ├── components     // 各种组件
│   ├── config         // 页面配置，如主题配置
│   ├── store          // vuex 状态管理
│   ├── router         // 路由配置
│   ├── utils          // 工具接口
│   ├── views          // 页面视图
│   ├── App.vue        // 主页面
│   └── main.js        // Webpack 预编译入口

感谢

  • gank.io 提供的 api
  • 开源项目贡献者
  • 开源项目文档撰写者

License

MIT License