origin


Hello, everyone , It's Thursday again , As the saying goes, Thursday came , Is the weekend far away? Ha ha , Lao Zhang, I also want to ask for leave next week , Let's have one 16 It's a long holiday , I don't know how people ask for leave , Recently, I found that no one commented on the bottom of the article , It's rather desolate to rush , Please give me a good word , Increase popularity ha ha , It suddenly occurred to me that all the problems were in the group , So is it , The purpose of creating a group was to solve problems , We can't put the cart before the horse
[ wry smile ], After a month of writing 《.net core(13)
<https://www.cnblogs.com/laozhang-is-phi/category/1305247.html>》,《Vue study (13)
<https://www.cnblogs.com/laozhang-is-phi/category/1292730.html>
》 Two introductory tutorials are over , Today we start with one Vue Supplementary tutorial for —— Nuxt.js One is based on Vue Applied SSR course , Because this series of tutorials is an aid Vue
Of , But it's not part of our regular series , So I'll call it a supplementary tutorial for the time being , What if you've been exposed to this , Explain your vue It's already good , At least it has been built vue-cli
The scaffolding project , If you don't use it Nuxt.js That's a good time to have a look , I'm on my own Vue Of SSR It's a trend , So let's talk more , If you're still right SSR
Do not understand , Or for the first time in my series , Please change the gate 《  twenty-five ║ Preliminary study SSR Server rendering ( Personal blog 2 )
<https://www.cnblogs.com/laozhang-is-phi/p/9670342.html>》 and 《
hexacosa- ║Client Rendering ,Server How much do you know about rendering { supplement }
<https://www.cnblogs.com/laozhang-is-phi/p/9675822.html>》. Okay, let's start today

Finally, we will develop our second project step by step —— be based on Nuxt Personal blog   Moving graph
<https://img2018.cnblogs.com/blog/1468246/201809/1468246-20180918134756348-1010253175.gif>

 

Zero , Today we're going to implement the pink part



 

One ,Vue The past and present —— Doomed to launch Nuxt.js



1,Vue —— From imperceptibility to hindsight

MV*
Early stage of development , Separation of the front and rear ends is possible , Various project frameworks are springing up , It's all there , The front end has been quiet and slowly into everyone's view , At that time, it was not simple to cut the picture page , Instead, they began to think about how to develop in an object-oriented way , At that time, people were still keen on it
Jquery Drenched , Time was at that time 2012 Years ago ;

2012 year ,36 Krypton reporter interviewed you dada , There is a sentence in an article :“Evan
I hope to attract the attention of technology companies through this move , Hold out the olive branch to him .”, And attached the author you Yuxi's Micro blog ,Twitter And personal websites . The author's approach , I think we should learn from it , Master it
Vue.js, Let your favorite company notice you .

In view of Zhihu about Vue.js A question from , You Yuxi's answer said the original intention of the development , Namely “ do Vue.js
The original intention is very simple , Not to make a lot of money , Not to be a God , And it's not because I've found some great innovations . I just want to make a framework that I will like . It's a coincidence , After I made what I wanted , There are a lot of other people who like it , So there are more and more users . I never said that , I don't think so
Vue.js Better than all other frameworks ( My view has always been that the diversity of developer preferences leads to multiple frameworks / The coexistence of language is beneficial and harmless , Even necessary ) .”

This is the time Vue It's just a nobody , Even though they did MV* A free ride , It's just that it hasn't taken off yet .

Three years later ,2015 The year begins , In the major forum Technology , And Vue.js
The content of the Related words has exploded , Leading the way in the growth of front end technology , Quickly become one of the top three . I remember that someone in a community introduced the three giants like this “ come from Google Of
Angular, come from Facebook Of React, From the open source community
Vue.js”, Although we are still found through Baidu vue Less market share , But its rapid development momentum is still unstoppable .

 

stay 2016 year ,Vue Has officially risen , It's starting to show up in some companies , Some large factories have also begun to use them , And still with React ,NG Run side by side .

 

2,Vue The rapid development of , certainly Nuxt On the stage of history

although vue The development speed is very fast , But it's always updated , Improvement and release , One of the biggest problems is —— How to solve this problem SEO The problem of , This is all MV*
A common problem , Everyone has been groping . If you don't try to change , This historical problem will become more and more serious with its rapid development , It will become a serious short board effect , But you can't go back
web1.0 times , like that Separation of the front and rear ends can be a failure . How to better launch SSR service , It has become an inevitable trend in history .

until 2016 year 10 month 25 day ,zeit.co The team behind the release Next.js, One React Server side rendering application framework based on . A few hours later , And
Next.js different approaches but equally satisfactory results , One is based on Vue.js
The server-side rendering application framework based on asp.net came into being , We call it :Nuxt.js. This is, of course, an important progress in history , The two front-end architectures solve this historical problem at the same time ,

 

Two ,Nuxt.js What is it? ?

From the official explanation :

Nuxt.js It is based on Vue.js General application framework of .

Through the client / Abstract organization of server infrastructure ,Nuxt.js The main concern is applied  UI Rendering .

Our goal is to create a flexible application framework , You can initialize the infrastructure code for a new project based on it , Or in the existing Node.js Use in project Nuxt.js.

Nuxt.js Preset the use of Vue.js Various configurations needed to develop server-side rendering applications .

besides , We also provide a command called :nuxt generate, Based on Vue.js The application provides the function of generating corresponding static site .

We believe in the functionality provided by this command , It is to integrate various microservices into development (microservices) Of Web A new step of application .

As a framework ,Nuxt.js by   client / Server   This typical application architecture pattern provides many useful features , For example, asynchronous data loading , Middleware support , Layout support, etc .

