vue2-news

preface

The UI of this project is modeled after Toutiao, but I made as many modifications as possible. I am not in UI design, how can I still see the past, click “star” in the upper right corner to support 🌹

The project includes mobile terminal and Native terminal. There are 4 pages on the mobile terminal and 20 pages on the native terminal, involving the classification, display, reading, recommendation, search and user login, comment, collection and background article editing, etc., which is a complete ecological chain. The complexity goes without saying. If the project is manageable, your Vue skills have reached a certain level, and most companies’ single-page applications are not a problem.

Technology stack

Vue2, vuex3, vuE-Router3, vue-awesome-swiper, vue-quill-editor

Axios, mint-UI, flexible.js, IconFont

Es6/7, Stylus, ESlint, WebPack3,

instructions

If it is helpful to you, you can click “Star” in the upper right corner. Your support is my biggest motivation! Thank you very much! ^_^ 🌹

Or you can “follow” and I will open source more interesting and useful projects

Development environment macOS 10.12.6, Chrome 61, NodeJS 8.4.0

If you have any questions, please directly raise them in Issues, or if you find problems and have a good solution, please feel free to contact PR 👍

This project is one phase in this open source series, see the end goal below for more

The ultimate goal

  • Stage 1: Echo echo (mobile terminal, difficulty: simple ~ medium) — Warehouse address — project demo address

  • Stage 2: Toutiao (mobile & Native, difficulty: difficulty) — Warehouse address — mobile demo address, native demo address

  • Stage 3: Toutiao Number (PC, difficulty: medium ~ difficult) — warehouse address — still under development, please look forward to it! (Core functions have been implemented)

Note: this series only focuses on the implementation of front-end projects, back-end knowledge is not the scope of this series, but will give you some information.

Pay attention to

1. Please replace the mint-ui.mon. js file in the project with node_modules/minit-ui/ lib/mint-ui.mon.js file. The main optimization is to pull down and slide left and right. Mint-ui loadMore component drop down problem

2. The project uses the Hash mode of vue-Router. There are a lot of codes for recording the position of scroll bars on the page in the project, which is a little inelegant. An instance of the history pattern is required. For details, see vuE2-Echo and vue2-Health in Phase 1 and Phase 3

3. Some codes of native terminal cannot take effect in the browser. These codes are used for mobile app, such as obtaining device UUID and wechat client login. The technology is to use Cordova to package apps and add-ons using Cordova. For details, see the website of Cordova

4. If the running project has a grey screen, it is probably code for opening the beforeRouteEnter hook in the app.vue file. This is mainly used for apps that need to load the Cordova plug-in before entering the project. The browser will not open this code into the project.

5, about the background article management, the operation is the real background data, although there is no value, but in order to everyone can view a very real data information, do not mess with the original data, you can create a new task to view the effect, thank you.

Results demonstrate

Web demo please click here (please use Chrome mobile mode preview)

Native demo (please use Chrome mobile mode preview)

Install package please click here (currently only support Android)

function

Common function

  • [x] Drop down slide up request data
  • [x] Slide left and right to switch columns
  • [x] Click the header to return to the top of the page
  • [x] Right slide back to previous page
  • [X] Loading, replay instructions and suspension functions of video playback
  • [x] Hot articles and Search recommendations (background algorithm)
  • [x] Article tag (background algorithm)
  • [X] Sharing function (mobile terminal sharing website, native terminal wechat sharing)
  • [x] Search function

The mobile terminal

  • [x] Refresh preserves the data and state of the page
  • [x]
  • [X] Download page (currently only support Android package download)

Native client

  • [x] add/subtract column
  • [x] Browse history
  • [x] wechat client login
  • [x] Likes, favorites, comments
  • [x] Delete browsing history, favorites, comments
  • [x] Keeps the user’s login status, browsing history, favorites and other data
  • [x] Background article management (publish, modify, delete, withdraw, preview, etc.)
  • [x] Launch AD page
  • [x] Hot update, version update
  • [x] GPS positioning
  • [] Message push (aurora push: not tuned, not tuned…)

