{"id":13421883,"url":"https://github.com/uncleLian/vue2-news","last_synced_at":"2025-03-15T10:31:27.827Z","repository":{"id":55370743,"uuid":"90235315","full_name":"uncleLian/vue2-news","owner":"uncleLian","description":"基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用  —— 今日头条（移动端）","archived":false,"fork":false,"pushed_at":"2022-12-07T14:25:55.000Z","size":18645,"stargazers_count":502,"open_issues_count":14,"forks_count":141,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-27T22:28:14.993Z","etag":null,"topics":["mint-ui","native","news","spa","toutiao","vue","vue-cli","vue-router","vuex","webpack"],"latest_commit_sha":null,"homepage":"http://toutiao.liansixin.win","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uncleLian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-04T07:41:52.000Z","updated_at":"2024-10-24T07:12:42.000Z","dependencies_parsed_at":"2023-01-23T20:15:43.098Z","dependency_job_id":null,"html_url":"https://github.com/uncleLian/vue2-news","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncleLian%2Fvue2-news","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncleLian%2Fvue2-news/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncleLian%2Fvue2-news/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uncleLian%2Fvue2-news/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uncleLian","download_url":"https://codeload.github.com/uncleLian/vue2-news/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719043,"owners_count":20336591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mint-ui","native","news","spa","toutiao","vue","vue-cli","vue-router","vuex","webpack"],"created_at":"2024-07-30T23:00:33.404Z","updated_at":"2025-03-15T10:31:26.697Z","avatar_url":"https://github.com/uncleLian.png","language":"JavaScript","funding_links":[],"categories":["客户端"],"sub_categories":[],"readme":"# vue2-news\n![image](https://img.shields.io/badge/vue-2.5.13-blue.svg)\n![image](https://img.shields.io/badge/vue--router-3.0.1-blue.svg)\n![image](https://img.shields.io/badge/vuex-3.0.1-blue.svg)\n![image](https://img.shields.io/badge/mint--ui-2.2.13-blue.svg)\n\n## 公告\n- API 接口已失效‼️\n- 原项目已拆分，此仓库保留今日头条（web端代码），[native端代码，请戳这里](https://github.com/uncleLian/vue2-native)\n\n## 简介\nvue2-news 是一个仿今日头条移动端的项目，共4个页面，涉及文章的分类、展示、阅读、推荐、搜索等。\n\n## 说明\n\u003e 如果此开源系列对你有帮助，你可以点右上角 \"star\"支持一下，非常感谢！^_^ 🌹\n\n\u003e 或者您可以 \"follow（关注）\" 一下作者，我正在不断开源更多实用的项目\n\n\u003e 如有问题可以直接在 Issues 中提，或者加入我们下方Vue群更进一步地交流\n\n## 最终目标\nVue学习系列\n- 第一阶段：[vue2-echo](https://github.com/uncleLian/vue2-echo) —— echo回声（ 移动端，难度：★★☆☆☆  入门项目， 推荐 ⭐️⭐️⭐️️⭐️⭐️）\n- 第二阶段：[vue2-news](https://github.com/uncleLian/vue2-news) —— 今日头条（ 移动端，难度：★★★☆☆ 过渡项目）\n- 第三阶段：[vue2-health](https://github.com/uncleLian/vue2-health) —— 头条号（ pc端，难度：★★★☆☆ 过渡项目）\n- 第四阶段：[vue2-native](https://github.com/uncleLian/vue2-native) —— 今日头条（ native端，难度：★★★★☆ 进阶项目，可跳过）\n- 第五阶段：[vue-blog](https://github.com/uncleLian/vue-blog) —— 后台管理集成解决方案（ pc端管理后台，难度：★★★★★ 进阶项目，推荐 ⭐️⭐️⭐️️⭐️⭐️️️️）\n\n##### 注：此系列只关注前端项目的实现，后端等知识不是此系列的范围，但会告知一二。\n\n## 注意\n\n\u003e 1、本地运行项目请把项目里的mint-ui.common.js文件替换掉 node_modules/minit-ui/lib/mint-ui.common.js文件。主要优化下拉动作和左右滑动的体验。\n\n\u003e 2、下载App安装包请使用手机浏览器下载。\n\n## 项目演示\n\n[ 在线链接 ](http://toutiao.liansixin.win)（请使用手机模式预览）\n\n\u003cimg src=\"https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_QRcode.png\" width=\"250\" height=\"250\"/\u003e\n\n## 功能\n\n- [x] 下拉上滑查看更多内容\n- [x] 左右滑动切换栏目列表\n- [x] 点击头部回到顶部（指令）\n- [x] 右滑返回上一页（指令）\n- [x] 视频播放的加载、重播指示以及悬浮等功能\n- [x] 热点文章和搜索推荐（后台算法）\n- [x] 文章标签（后台算法）\n- [x] 分享\n- [x] 搜索（关键字高亮显示）\n- [x] 刷新保持页面的数据和状态\n- [x] 展开全文\n- [x] 下载页（目前只支持下载Android包）\n\n## 部分截图\n\n- 首页、详情页\n\n\u003cimg src=\"https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_index.png\" width=\"365\" height=\"619\"/\u003e \u003cimg src=\"https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_detail.png\" width=\"365\" height=\"619\"/\u003e\n\n- 搜索页\n\n\u003cimg src=\"https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_search.png\" width=\"365\" height=\"619\"/\u003e \u003cimg src=\"https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_search2.png\" width=\"365\" height=\"619\"/\u003e\n\n\n\n## 目录结构\n\n\n``` bash\n├── build                                        // 构建相关  \n├── config                                       // 配置相关\n├── src                                          // 项目代码\n│   ├── assets                                   // 样式、图标等静态资源\n│   ├── components                               // 全局公用组件\n│   │   ├── banner.vue                           // banner组件\n│   │   ├── commentItem.vue                      // 评论Item组件\n│   │   ├── error.vue                            // 错误提示组件\n│   │   ├── info.vue                             // listItem的列表信息组件\n│   │   ├── listItem.vue                         // 文章List组件\n│   │   ├── loading.vue                          // 加载提示组件\n│   │   ├── myHeader.vue                         // 头部组件\n│   │   ├── popuMenu.vue                         // 模态框组件\n│   ├── config                                   // 全局公用方法\n│   │   ├── cache.js                             // 缓存方法\n│   │   ├── directive.js                         // 指令方法\n│   │   ├── fetch.js                             // 请求方法\n│   ├── page\n│   │   ├── detail\n│   │   |   ├── components\n│   │   |   |   ├── article.vue                  // 文章组件\n│   │   |   |   ├── recommend.vue                // 推荐组件\n│   │   |   |   ├── share.vue                    // 分享组件\n│   │   |   |   ├── tags.vue                     // 标签组件\n│   │   |   ├── detail.vue                       // 详情页\n│   │   ├── index\n│   │   |   ├── children\n│   │   |   |   ├── channel.vue                  // 栏目页\n│   │   |   ├── components\n│   │   |   |   ├── index_footer.vue             // 首页底部组件\n│   │   |   |   ├── index_header.vue             // 首页头部组件\n│   │   |   |   ├── pullContainer.vue            // 下拉容器组件\n│   │   |   |   ├── swiperContainer.vue          // 滑动容器组件\n│   │   |   ├── index.vue                        // 首页\n│   │   ├── search\n│   │   |   ├── search.vue                       // 搜索页\n│   ├── router\n│   │   ├── index.js                             // 路由配置       \n│   ├── store\n│   │   ├── detail\n│   │   |   ├── index.js                         // 详情页store\n│   │   ├── index\n│   │   |   ├── index.js                         // 首页store\n│   │   ├── search\n│   │   |   ├── index.js                         // 搜索页store\n│   │   ├── index.js                             // 全局store\n│   ├── App.vue                                  // 页面入口\n│   └── main.js                                  // 程序入口\n├── static                                       // 空文件夹，只作为github保留\n├── .babelrc                                     // babel-loader 配置\n├── .eslintrc.js                                 // eslint 配置项\n├── .gitignore                                   // git 忽略项\n├── index.html                                   // 入口html文件\n└── package.json                                 // package.json\n```\n\n## 安装运行\n\n``` bash\n# 安装\nnpm install\n\n# 运行 localhost:8086\nnpm run dev\n\n# 打包\nnpm run build（File in the docs folder）\n```\n\n## 交流\n\n欢迎热爱学习、忠于分享的朋友一起来交流\n- Vue交流群：338241465\n\n## License\n\n[MIT](https://github.com/uncleLian/vue2-news/blob/master/LICENSE)\n\nCopyright (c) 2017-present，uncleLian","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuncleLian%2Fvue2-news","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FuncleLian%2Fvue2-news","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuncleLian%2Fvue2-news/lists"}