緣起

哈嘍大家好，又是週四了，俗話說週四來了，週末還遠麼哈哈，老張我也想下週請假，來個16天的大長假喲，不知道大家是怎麼請假的，近來發現文章下邊已經沒有人評論了，趕腳比較淒涼了，大家看到的麻煩點個贊呀說個話呀，增加下人氣哈哈，剛剛突然想到原來問題都跑到群裡了，也是，當初建立群的目的就是解決問題滴，不能本末倒置了 [ 苦笑 ]，經過一個月的書寫《.net core(13)》、《Vue學習(13)》上下兩部入門教程已經結束，今天開始一個 Vue 的補充教程 —— Nuxt.js 一個基於 Vue 應用的 SSR 教程，因為這個系列教程是輔助 Vue 的，但是又不屬於我們之前的正規系列教程裡，所以我就暫時命名為補充教程吧，如果說你接觸過這個呢，說明你的 vue 已經很好了，至少是已經搭建過 vue-cli 腳手架的專案了，如果說沒有用過 Nuxt.js 那正好可以一起來看一看，我個人趕腳Vue的SSR是一個趨勢，所以還是多說一說吧，如果你還對 SSR 不瞭解，或者是第一次看我的系列教程，請換傳送門《

最終咱們會一步步開發我們的第二個專案 —— 基於 Nuxt 的個人部落格 動圖

零、今天要實現粉色的部分

一、Vue 的前世今生 —— 註定會推出 Nuxt.js

1、Vue —— 從不知不覺到後知後覺

MV* 發展初期，前後端分離成為可能，各種專案框架如雨後春筍一般，全部都出現了，一直平靜的前端慢慢的走進大家的視野，那個時候不是簡簡單單的切圖畫頁面，而是開始考慮如何用面向物件的思維開發，當時大家還熱衷於 Jquery 無法自拔，時間在那個時候是2012年之前；

2012年，36氪記者採訪了尤大大，併發了一篇文章其中有這麼一句話：“Evan 希望能通過這個舉動引起科技公司的注意，向他伸出橄欖枝。”，並附上了作者尤雨溪的微博、Twitter 與個人網站。作者的做法，我覺得大家應該借鑑，掌握好 Vue.js，讓你心儀的公司注意到你。

針對知乎上關於 Vue.js 的一個提問，尤雨溪的回答說出了最初的開發初衷，即“做 Vue.js 的初衷很單純，不是為了賺大錢，不是為了成為大神，也不是因為我發現了什麼不得了的創新點。我只是想做一個我自己會喜歡的框架。很巧，我把我想要的東西做出來以後，也有很多其他人喜歡，所以使用者越來越多。我從沒說過，也不認為 Vue.js 比所有其他框架都好（我一直的觀點都是開發者偏好的多樣性使得多框架/語言的共存有益無害，甚至是必要的

這個時候 Vue 還僅僅是一個無名小卒，雖然搭上了 MV* 的順風車，只不過還沒有正式起飛。

又過了三年，2015年開始，在各大論壇技中，與 Vue.js 這一相關詞語的內容爆炸式增長，在前端技術增速中獨領風騷，迅速成為前端三巨頭之一。記得在某個社群中有人這樣介紹三巨頭“來自 Google 的 Angular，來自 Facebook 的 React，來自開源社群的 Vue.js”，雖然大家現在還是通過百度發現vue的市場佔用量較少，但是它快速發展的勢頭依舊勢不可擋。

在 2016 年，Vue 已經正式崛起，開始出現在了某些公司，某些大廠也開始使用，並且也依舊與 React 、NG並肩飛奔。

2、Vue的快速發展，必將 Nuxt 推上歷史舞臺

雖然 vue 開發速度很快，但是也是一直在更新，完善和釋出，最大的一個問題就是——如何解決SEO的問題，這是所有 MV* 所面臨的一個共同的問題，大家也一直在摸索。如果不嘗試改變，這個歷史問題會隨著自身的快速發展而變得越來越嚴重，到時候會成為一個嚴重的短板效應，但是又不能回到 web1.0 時代，那樣 前後端分離會成為一個失敗品。如何更好的推出 SSR 服務，成為歷史必然趨勢。

直到2016 年 10 月 25 日，zeit.co 背後的團隊對外發布了 Next.js，一個 React 的服務端渲染應用框架。幾小時後，與 Next.js 異曲同工，一個基於 Vue.js 的服務端渲染應用框架應運而生，我們稱之為：Nuxt.js。這當然是歷史上的一個重要進步，兩大前端架構同時解決了這個歷史問題，

二、Nuxt.js 是什麼？

來自官方的講解：

Nuxt.js 是一個基於 Vue.js 的通用應用框架。

通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

我們的目標是建立一個靈活的應用框架，你可以基於它初始化新專案的基礎結構程式碼，或者在已有 Node.js 專案中使用 Nuxt.js。

Nuxt.js 預設了利用Vue.js開發服務端渲染的應用所需要的各種配置。

除此之外，我們還提供了一種命令叫：nuxt generate，為基於 Vue.js 的應用提供生成對應的靜態站點的功能。

我們相信這個命令所提供的功能，是向開發整合各種微服務（microservices）的 Web 應用邁開的新一步。

作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如非同步資料載入、中介軟體支援、佈局支援等。

它集成了 Vue 2.0 、vue-router、和 vuex（當然這個不是必須的），在 vue-cli 腳手架開發過程中，我們會通過 webpack 進行專案打包構建工作，所以我們會每次開發好，進行打包，但是Nuxt.js 是使用 webpack 和 vue-loader來自動化處理構建工作，還記得咱們上一篇文章中提到了，我們通過 webpack-server.js 來手動打包生成可以執行在 node 環境的伺服器捆綁渲染器，然後 開啟服務，就能實現伺服器渲染了，在這裡 Nuxt.js 為我們自動化的處理了這個過程，原理大家應該都清楚了。