Part of the screenshot

The mobile terminal

  • Home page, details page

  • Search page

  • GIF

Native client:

  • Home page, details page

  • Channel page, user page

  • Background article management page, advertising page

  • GIF

The directory structure

Total directory

├─ News-app // Native App ├─ news-web // Mobile App ├─ // ScreenShots ├─ mint-ui.mon.js // Modified mint-UI source code file ├─ Readme. md // Project introductionCopy the code

Mobile directory

│ ├─ Build │ ├─ config │ ├─ SRC │ ├─ Assets │ ├─ Parts │ ├─ Build │ ├─ config │ ├─ SRC │ ├─ Assets │ ├─ Banner // Banner Component │ │ ├─ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // ListItem List information component │ │ ├ ─ ─ listItem. Vue / / article List component │ │ ├ ─ ─ loading. The vue / / loading directions component │ │ ├ ─ ─ myHeader. Vue / / head component │ │ ├ ─ ─ │ ├─ ├─ js │ │ ├─ directive.js │ │ ├─ directive.js // │ │ ├─.js // │ │ ├─ directive.js // │ │ ├─.js // Request method │ ├ ─ ─ page │ │ ├ ─ ─ the detail │ │ | ├ ─ ─ components │ │ | | ├ ─ ─ the article. The vue / / article component │ │ | | ├ ─ ─ how. │ vue / / recommend component │ | | ├ ─ ─ share. Vue / / share components │ │ | | ├ ─ ─ tags. The vue / / label component │ │ | ├ ─ ─ the detail. The vue / / details page │ │ ├ ─ ─ index │ │ | ├ ─ ─ children │ │ | | ├ ─ ─ channel. Vue/page/column │ │ | ├ ─ ─ components │ │ | | ├ ─ ─ index_footer. Vue / / at the bottom of the page component │ │ | | ├ ─ ─ index_header. Vue / / Front page head component │ │ | | ├ ─ ─ pullContainer. Vue / / dropdown container components │ │ | | ├ ─ ─ swiperContainer. Vue / / sliding container components │ │ | ├ ─ ─ index. The vue / / homepage │ │ ├ ─ ─ search │ │ | ├ ─ ─ the search. The vue / / search page │ ├ ─ ─ the router │ │ ├ ─ ─ index. The js / / routing configuration │ ├ ─ ─ store │ │ ├ ─ ─ the detail │ │ | ├ ─ ─ Index. Js / / details page store │ │ ├ ─ ─ index │ │ | ├ ─ ─ index. The js/store/front page │ │ ├ ─ ─ search │ │ | ├ ─ ─ index. The js/store/search page │ │ ├ ─ ─ Index. Js / / global store │ ├ ─ ─ App. Vue / / page entry │ └ ─ ─ main. Js / / program entrance ├ ─ ─ the static / / empty folder, Keep ├─.babelrc // babel-loader configure ├─.eslintrc.js // esLint Configure ├─.gitignore // gitignore ├─ index.html // ├ ─ ├ ─ garbage // package.jsonCopy the code

Native client directory

