All Projects → JuniorTour → vue-weibo

JuniorTour / vue-weibo

Licence: other
用Vue.js及相关插件仿制的新浪微博移动版(m.weibo.cn)🌺

Programming Languages

Vue
7211 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to vue-weibo

Pixel Web
一个 Vue 微博客户端
Stars: ✭ 500 (+624.64%)
Mutual labels:  vue2, vue-router, weibo
Vue Element Quick Start
Vue2, Vuex 3, Vue Router 3, Element-ui and Typescript SPA project quick start kit(Vue element ui 快速开始脚手架)
Stars: ✭ 135 (+95.65%)
Mutual labels:  vue2, vue-router
Vue Scroll Behavior
Customize the scrolling position on route navigation. Especially hash mode.
Stars: ✭ 132 (+91.3%)
Mutual labels:  vue2, vue-router
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目,一个PC端页面入口,一个移动端页面入口,且有各自的路由, vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (+110.14%)
Mutual labels:  vue2, vue-router
Vue Mobile Cli
🚀 Vue移动端多页应用脚手架
Stars: ✭ 112 (+62.32%)
Mutual labels:  vue2, vue-router
Vue Ruby China
使用Vue.js框架搭建的ruby china山寨版,集成vue-router+vuex等
Stars: ✭ 113 (+63.77%)
Mutual labels:  vue2, vue-router
Vue Wechat
🔥 基于Vue2.0高仿微信App的单页应用
Stars: ✭ 1,832 (+2555.07%)
Mutual labels:  vue2, vue-router
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (+49.28%)
Mutual labels:  vue2, vue-router
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (+131.88%)
Mutual labels:  vue2, vue-router
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+2788.41%)
Mutual labels:  vue2, vue-router
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+2902.9%)
Mutual labels:  vue2, vue-router
Seemusic
Vue 云音乐播放器,网易云音乐API,可听网易云高品质付费歌曲。 Vue music player
Stars: ✭ 112 (+62.32%)
Mutual labels:  vue2, vue-router
Vue2 Element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 112 (+62.32%)
Mutual labels:  vue2, vue-router
Vue2 Scaffold
The best scaffold for Vue 2.x based on vue-cli#vuejs-templates/webpack
Stars: ✭ 125 (+81.16%)
Mutual labels:  vue2, vue-router
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (+52.17%)
Mutual labels:  vue2, vue-router
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (+101.45%)
Mutual labels:  vue2, vue-router
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (+223.19%)
Mutual labels:  vue2, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+1855.07%)
Mutual labels:  vue2, vue-router
Social
基于Vue的社区论坛项目
Stars: ✭ 102 (+47.83%)
Mutual labels:  vue2, vue-router
Gpk admin
✨ GeekPark Content Management System
Stars: ✭ 150 (+117.39%)
Mutual labels:  vue2, vue-router

vue-weibo

这是一个用Vue.js及相关插件模仿制作新浪微博移动版(m.weibo.cn)的单页应用(SPA)项目。

使用了vue-cli作为搭建工具,主要使用了[email protected],[email protected],[email protected],[email protected]等工具。

欢迎Issue、PR、邮件、微博等等各种交流!更欢迎点个Star🌟以示鼓励,谢谢你!

预览Demo:

点击访问vue-weibo在线demo

或扫码预览:

vue-weibo在线地址二维码

动图预览:

基本功能:

vue-weibo动图预览

路由、点赞动画、涟漪效果等演示:

vue-weibo动图预览-2

基本功能:

刷新微博、加载旧微博、简单图片预览(准备实现缩放等手势功能)、模拟iOS滑动删除效果(swipe-out)、Tab页面切换、后台模拟数据、生产环境服务器支持、登录页面、404页面等...

运行项目:

git clone https://github.com/JuniorTour/vue-weibo.git

cd vue-weibo

npm install       //推荐使用 cnpm 淘宝NPM镜像安装更快!

npm run dev       //开发环境中运行,构建完成后,自动访问http://localhost:8080/,自带热更新,便于开发。

npm run prod      //或生产环境中运行,资源经过压缩,访问更快。

To-do List:

  1. 点赞动画特效! -2017/7/18
  2. 滑动删除消息 -2017/10/9. Refactored-2018/5/20
  3. 图片预览功能完善及手势支持
  4. local storage/service worker
  5. IOS手机添加至桌面功能 -2017/7/8
  6. 登录页面、404页面及相应的路由 -2017/7/6
  7. ripple effect -2017/7/8~
  8. 优化整理代码,优质的代码就是最好的注释 -2017/12
  9. 评论、转发功能 -2018/6/1
  10. 考虑给发现和我两个tab也加上一些有趣的交互,展示统计数据
  11. 完善登录页面组件及其功能 -2017/12/16
  12. 完善prod-server -2017/12/16
  13. 下拉刷新

项目结构:

.
├── build/              # webpack config files
│   └── ...
├── config/
│   ├── index.js        # main project config
│   └── ...
├── notes/
│   └── ...             # 制作过程中的一些笔记。
├── src/
│   ├── assets/         # 字体、样式等module 资源 (会被webpack处理)
│   │   └── ...
│   ├── components/     # 局部组件
│   │   └── ...
│   ├── data/           # 模拟数据
│   │   └── ...
│   ├── pages/          # 主要页面组件
│   │   └── ...
│   ├── main.js         # app 入口文件
│   ├── App.vue         # 主要app组件
├── static/             # 图片等纯静态资源
├── test/
│   └── unit/                  # unit tests
│      ├── specs/              # test spec files
│      ├── index.js            # test build entry file
│      └── karma.conf.js       # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].