Often we build SSR applications that require our own selection of multiple components to be integrated together
webpack Babel loaders Router server-render various inlet configurations, etc.
For SSR applications built on vue+vuex+vue-router components, you can use the nuxt.js
NUXT simplifies the building and development of SSR applications and provides a complete set of solutions that provide a wide range of presets
Nuxt.js highly integrated with common components
Includes hot update,vue-meta,css-loader,url-loader,vue-template-loader,vue-router
Many presets are available, including automatic routing, automatic Chunckhash, definition of resource storage, Vuex store modularity, 404 pages, loading progress bars, etc.
Nuxt.js integrates a very wide range of components, it is rare to automate, but also maintain a custom configuration, you can add nuxt.config.js in the root directory to configure various components
Nuxt.js community is also very good, code submission is also very frequent
In the personal experience, there are few mistakes in understanding the whole process, and there is no integration error, there is an nuxt/nuxtjs.org project, it is easy to develop SSR applications by reference to this project.
Initializing the application is simple and requires just a few lines of code to create a simple application
NPM INITNPM i Nuxt
Open Package.json, add in Scripts
scripts:[ "start": "Nuxt"]
Add Pages/index.vue, and write:
<Template> <Div> <H1>welcome!</H1> </Div></Template><Script>Exportdefault{head: {title:"Home Page"}};</Script>
Run
NPM start
Then you can see the page in the browser, in the development process do not need to close the preview server, add the modified file Nuxt will be automatically updated to the interface
Add Site icon
The site icon is a global link that can be configured in the Nuxt.config.js
Module.exports ="icon""image/png""/favicon.png" }]}}
The favicon.png file is stored in the static directory, the static directory contains some files that do not need to be compiled, and can be accessed directly through the /file name
To modify the package file name Nuxt.config.js:
Module.exports ="Vendor. [Hash].js "" App.[chunckhash].js "}} }
This vendor uses a hash file stamp, which is automatically updated when the third-party module changes
The app uses Chunckhash to generate a file stamp by parsing the portal file, resulting in a hash of the dependent file, which changes when the code is modified
Packaging projects
Add in Package.json scripts
{build: "Nuxt build-a"}
Run
NPM Run Build
The file is generated under the. Nuxt/dist Path
-A Parameters generate the dependency analysis for this build, and you can see the size of each dependent JS by http://127.0.0.1:8888/
Resource file Processing
The resource files are stored uniformly in the assets directory.
NUXT uses Url-loader, when the file is smaller than the set size, will be dataurl, greater than this value, will be copied to the Dist directory
File use hash to define version number, convenient CDN
<src= "~assets/image.png"><src = "/_nuxt/img/image.0c61159.png" >
Nuxt default is for png|jpe?g|gif|svg|woff2?| EOT|TTF|OTF file processing, files larger than 1k will be copied for processing
Static files that do not need to be modified are stored under static, such as robots.txt or sitemap.xml, and the files in that directory are mapped to the root path of the application / down
Default route
The NUXT page file is stored under pages and automatically generates a route based on the file path and name
Pages/index.vue =/pages/about.vue =/aboutpages/user/index.vue =/user/pages /user/_id/index.vue =>/user/:id?
Optimal implementation of front and back end separation using Nuxt.js to quickly build single-page SSR applications