In-depth analysis of NUXT.JS based on SSH Vue General Framework

nuXt.js is a universal application framework based on Vue.js. By abstract organizations of the client / server infrastructure, nuXt.js focuses on the application’s UI rendering.

SSR, that is, server rendering, that is, the server side will render the Vue page to generate an HTML file, pass the HTML page to the browser.

Nuxt.js is characteristic (advantage):

Based on Vue.js

Automatic code layering
  • Service-side rendering
  • Powerful routing function, support asynchronous data
  • Static file service
  • ES6 / ES7 syntax support
  • package and compressed JS and CSS
  • head the HTML tag manager
  • local thermal load development support
  • integration ESLint
  • supports various styles preprocessor: SASS, LESS, Stylus etc.
  • How to install VUE-CLI3?

  • YARN GLOBAL ADD @ Vue / CLI-INTNPM INIT NUXT-APP My-Project // Initialization A Nuxt Project

   
global configuration

深入浅析nuxt.js基于ssh的vue通用框架 Configuring global style nuXt.config.js

深入浅析nuxt.js基于ssh的vue通用框架
module.exports = {CSS: [‘@ / assetS / CSS / NORMAIZE.CSS ‘] @ 别 名, root directory}

Configure global title and meta

in nuXt.config.js

 Head: {title: 'nuXT project actual combat', meta: [{charset: 'UTF-8'}, {name: 'ViewPort', Content: 'width = device-width, initial-scale = 1'}, {hid: 'description', name: 'description', content: pkg.description}], link: [{REL: 'icon ', Type:' /favicon.ico '}]},   
Configuration Global Effect

nuXt.js Default User Transition Effect Name is Page In Global Style File Assets / CSS / Main.css Here Site is Main.css Add a style:

.page-enter-active, // Page Enter the active effect and the power of the page. Page-leave-activ {transition: Opacity 1s;}. Page-enter, // page enters and page departure Effect.page-leave-active {opacity: 0;}
  Configuration page separate animationEffect  
In the global style file assets / css / main.css here assumes that it is mainly in main.css to add a style: later with a separate attribute, such as Test

.Test-Enter-Active, .test-Leave-Active {Transition: all 1s; font-size: 12px;}. Test-enter, .test-leave-activ {Opacity: 0; font -Size: 40px;}

Then we set the value of the Transition property in the page assembly to Test:
   (123) 

Configuration Global Loading

module.exports = {loading: {color: ‘#fff’},}
  Routing  
Use routing between the page, we recommend using the label. Nuxt will automatically generate router.js in .Nuxt, with this label and the use of Vue-router is basically consistent. No need to introduce Vue-Router and processed according to our directory name, do not need to be configured in Router.js

Basic routing

  HOME 
/ / can be jumped according to TO, PATH, and can also pass params, quers

Dynamic routing

Dynamic routing with parameters in NUXT.JS, need Create the following scribe line as a prefix Vue file or directory.
   
Pages / – | News / —– | _id.Vue —– | Index.Vue In Index.Vue, you want to use according to different IDs Jump to the news details page, here there are two kinds of jump methods, passing Path and Name News-1

News-32 can receive parameters {{ROUTE in _id.Vue .Params.newdetail}}

Routing parameter test

export default {validate {params, query} {// must be Number Type Return / ^} @teest (Params.ID)}}
      Nested route  
Create an in-line routing, you need to add a Vue file while adding a directory that is the same name as the file to store the sub-view component.

Increased in the parent component (.VUE file) for display sub-view content dynamic nested routing, uncommon, principle, unanimous

middleware
 Middleware allows you to define a custom function to run before a page or a set of pages rendered. Each middle piece should be placed in the MiddleWare / directory. The name of the file name will be the middleware name (Middleware / Auth.js will becomeFor the authore.). Using middleware in nuXt.config.js, layouts or pages: EG: in nuXt.config.js      module.exports = {router: {middleware: 'Check -auth '}}  
Summary

The above is the Nuxt.js, which is a NUXT.JS, based on SSH. General framework, I hope to help everyone, if you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment