緣起
哈嘍大家好，又是周四了，俗話說周四來了，周末還遠么哈哈，老張我也想下周請假，來個16天的大長假喲，不知道大家是怎么請假的，近來發現文章下邊已經沒有人評論了，趕腳比較凄涼了，大家看到的麻煩點個贊呀說個話呀，增加下人氣哈哈，剛剛突然想到原來問題都跑到群里了，也是，當初創建群的目的就是解決問題滴，不能本末倒置了 [ 苦笑 ]，經過一個月的書寫《.net core(13)》、《Vue學習(13)》上下兩部入門教程已經結束，今天開始一個 Vue 的補充教程 —— Nuxt.js 一個基於 Vue 應用的 SSR 教程，因為這個系列教程是輔助 Vue 的，但是又不屬於我們之前的正規系列教程里，所以我就暫時命名為補充教程吧，如果說你接觸過這個呢，說明你的 vue 已經很好了，至少是已經搭建過 vue-cli 腳手架的項目了，如果說沒有用過 Nuxt.js 那正好可以一起來看一看，我個人趕腳Vue的SSR是一個趨勢，所以還是多說一說吧，如果你還對 SSR 不了解，或者是第一次看我的系列教程，請換傳送門《 二十五║初探SSR服務端渲染（個人博客二）》和《二十六║Client渲染、Server渲染知多少{補充}》。好啦開始今天的講解
最終咱們會一步步開發我們的第二個項目 —— 基於 Nuxt 的個人博客 動圖
這個博客項目已經發布：http://123.206.33.109:26898/
我還有一個nuxt 的項目，是提bug 的，也可以看看 https://www.cnblogs.com/laozhang-is-phi/p/10249248.html
零、今天要實現粉色的部分
一、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
//或者采用現在官方的安裝方案
npx create-nuxt-app 項目名
然后簡單對項目進行三項配置，一直 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
這是剛剛創建的空的框架，以后就在這基礎上封裝搭建了。