│ ├─ Build │ ├─ config │ ├─ SRC │ ├─ Assets │ ├─ Parts │ ├─ Build │ ├─ config │ ├─ SRC │ ├─ Assets │ ├─ Banner // Banner Component │ │ ├─ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // Review Item component │ │ ├─ Error.vue // ListItem List information component │ │ ├ ─ ─ listItem. Vue / / article List component │ │ ├ ─ ─ loading. The vue / / loading directions component │ │ ├ ─ ─ myHeader. Vue / / head component │ │ ├ ─ ─ │ │ ├─ ├─ Vue │ │ ├─ Tool. Vue │ │ ├─ Config │ │ ├─ AutoTextarea. Js / / textarea automatic way to increase height │ │ ├ ─ ─ cache. The js / / the cache method │ │ ├ ─ ─ cordova, js / / cordova plug-in approach │ │ ├ ─ ─ directive. The js / / Instruction methods │ │ ├ ─ ─ the fetch. Js / / request method │ ├ ─ ─ page │ │ ├ ─ ─ the detail │ │ | ├ ─ ─ children │ │ | | ├ ─ ─ the comment. Vue / / comment page │ │ | | ├ ─ ─ Reply. Vue/page/reply │ │ | ├ ─ ─ components │ │ | | ├ ─ ─ the article. The vue / / article component │ │ | | ├ ─ ─ collect. Vue / / collection component │ │ | | ├ ─ ─ Like the vue / / thumb up component │ │ | | ├ ─ ─ how. Vue / / recommend component │ │ | | ├ ─ ─ share. Vue / / share components │ │ | | ├ ─ ─ tags. The vue / / label component │ │ | ├ ─ ─ Detail. Vue / / details page │ │ ├ ─ ─ index │ │ | ├ ─ ─ collect │ │ | | ├ ─ ─ collect. Vue/page/collection │ │ | ├ ─ ─ home │ │ | | ├ ─ ─ children │ │ | | | ├ ─ ─ channel. Vue/page/column │ │ | | ├ ─ ─ components │ │ | | | ├ ─ ─ homeHeader. Vue / / front page head component │ │ | | | ├ ─ ─ PullContainer. Vue / / dropdown container components │ │ | | | ├ ─ ─ swiperContainer. Vue / / sliding container components │ │ | | ├ ─ ─ home. Vue / / homepage │ │ | ├ ─ ─ the user │ │ | | ├ ─ ─ children │ │ | | | ├ ─ ─ the health │ │ | | | | ├ ─ ─ the health. The vue / / article management page │ │ | | | | ├ ─ ─ the preview. The vue / / article page preview │ │ | | | | ├ ─ ─ the publish. Vue / / edit page article │ │ | | | ├ ─ ─ feedBack. Vue / / user feedBack page │ │ | | | ├ ─ ─ myComment. Vue / / my comment page │ │ | | | ├ ─ ─ History pages of myHistory vue / / I │ │ | | | ├ ─ ─ QRcode. Vue/page/application sharing │ │ | | ├ ─ ─ the user. The vue / / user page │ │ | ├ ─ ─ video │ │ | | ├ ─ ─ Video. Vue / / video page │ │ | ├ ─ ─ index. The vue / / homepage │ │ | ├ ─ ─ navBar. Vue / / at the bottom of the navigation components │ │ ├ ─ ─ the login │ │ | ├ ─ ─ the login. The vue / / login page │ │ ├ ─ ─ search │ │ | ├ ─ ─ the search. The vue / / search page │ ├ ─ ─ the router │ │ ├ ─ ─ index. The js / / routing configuration │ ├ ─ ─ store │ │ ├ ─ ─ collect/page/collection store │ │ ├ ─ ─ the detail / / details page store │ │ ├ ─ ─ the health/store/article management │ │ ├ ─ ─ index/store/front page │ │ ├ ─ ─ the login/login/store │ │ ├ ─ ─ the search / / │ ├─ ├─ video │ ├─ ├.js │ ├─ ├.vue │ ├── ├.vue └ ─ Static // Empty folder, Keep ├─.babelrc // babel-loader configure ├─.eslintrc.js // esLint Configure ├─.gitignore // gitignore ├─ index.html // ├ ─ ├ ─ garbage // package.jsonCopy the code

Installation operation

# install dependencies
npm install

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

# build for production with minification
npm run buildCopy the code

communication

Welcome friends who love learning and are loyal to sharing

  • QQ: 771674109
  • WX: L771674109
  • Vue ac group: 338241465

License

MIT

Copyright (c) 2017-present, uncleLian