1. Nuxt.js概述
1.1 咱們一塊兒作過的SPA
- SPA（single page web application）單頁 Web 應用，Web 再也不是一張張頁面，而是一個總體的應用，一個由路由系統、數據系統、頁面（組件）系統 等等，組成的應用程序。
- Vue就是SPA中的佼佼者。
- SPA 應用普遍用於對SEO要求不高的場景中
- SEO：搜索引擎優化（增長收錄、提升權重）
SSR：服務器端渲染html
將前端拆分2部分：客戶端和服務端前端
服務器端渲染，就是讓前端服務端的代碼先執行，就能夠提早得到後端提供的數據vue
nuxt.js就是基於vue.js的SSR技術。node
二、Nuxt.js
官網：https://zh.nuxtjs.org/guide/web
Nuxt.js是一個基於Vue.js的通用應用框架。主要關注的是應用的UI渲染。vue-cli
Nuxt.js預設了利用Vue.js開發服務端渲染的應用所須要的各類配置。npm
咱們都知道Vue.js原來是開發SPA(單頁應用)的，如今不少人想用Vue開發多頁應用，並想要在服務端完成渲染。Nuxt.js應運而生，她簡化了SSR的開發難度，並且還能夠直接用命令把咱們製做的vue項目生成靜態html後端
nuxt generate命令：爲基於Vue.js的應用提供生成對應的靜態站點的功能。瀏覽器
按照官方說法："是向開發集成各類微服務(Microsevices)的Web應用邁開的新一步"服務器
做爲框架，Nuxt.js爲客戶端/服務端這種典型的應用架構模式提供了許多有用的特性，例如異步數據加載、中間件支持、佈局支持等。
2.1 什麼是SSR?
SSR，即服務端渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。
- SSR兩個優勢：
- SEO不一樣於SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR生成的HTML是有內容的，這讓搜索引擎能索引到頁面內容。
- 更快內容到達時間 傳統的SPA引用是將bundle.js從服務器獲取，而後在客戶端解析並掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。
SEO： 搜索引擎優化（Search Engine Optimization）, 經過各類技術（手段）來確保，咱們的Web內容被搜索引擎最大化收錄，最大化提升權重，最終帶來更多流量。
3. 爲何用Nuxt.js的緣由
最主要的緣由是SPA(單頁應用)不利於搜索引擎SEO操做，好比製做一個相似新聞網站等，流量的一個主要來源是經過百度等搜索引擎，可是它們對SPA的抓取並很差，特別是百度根本無法抓取到SPA的內容頁面，因此咱們必須把咱們的應用在服務端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。Nuxt.js適合作新聞、博客、電影、諮詢這樣的須要搜索引擎提供流量的項目。
3.一、NUXT.JS特性(優勢)：
- 基於Vue.js
- 自動代碼分層
- 服務端渲染
- 強大的路由功能，支持異步數據
- 靜態文件服務
- ES2015+語法支持
- 打包和壓縮JS和CSS
- HTML頭部標籤管理
- 本地開發支持熱加載
- 集成ESLint
- 支持各類樣式預處理器：SASS、LESS、Stulus等等
- 支持HTTP/2推送
四、Nuxt環境搭建
4.一、nuxt.js安裝
在使用npm前須要安裝Node到系統中，若是你尚未或是不會安裝Node，那就先從Vue基礎課程開始學起吧。若是你已經安裝了，省略這步。
npm install vue-cli -g
測試是否安裝成功(出現版本號，即爲安裝成功)
vue-V
4.二、使用vue安裝nuxt
create 安裝
npx create-nuxt-app 項目名
- 這個過程要等一會，若是這個過程安裝失敗，不要慌，你能夠直接刪除項目中的node_modules文件夾後，從新安裝
4.3使用npm run dev啓動服務
npm run dev
3.四、Hello Nuxt
國際慣例，來個Hello World
在項目根目錄下找到/pages/index.vue文件，讓後把項目名稱改寫成Hello World(這裏我就寫本身名字了)。框架支持熱更新，因此你不用刷新就自動更新了。
3.5 nuxt項目目錄結構