nuxt開發實戰-開始

Nuxt.js介紹

Nuxt.js是基於Vue.js的輕量級應用框架，可用來建立服務端渲染(SSR) 應用，也可充當靜態站點引擎生成靜態站點應用，具備優雅的代碼結構分層和熱加載等。

服務端渲染

渲染,就是將數據和模版組裝成html。因此,服務端渲染就是在服務端上，直接把數據和模版組裝成html返回給客戶端，客戶端只負責解析相關html內容便可。

對Nuxt.js的理解——添磚加瓦

Nuxt.js是基於Vue.js的輕量級應用框架，所謂的應用框架就是在原來的語言語法基礎之上進行不斷的抽象與封裝，暴露出相關的配置、api供業務開發人員進行使用。

Nuxt.js就像是在Vue的基礎上創建的一座建築的外殼。業務開發者是在其（gao）他（ji）開發者的基礎上，結合具體的業務在這個建築外殼中添磚加瓦。（不是同一個層面的開發者，😓）

咱們只是站在巨人的肩膀上，開發難度是很初級的，面向的是用戶與業務。對於更加底層的開發邏輯，不是咱們關心的事情。（固然，那些更有技術含量）

所以，對Nuxt的學習的重點在於Nuxt的默認配置、語法規則（對開發者暴露的API、配置規則等）。使用Nuxt時咱們更應該去關注的是業務，而不是技術。越抽象的技術產物離底層更遠，離業務更近。

框架可行性評估

截止目前，Nuxt的版本已經更新到2.9.1，star數爲2w+，最近commit時間更是在幾個小時前。這是一個很是值得推薦的應用框架。

服務端、客戶端業務開發

撇開Nuxt，咱們先來說一下常規的服務端、客戶端業務的開發方式（這裏僅僅介紹的是前端相關知識😝）

對於開發業務而言，咱們須要考慮的是如何進行抽象、共用等，減小業務開發中的重複工做，提升代碼的可讀性等。

服務端技術解決方案

對於服務端而言，最多見的抽象共用的技術解決方案有如下幾種：

• 中間件middleware
• 插件
• 直接引入
  經過npm包引入，或者直接經過路徑引入自定義組件/方法等
• 全局變量掛載
  node服務端常見的全局變量是app、context等。咱們能夠直接把須要的組件/方法等掛載在全局變量上，直接經過內存訪問。

客戶端技術解決方案

• 中間件middleware
• 插件
• 全局組件
• 直接引入
  經過npm包引入，或者直接經過路徑引入自定義組件/方法等
• 全局變量掛載
  能夠直接掛載在window或者Vue實例上

下面開始結合Nuxt來解釋以上技術解決方案具體是如何實現的。

開始一個新項目

爲了快速入門，Nuxt.js團隊建立了腳手架工具 create-nuxt-app

確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：

$ npx create-nuxt-app <項目名>

或者用yarn ：

$ yarn create nuxt-app <項目名>

它會讓你進行一些選擇:

• 在集成的服務器端框架之間進行選擇: None (Nuxt默認服務器)
• 選擇您喜歡的UI框架: None (無)
• 選擇您喜歡的測試框架:None (隨意添加一個)
• 選擇你想要的Nuxt模式 (Universal or SPA)
• 添加 axios module 以輕鬆地將HTTP請求發送到您的應用程序中。

當運行完時，它將安裝全部依賴項，所以下一步是啓動項目:

$ cd <project-name>

$ npm run dev

應用如今運行在 http://localhost:3000 上運行。

注意：Nuxt.js 會監聽 pages 目錄中的文件更改，所以在添加新頁面時無需從新啓動應用程序。

目錄結構

• 資源目錄

資源目錄 assets 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。

• 組件目錄

組件目錄 components 用於組織應用的 Vue.js 組件。Nuxt.js 不會擴展加強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。

• 佈局目錄

佈局目錄 layouts 用於組織應用的佈局組件。
若無額外配置，該目錄不能被重命名。

• 中間件目錄

middleware 目錄用於存放應用的中間件。

• 頁面目錄

頁面目錄 pages 用於組織應用的路由及視圖。Nuxt.js 框架讀取該目錄下全部的 .vue 文件並自動生成對應的路由配置。

• 插件目錄

插件目錄 plugins 用於組織那些須要在 根vue.js應用 實例化以前須要運行的 Javascript 插件。

• 靜態文件目錄

靜態文件目錄 static 用於存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啓動的時候，該目錄下的文件會映射至應用的根路徑 / 下。

舉個例子: /static/robots.txt 映射至 /robots.txt

若無額外配置，該目錄不能被重命名。

• Store 目錄

store 目錄用於組織應用的 Vuex 狀態樹 文件。 Nuxt.js框架集成了 Vuex 狀態樹 的相關功能配置，在 store 目錄下建立一個 index.js 文件可激活這些配置。

若無額外配置，該目錄不能被重命名。

• nuxt.config.js 文件

nuxt.config.js 文件用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。

若無額外配置，該文件不能被重命名。

• package.json 文件

package.json 文件用於描述應用的依賴關係和對外暴露的腳本接口。

該文件不能被重命名。

別名

srcDir: ~ 或 @
rootDir: ~~ 或 @@
默認狀況下，srcDir 和 rootDir 相同。

例如, 在vue 模板中, 若是你須要引入 assets 或者 static 目錄, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。