Nuxt.js simply, it is a common framework Vue.js, the most commonly used is used as SSR (server side rendering). And then bluntly put, is Vue.js originally developed SPA (single-page application), but with the popularity of technology, a lot of people want to use Vue to develop multi-page application, and finished rendering on the server. At this time there have been Nuxt.js this framework, she simplifies the development of the difficulty of the SSR. Also can be used directly to our command made vue project generated as static html.
What is SSR?
SSR, namely rendering server, generate html file is rendered on the server side will Vue page, html page will be passed to the browser.
SSR two advantages:
- SEO is different from the SPA's no HTML is only one actual content of HTML and a app.js, SSR generated HTML is the content, which makes the search engine to index the page content.
- Content faster arrival time traditional SPA application is bundle.js obtained from the server, and then resolve to mount dom client. The SSR passed directly to the HTML string to the browser. Greatly speeding up the first screen load times.
Nuxt.js's official website is this article:
Nuxt.js is a generic application framework Vue.js based. By abstracting organization of client / server infrastructure, Nuxt.js main concern is the application UI rendering.
Nuxt.js is a feature (advantages):
- Based Vue.js
- Automatic code stratified
- Side rendering service
- Powerful routing capabilities to support asynchronous data
- Static files
- ES6 / ES7 syntax support
- Package and compress JS and CSS
- HTML head tag management
- Local development support hot load
- Integrated ESLint
- Pre-processor supports a variety of styles: SASS, LESS, Stylus etc.
A, Nuxt environment to build
1. npm install vue-cli this framework, if you have already installed, you can omit this step.
npm install vue-cli -g
After installation is complete vue -V can be used to test whether the installation was successful. (Note: here to use uppercase V, lowercase invalid).
2. Use vue installation nuxt
After installing vue-cli, you can use the init command to initialize Nuxt.js project.
vue init nuxt / starter
This time he will download the template on github, then asks you what the name of the project is called, what the author, these can fill in according to their preferences.
3. Installation npm install dependencies
npm install
This process is to wait a while if you install this process fails, do not panic, you can directly delete eh after node_modules file in the project folder, re-install npm install.
4. Use npm run dev start Service
npm run dev
5. In the browser, enter localhost: 3000, you can see the results.
Hello World