A Zhihu daily developed by VUE. The style mainly refers to Android Version zhihu Daily (version 2.6.6). This project is more suitable for beginners reference study, god can give advice

I have been learning VUE, reading documents, reading blogs and writing small examples, but I still need a project to strengthen my mastery of VUE. The project is not very large, it is very suitable for practice and testing, and there is a good API for daishen analysis, there is no trouble for obtaining data (~ ▽ ~)~*

Most of the basic functions in the project have been implemented, but some have no interfaces or are not implemented elsewhere. There must be a problem in the whole project. If you have a bug you can fix it yourself or let me know. Yeah, that’s it.

Making address vue zhihu — daily

The statement

All text, pictures and other manuscript contents of this project are provided by Zhihu. Any acquisition or sharing may violate the rights and interests of Zhihu. If told to stop sharing and using, I will delete the whole project in time. Please understand the relevant information and abide by zhihu Agreement.

Thank you

Zhihu daily API analysis compiled by izzyleung

The vue cccyb zhihu — daily

Build Setup(vue-CLI)

# 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
Copy the code

You are advised to enable it in Chrome’s mobile debug mode

Technology stack

  • vue-cliScaffolding, which is used to create the project structure, has helped us with the basic configuration, and some additional requirements can be configured separately
  • vue+vue-router+vuexOf course, everyone in the family is indispensable
  • A number of plug-ins were used in the project:lib-flexible(for mobile terminal),vue-awesome-swiper(Rotation chart),better-scroll(Scroll plug-in),axios(recommended by Utah),moment(Formatting time),mint-ui(ACTUALLY I used a toast component 0.0)

A major part of the project structure

  • build: Lots and lots of configurations for WebPack. Major modifications:build/utils.jsConfiguration of thepx2rem-loader
  • config: Configuration of the project. Major modifications:config/index.jsIn the configurationproxyTableAPI proxy.
  • src: The main place to write code.
    • Assets: Static resources, I mainly put ICONS
    • Components: Common components
    • -Rufus: The router is a router.
    • Store: State management, where vuex is written (with official documentation attached)
    • Styles: Style file
    • Utils: Common methods used in a project
    • Views: View component
  • static: static file. andsrc/assetsThere is a difference. The documentation says that files in this folder will be directly copied when packaged, whilesrc/assetsThe files below will be processed by Webpack, emMMMMmmmm, HMM. Go back to the documentation:Handling Static Assets

screenshots

Note down some knowledge points (some don’t note down that is forgotten ==)

  1. Create the project using vue-CLI

Do not use a few tests and accept the rest

  1. Use lib-flexible for mobile

Lib-flexible has been officially recommended to be deprecated (but I just want to use it). Details can be found in this article: Using Flexible to implement H5 terminal adaptation. The current recommendation is to use viewPort instead of this solution. If you want to use viewPort, you can chew through these two articles: more on mobile page adaptation and how to use VW for mobile adaptation in a Vue project

But anyway, let’s see how it’s used in this project. After lib-flexible is installed and introduced in main.js, rem units can be used. Install px2REm-loader (px2rem-loader, px2rem-loader, px2rem-loader, px2rem-loader, px2rem-loader)

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75,
    remPrecision: 8
  }
}
Copy the code

And in the generateLoaders function, modify the original loaders variable

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]
Copy the code

  1. SCSS can be written directly in style

Install node-sass and sass-loader dependencies to install node-sass and sass-loader dependencies. Pre-processors

  1. Config /index.js, find proxyTable, modify:

proxyTable: {
  '/api': {
    target: 'https://news-at.zhihu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'}}}Copy the code
  • See Using VUE-CLI + AXIOS to configure proxy for cross-domain data access
  • The VUE-CLI template documentation also describes API Proxying During Development

  1. The image URL obtained using Axios is placed directly in the SRC attribute of img, resulting in an error of 403

Solution [Front end] Solve the problem of blocking access to API picture 403

  1. Vue-awesome-swiper Setting loop:true is invalid when v-for is used to render data

Solution: Add v-if=”xxx.length > 0″ to the parent element. {loop: true} Swiper-slide goes wrong when data is from V-for

  1. Returns no refresh, forward refresh scheme

Pre-implementation returns do not refresh, so

is used. It is true that the return does not refresh, but there is a new problem, when the route parameter changes, the forward does not refresh = =. (Take a look at Reacting to Params Changes and Navigation Guards under Dynamic Route Matching in the official Vue Router documentation first). Solution refer to this article: a new way: vue single page, multiple routes, forward refresh, backward not refresh

  1. How does project packaging work

After the project is packaged, the console says, go to the file and open index.html (I’ve already tried 0.0).

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
Copy the code

So you also need to use the http-server plug-in. For more details, see the project packaged with vuE-CLI using http-Server. There are some problems with running this plug-in, which are also mentioned in this article, without going into details.

conclusion

Although the project is small, I have used a lot of knowledge of VUE. After the whole process, I have mastered the basic usage of VUE. I hope this small project can also help you. Thanks again to the project, article, and tutorial authors for reference