A simple and beautiful Zhihu Daily with Vue.js

A simple and beautiful Zhihu Daily with Vue.js

A simple and beautiful Zhihu Daily with Vue.js .Easily view the content of Zhihu Daily and bookmark the articles you like

A simple and beautiful Zhihu Daily

Easily view the content of Zhihu Daily and bookmark the articles you like

Effect picture

Home index View article story topic Daily subject collection of articles favorite Popular Articles hot Home handover date switchDate

Introduction

A pure front-end project suitable for learning Vuejs , uses vue-router to do front-end routing jumps, combines vuex and localStroage to develop a collection function, and uses axios for resource requests.

Use watch in the page to monitor the value that needs to be changed, and filter to format the data.

Development Process

First use vue-cli to create the project according to the prompts, and then install the dependencies according to my needs. I chose Materialize, which I think is pretty good-looking, as the UI framework, as well as toastr , a library that pops up toast, and then refers to Gallery and colorhurt , these two The style of a website, build a page.

npm install materialize-css toastr --save

Then install all required dependencies and delete unnecessary files.

Because of cross-domain reasons, the proxyTable option in the config/index file is set, in order to facilitate the acquisition of data during development, please refer to the document for details .

proxyTable: {
  '/api': {
    target: 'http://news-at.zhihu.com',
    changeOrigin: true
  }
},

Then import the required files in src/main import

Add a few required components, reserve first, and then develop.

The top navigation bar compoments/navbar, the main function is to navigate, and display the location of the route;

Footer compoments/footer, display website information;

Homepagecompoments/latest, displays the latest news of Zhihu Daily;

View the article page compoments/story, view the selected article, and article comments;

Display the subject daily page compoments/sunject, view different subject information;

Display the page of the favorite article, view the page of your favorite article.

Next is to configure the front-end routing, import the component into the router/index file, add a name field to each route, router so that it is convenient to call in the component. This is because whether it is an article page or a topic page has a unique parameter id, use This parameter is convenient for jumping, and using id to make resource requests after jumping.

<router-link :to="{name: 'name', params: { id: 1234 }}">link</router-link>

Then it will be placed in App.vue.

<div id="app" class="row">
  <app-navbar></app-navbar>
  <router-view></router-view>
  <app-footer></app-footer>
</div>

After the routing is configured, use localStorage to develop the function of collecting articles. That is to store the content of the article locally, so that you can read the article when there is no network. localStore.js

There are

addLocalStory, add an article;

removeLocalStory, delete an article;

totalLocalStoryNum, returns the total number of articles in the collection;

clearLocalStories, clear all favorite articles;

localStore

With these methods, you can manage the collection of articles.

Next, complete the component part, and write the page according to the materialize document. This is the place that takes the most time. It is very difficult to create a good-looking interface. There are still dissatisfactions with changes. Use the Grid layout and add the required elements. , The other components are the same, so I won't repeat them.

It should be noted that the article page returned by the Zhihu Daily API is a string containing html, which is rendered on the page using v-html, but there is no css file. The solution is to change the CSS file of the Zhihu Daily article page ( When you request a single article, you will get the url of the article page css file), save it in the src/assets directory, and then import it in story.vue

@import "../assets/zhihu.daily.css";

Another problem is that the pictures in the article cannot be opened. The solution is to add the prefix Images.weserv in front of the src of each picture and apply the Vuejs filter to complete. filter

The page is basically written, and after the requested data is put up, it is basically completed. However, when I switch the theme daily report in the navigation bar, although the route has changed, the theme page page is not updated, and the ajax request is not sent. The solution is Use Vuejs's watch to monitor routing changes.Once the value of the routing changes, send a new request to get the data. Similarly, the date value on the homepage changes.

watch

Basically complete, replace the URL of the requested data in the component with the real address.

Finally, use webpack to package it into a static resource/dist, so that the backend server can be used to run the project.

Conclusion

Using frameworks such as Vuejs almost no longer requires DOM operations, and it feels more organized when developing, and it is easy to know where the problem is when there is a problem. At the same time, it is more restrictive, the code has a certain format, and it is easy to write when using jQuery before A long piece of code is not easy to modify if it is wrong.

ps: When looking for a job, please recommend some relatively new front-end development interview questions, thank you.

Build Setup

## 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

## After webpack is packaged, use the http-server backend to quickly start to view the project 
npm run start

Download Details:

Author: xrr2016

Source Code: https://github.com/xrr2016/zhihu-daily

vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.