It integrates Vue 2.0 ,vue-router, and vuex( Of course, this is not necessary ), stay vue-cli In the process of scaffold development , We will pass webpack
Package and build the project , So we will develop it every time , Package , however Nuxt.js It's using webpack and
vue-loader From automated processing construction work , Remember we mentioned it in the last article , We passed webpack-server.js To manually package the build, you can run the node
Server bundle renderers for the environment , then Open service , You can achieve server rendering , ad locum Nuxt.js It's automated for us , The principle should be clear to everyone .

The characteristics are as follows

* be based on Vue.js
* Automatic code layering
* Server rendering
* Powerful routing function , Support asynchronous data
* Static file service
* ES6/ES7 Syntax support
* Packaging and compression JS and CSS
* HTML Head label management
* Local development supports hot loading
* integrate ESLint
therefore , This framework is based on vue Developed , We must have some vue Development basis , Contact nuxt The framework can be more handy .

 

Three , use Nuxt Build our blognuxt project

1, Build a novice template

Execute the order
vue init nuxt-community/starter-template blognuxt
Then simply configure the project in three ways , always Enter Just fine .

 



Then we found out that our project had been installed , Let's focus on the meaning of these documents .

 

2, Project structure analysis

 
├── assets // resource file . Used to organize uncompiled static resources LESS,SASS or JavaScript ├── components //
assembly . For your own writing Vue assembly , For example, rolling components , Calendar Component , Paging component │ └── AppLogo.vue // default logo assembly ├── layouts //
layout . All pages need to have a layout , The default is default. It specifies how a page is laid out . All pages are loaded in the layout page  <nuxt />  In the label .
If you need to use lower level routing in normal pages , You need to add  <nuxt-child />. The directory is called Nuxt.js Reserved , It cannot be changed . │ └── default
.vue// Default template page ├── middleware // middleware . Storage Middleware . Can be invoked in the page. : middleware: 'middlewareName'
 . ├── pages   // page . One vue A file is a page .index.vue Is the root page │ └── index.vue // Default home page
├── plugins// For storage JavaScript Plug in place ├── static // Used to store static resource files , Like pictures ├── store   //
For Organizational Applications Vuex State management . ├── .editorconfig // Development tool format configuration ├── .eslintrc.js //
ESLint Configuration file for , Used to check code format ├── .gitignore // to configure git Files not uploaded ├── nuxt.config.js //
For organization Nuxt.js Personalized configuration of application , The default configuration has been overridden ├── package.json //npm Package management profile └── README.md // Documentation


layouts: layout . All pages need to have a layout , The default is default. It specifies how a page is laid out . All pages are loaded in the layout page <nuxt />
In the label . If you need to use lower level routing in normal pages , You need to add <nuxt-child />. The directory is called Nuxt.js Reserved , It cannot be changed ..
pages: page . One vue A file is a page .index.vue Is the root page .

If secondary page is required , Then add a folder . There is no need to configure routing
If the name of the page is similar to _id.vue ( with _ start ), Dynamic routing page ,_ After that is the matching variable (params).
If the variable is required , Then create an empty file in the folder index.vue. For more configuration, please go to Official website .
plugin: plug-in unit . For organizing those that need to be in root vue.js application To be run before instantiation Javascript plug-in unit . It should be noted that , In any Vue
Within the life cycle of a component , only beforeCreate and created These two hook methods will be in the Both the client and server are called . Other hook methods are called only on the client side .
static: Static file . Placement does not need to go through webpack Packaged static resources . Such as some js, css library .

A lot of folders have been generated , Through the overall structure , You can see that , Once again, the project has been streamlined , from vue-cli 2.0 reach vue-cli 3.0
Our project structure has been streamlined , It's mostly packaged , Processing through dependent packages , It's more and more like before us .net core api 了 .

 

3, Install dependencies and run

  implement npm install Install our dependency packages
npm install
Then execute npm run dev, Running project
npm run dev


The top half of this is ours components File AppLogo.vue Dynamic effects achieved .

 

4, Revised pages Under the index.vue page , realization hello 
<template> <section class="container"> <div> <app-logo/> <h1 class="title">
welcome : Lao Zhang's Philosophy </h1> <h2 class="subtitle"> One nuxt engineering </h2> <div class="links"> <a href
="https://nuxtjs.org/" target="_blank" class="button--green"> Blog Garden </a> <a href="
https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey"
>GitHub</a> </div> </div> </section> </template> <script> import AppLogo from '
~/components/AppLogo.vue'// Unified use Wave line ~ Instead Slash / export default { components: {
AppLogo } }</script>
We must be familiar with these contents , If developed vue The words of , The project directly implements our modifications , View browser



You can see that , Not only are our pages rendered , Our project source code also rendered the content , That's what we've got SSR
The purpose of server rendering . How does it work , Tomorrow, let's take a closer look at the principles .

 

  Four , epilogue

  All right , So much for now , There are many knowledge points behind , Today, let's have a brief understanding of this nuxt.js
frame , Understand the installation process , The basic skeleton of the project structure , Of course, this is only a drop in the bucket ,nuxt As a framework , Although it depends on vue
above , But there's something of its own , For example, dynamic routing , middleware , Asynchronous data , State tree , Views and so on , We'll talk about it later . I'll focus on it tomorrow nuxt Operating principle of

 

  Five ,CODE

This is the empty framework that you just created , After that, we built the package on this basis .

https://github.com/anjoy8/Blog.Vue.Nuxt
<https://github.com/anjoy8/Blog.Vue.Nuxt>