從壹開始先後端分離 [ vue + .netcore 補充教程 ] 二七║ Nuxt 基礎：框架初探

緣起

哈嘍你們好，又是週四了，俗話說週四來了，週末還遠麼哈哈，老張我也想下週請假，來個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 的，也能夠看看 http://www.javashuo.com/article/p-pawscobz-z.html

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

 

1、Vue 的前世此生 —— 註定會推出 Nuxt.js

一、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並肩飛奔。

 

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

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

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

 

2、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 框架才能更加駕輕就熟。

 

3、使用 Nuxt 搭建咱們的 blognuxt 項目

一、搭建新手模板

執行命令

vue init nuxt-community/starter-template blognuxt
//或者採用如今官方的安裝方案

npx create-nuxt-app 項目名

而後簡單對項目進行三項配置，一直 Enter 就行。

 

而後就發現咱們的項目已經安裝好了，下面重點說一下這些文件的含義。

 

若是採用官方的這個新的安裝方案，能夠看這裏

 

二、項目結構分析

 

├── assets                         // 資源文件。用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
├── components                     // 組件。用於本身編寫的Vue組件，好比滾動組件，日曆組件，分頁組件
│   └── AppLogo.vue                // 默認logo組件
├── layouts                        // 佈局。頁面都須要有一個佈局，默認爲 default。它規定了一個頁面如何佈局頁面。全部頁面都會加載在佈局頁面中的  標籤中。
若是須要在普通頁面中使用下級路由，則須要在頁面中添加 。該目錄名爲Nuxt.js保留的，不可更改。
│   └── default.vue                // 默認模板頁面
├── middleware                     // 中間件。存放中間件。能夠在頁面中調用：  。
├── 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                       // 說明文檔<nuxt /><nuxt-child />middleware: 'middlewareName'

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 了。

 

三、安裝依賴並運行

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

npm install

而後執行 npm run dev，運行項目

 npm run dev

這個上半部就是咱們的 components 文件下的 AppLogo.vue 實現的動態效果。

 

四、修改下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 服務端渲染的目的。那具體是如何運行的呢，明天我們深刻了解下其中的原理。

 

 4、結語

 好啦，今天就暫時說這麼多吧，後邊還有不少知識點，今天我們簡單瞭解了下這個 nuxt.js 框架，明白了安裝過程，已經項目結構的基本骨架，固然這僅僅是九牛一毛，nuxt 做爲一個框架，雖然說是依賴於 vue 之上，可是仍是有本身的東西，好比動態路由，中間件，異步數據，狀態樹，視圖等等等等，這些我們都會在之後說到。明天會重點說下 nuxt 的運行原理

 

 5、CODE

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

https://github.com/anjoy8/Blog.Vue.Nuxt