5se7en.com

Nuxtjs + Express +vue2.0+ Vuex server render personal website project https://github.com/se7en-1992/5se7en.com Project online address: https://5se7en.com/

Matters needing attention

  • Node >=v8.0.0+ (Nuxt1.0.0 + must be larger than v8.0.0 or an error will be reported at startup)
  • To test the game login please click to ropehorse game to register an account

Technology selection

Here’s a quick digression about two points in time that had a profound impact on front-end development

  • The advent of Ajax ushered in the Web 2.0 era
  • Nodejs allows the front end to do more than just a browser-side language. Why do we say this here? Some front-end developers will say that Node is not the back-end? Why should I learn NodeJS? In fact, with the development of front-end, especially node, front-end development with each passing day, a variety of automation tools, frameworks emerge in an endless stream. Many rely on Node. Node isn’t just for writing back ends, it’s safe to say that if you don’t know anything about Node and don’t learn it, you’re covered by the front end wave.
  • ExpressJS + nuxt. js = ⚡️ Yes, it can be said to be very fast. My personal website server is Ali Cloud 1 core 1G student version machine. Except for the first time, the website is slightly slower. You can say the speed of light behind it. Faster than any framework I’ve used before.
  • Why use server-side rendering and nuxTJS?
    • There is a topic on Zhihu that you can take a look atWhy is server-side rendering HTML all the rage now?”, the answer is more people, but also more miscellaneous, I will simply sum up here
      • Server-side rendering, mainly to solve two pain points SEO optimization (some news and information websites need to do some search engine optimization) and the first screen rendering of large applications (solve the problem of loading speed of the home page of some large applications)
      • In fact, this is going to go back to history, from the beginning HTML was the back-end rendering, the front end is actually cutting diagrams (CSS) and doing special effects (JS), so the front end is the lowest pay and lowest job of all programmers. So that’s where the chain of contempt comes in.
      • The rise of NodeJS and front-end MVC has complicated the front end, and the front end sees an opportunity to turn around and supports both technologies in full force, resulting in a site that should not be a SPA becoming a SPA. Slowly, the movement to separate the front end from the back end began to grow in large companies. (Ostensibly for “code separation,” but actually for “people separation,” i.e., “front end separation,” where the front end is no longer attached to the back end team)
      • After SPA, I found that SEO was a big problem and the rendering speed of the first screen was slow. However difficult the path I chose was, I still had to go on, so nodeJS rendering on the server side was regarded as a way out
      • When Node and MVC/MVVM (Vue,React,Angular) came along, the front end became more independent and made SPA out of what was supposed to be server-side rendering. Now new technologies are coming out, and it’s important to find and correct errors in time. The separation of the front and back ends is the trend, since they are separated, the total can not also let the back end to render, then we front end to find a way to do server rendering, so the server rendering framework also appeared.
    • Why nuxTJS?
      • At the beginning, I used server-side rendering to learn n-blog using NodeJS Express + EJS template rendering, the effect is actually quite good, the code inside is not completely componentalized, I do the project also use jQuery, this is so low, how can I endure, I will definitely change the technology to play. (I don’t mean to disparage jQuery, but I think jQuery is a great JavaScript library, and it used to be a dominant front end, even now. There are very few front ends that don’t use jQuery, but jQuery is dying out. Manipulating the DOM is not an optimal choice by comparison. The front end is evolving and we just have to pick the best.
      • ExpressJS + nuxt.js =⚡ (nuxtJS + nuxt.js =⚡) That’s right.
      • Nuxtjs combines vue2, Webpack, VUE-loader, Babel-Loader, vuex, vuE-Meta
      • There is no need to configure cumbersome Webpack configuration,vue-loader automatically generates routes, just need to create files in the Pages directory to automatically generate the corresponding route file

The development environment

  • Node.js: ^ 8.9.4
  • express: ^ 4.16.2
  • nuxtjs: ^ 1.0.0 - rc11
  • vue: ^ 2.5.3
npm install
npm run dev
Copy the code

Use your browser to open http://localhost:5757

Helpful hints

  • N-blog(a good Nodejs + Express + MongoDB starter project)
  • Vue2.0 official website document
  • Nuxtjs official documentation
  • Vue2 -elm(a good vue2.0 personal project)
  • nuxtjs.org

Nuxt introduction

  • Nuxt detailed introduction to the tutorial here is not a detailed introduction, the official documentation has been very detailed. Here is a brief introduction to the project directory

Nuxt directory introduction

  • assets

    • If your static assets require Webpack to build and compile them, you can put them in Assets, otherwise you can put them in static.
    • When the Nuxt server starts, files in this directory are mapped to the root/of the application. Files such as robots.txt or sitemap. XML are suitable for static directories.

  • components

    • Component directory Components is used to organize vue.js components of an application. Nuxt.js does not extend and enhance vue.js components in this directory, that is, they do not have the asyncData method features of page components. In short, this directory is a normal VUE component directory.

  • layouts

    • The directory name nuxt.js is reserved and cannot be changed.
    • You can customize the default and error styles for your site

  • middleware

    • Middleware execution flow sequence:
      • nuxt.config.js
      • Match the layout
      • Matching page

  • pages

    • The directory name nuxt.js is reserved and cannot be changed.
    • Pages organizes application routes and views. The nuxt.js framework reads all.vue files in this directory and automatically generates the corresponding routing configuration.
    • This page. Vue files have asyncData, fech methods.

  • plugins

    • Plugins are used to organize Javascript plug-ins that need to be run before the root vue.js application is instantiated.
    • You can put element-UI or Mint-UI and many more plugins into plugins

  • static

    • The directory name nuxt.js is reserved and cannot be changed.
    • The static directory is used to store application static files. These files are not processed by nuxt.js calling Webpack for build and compilation. When the server starts, files in this directory are mapped to the root/of the application.

  • store

    • The directory name nuxt.js is reserved and cannot be changed.
    • The Store directory is used to organize Vuex state tree files for applications. The nuxt.js framework integrates Vuex state tree configurations, which can be activated by creating an index.js file in the Store directory.

Nuxt configuration

  • config

    • This directory is not the NuxT directory itself, but some project experience prompted me to add this directory to make it easier to manage and use the variables needed in the project.
    • NEWRELIC_KEY: the key of NewRelic, which is server-side performance monitoring software
    • TIMBER_KEY: the key of timber, a cloud logging system that records logs on a line
    • SENTRY_PROJECT_ID/SENTRY_PUBLIC_KEY/SENTRY_PRIVATE_KEY: the project ID, public key, and private key of Sentry, which is an open source real-time error reporting tool
    • PorductionProxy/developmentProxy: is nuxt axios module path set agent request
    • In fact, I used PM2 at the start of the project and those of you who have experience with Express have said that it has logging status monitoring and so on. It’s really good.

  • nuxt.config.js

  • .editorconfig

    • EditorConfig is a set of solutions for unifying code formats

  • .eslintrc.js

    • ESLint is a widely used JavaScript code checking tool

  • gitignore

    • Git commits the ignore item configuration file

  • newrelic.js

    • Newrelic configuration file

  • start.js

    • Express startup entry file, the development environment directly using nuxt startup without using start.js, production environment with pM2 startup this file