特性如下

• 基於 Vue.js
• 自動程式碼分層
• 服務端渲染
• 強大的路由功能，支援非同步資料
• 靜態檔案服務
• ES6/ES7 語法支援
• 打包和壓縮 JS 和 CSS
• HTML頭部標籤管理
• 本地開發支援熱載入
• 整合ESLint

所以，這個框架是基於 vue 開發的，大家一定需要有一定的 vue 開發基礎，接觸 nuxt 框架才能更加得心應手。

三、使用 Nuxt 搭建我們的 blognuxt 專案

1、搭建新手模板

執行命令

vue init nuxt-community/starter-template blognuxt

然後簡單對專案進行三項配置，一直 Enter 就行。

然後就發現我們的專案已經安裝好了，下面重點說一下這些檔案的含義。

2、專案結構分析

├── assets                         // 資原始檔。用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
├── components                     // 元件。用於自己編寫的Vue元件，比如滾動元件，日曆元件，分頁元件
│   └── AppLogo.vue                // 預設logo元件
├── layouts                        // 佈局。頁面都需要有一個佈局，預設為 default。它規定了一個頁面如何佈局頁面。所有頁面都會載入在佈局頁面中的 <nuxt /> 標籤中。
如果需要在普通頁面中使用下級路由，則需要在頁面中新增 <nuxt-child />。該目錄名為Nuxt.js保留的，不可更改。
│   └── default.vue                // 預設模板頁面
├── middleware                     // 中介軟體。存放中介軟體。可以在頁面中呼叫： middleware: 'middlewareName' 。
├── pages                       　 // 頁面。一個 vue 檔案即為一個頁面。index.vue 為根頁面
│   └── index.vue                  // 預設首頁面
├── plugins                        // 用於存放JavaScript外掛的地方
├── static                         // 用於存放靜態資原始檔，比如圖片
├── store                       　 // 用於組織應用的Vuex 狀態管理。
├── .editorconfig                  // 開發工具格式配置
├── .eslintrc.js                   // ESLint的配置檔案，用於檢查程式碼格式
├── .gitignore                     // 配置git不上傳的檔案
├── nuxt.config.js                  // 用於組織Nuxt.js應用的個性化配置，已覆蓋預設配置
├── package.json                    //npm包管理配置檔案
└── README.md                       // 說明文件

layouts: 佈局。頁面都需要有一個佈局，預設為 default。它規定了一個頁面如何佈局頁面。所有頁面都會載入在佈局頁面中的 <nuxt /> 標籤中。如果需要在普通頁面中使用下級路由，則需要在頁面中新增 <nuxt-child />。該目錄名為Nuxt.js保留的，不可更改。。
pages: 頁面。一個 vue 檔案即為一個頁面。index.vue 為根頁面。

若需要二級頁面，則新增資料夾即可。無需配置路由
如果頁面的名稱類似於 _id.vue （以 _ 開頭），則為動態路由頁面，_ 後為匹配的變數（params）。
若變數是必須的，則在資料夾下建立空檔案 index.vue。更多的配置請移步至 官網 。
plugin: 外掛。用於組織那些需要在 根vue.js應用 例項化之前需要執行的 Javascript 外掛。需要注意的是，在任何 Vue 元件的生命週期內， 只有 beforeCreate 和 created 這兩個鉤子方法會在 客戶端和服務端均被呼叫。其他鉤子方法僅在客戶端被呼叫。
static: 靜態檔案。放置不需要經過 webpack 打包的靜態資源。如一些 js, css 庫。

生成了很多資料夾，通過整體結構，大家可以看出來，專案又一次被精簡了，從 vue-cli 2.0 到 vue-cli 3.0 咱們的專案結構是一直在精簡，主要都封裝起來，通過依賴包進行處理，這越來越像咱們之前的 .net core api 了。

3、安裝依賴並執行

 執行 npm install 安裝我們的依賴包

npm install

然後執行 npm run dev，執行專案

 npm run dev

這個上半部就是我們的 components 檔案下的 AppLogo.vue 實現的動態效果。

4、修改下pages 下的 index.vue 頁面，實現 hello 

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        歡迎：老張的哲學
      </h1>
      <h2 class="subtitle">
        一個 nuxt 工程
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">部落格園</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'//統一使用 波浪線~ 來代替 斜槓/

export default {
  components: {
    AppLogo
  }
}
</script>

這些內容大家一定就是很熟悉了，如果開發過 vue 的話，專案直接執行我們的修改，檢視瀏覽器

大家可以看出來，不僅我們的頁面渲染了，我們的專案原始碼也把內容渲染出來了，這樣就達到了我們的SSR 服務端渲染的目的。那具體是如何執行的呢，明天咱們深入瞭解下其中的原理。

 四、結語

 好啦，今天就暫時說這麼多吧，後邊還有很多知識點，今天咱們簡單瞭解了下這個 nuxt.js 框架，明白了安裝過程，已經專案結構的基本骨架，當然這僅僅是九牛一毛，nuxt 作為一個框架，雖說是依賴於 vue 之上，但是還是有自己的東西，比如動態路由，中介軟體，非同步資料，狀態樹，檢視等等等等，這些咱們都會在以後說到。明天會重點說下 nuxt 的執行原理

 五、CODE

這是剛剛建立的空的框架，以後就在這基礎上封裝搭建了。