Nuxt學習筆記

Nuxt.js簡單的說是Vue.js的通用框架，最經常使用的就是用來做SSR（服務器端渲染）。再直白點說，就是Vue.js原來是開發SPA（單頁應用）的，可是隨着技術的普及，不少人想用Vue開發多頁應用，並在服務端完成渲染。這時候就出現了Nuxt.js這個框架，她簡化了SSR的開發難度。還能夠直接用命令把咱們製做的vue項目生成爲靜態html。

那服務器端渲染到底有什麼好處那？

最主要的緣由時SPA（單頁應用）不利於搜索引擎的SEO操做。好比你做一個新聞網站，流量的一個主要來源是經過百度、谷歌、bing這些搜索引擎，可是它們對SPA的抓取並很差，特別是百度根本無法抓取到SPA的內容頁面，因此咱們必須把咱們的應用在服務端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。那Nuxt.js適合做新聞、博客、電影、諮詢這樣的須要搜索引擎提供流量的項目。若是你要做移動端的項目，就不必使用這個框架了。（其實Nuxt.js我的覺的是一個解決方案）

 

什麼是SSR？

SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。

SSR兩個優勢：

SEO 不一樣於SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR生成的HTML是有內容的，這讓搜索引擎可以索引到頁面內容。

更快內容到達時間 傳統的SPA應用是將bundle.js從服務器獲取，而後在客戶端解析並掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。

Nuxt.js的官方網站是這樣介紹的：

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

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

Nuxt.js是特色（優勢）：

基於 Vue.js
自動代碼分層
服務端渲染
強大的路由功能，支持異步數據
靜態文件服務
ES6/ES7 語法支持
打包和壓縮 JS 和 CSS
HTML頭部標籤管理
本地開發支持熱加載
集成ESLint
支持各類樣式預處理器： SASS、LESS、 Stylus等等

nuxt.js安裝

在使用npm前你須要安裝Node到系統中，若是你還不會安裝Node，那就不要學這節課了，而是從技術胖的Vue基礎課程開始學起吧，等基礎都學會了再來學這個也不遲。

1.用npm來安裝vue-cli這個框架，若是你已經安裝過了，能夠省略這步。

npm install vue-cli -g

這個根據你的網絡環境不一樣，安裝的速度不只相同，若是你的網絡環境實在很差，能夠考慮使用cnpm來進行安裝。（在實際開發中我會盡可能避免使用cnpm來進行安裝，由於會出現一些未知的錯誤。）

安裝完成後可使用vue -V 來測試是否安裝成功。（注意：這裏要使用大寫的V，小寫無效）。

2.使用vue安裝 nuxt

安裝好vue-cli後，就可使用init命令來初始化Nuxt.js項目。

vue init nuxt/starter

這時候他會在github上下載模版，而後會詢問你項目的名稱叫什麼，做者什麼的，這些徹底能夠根據本身的愛好填寫。

3.使用npm install安裝依賴包

npm install

這個過程是要等一會的，若是你這個過程安裝失敗，也不要慌張，你能夠直接誒刪除項目中的node_modules文件夾後，從新npm install進行安裝。

4.使用npm run dev 啓動服務

npm run dev

5.在瀏覽器輸入 localhost:3000,能夠看到結果。

 

目錄結構：

Nuxt自動生產了項目目錄，咱們先來一個一個介紹一下。

|-- .nuxt                            // Nuxt自動生成，臨時的用於編輯的文件，build
|-- assets                           // 用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
|-- components                       // 用於本身編寫的Vue組件，好比滾動組件，日曆組件，分頁組件
|-- layouts                          // 佈局目錄，用於組織應用的佈局組件，不可更改。
|-- middleware                       // 用於存放中間件
|-- pages                            // 用於存放寫的頁面，咱們主要的工做區域
|-- plugins                          // 用於存放JavaScript插件的地方
|-- static                           // 用於存放靜態資源文件，好比圖片
|-- store                            // 用於組織應用的Vuex 狀態管理。
|-- .editorconfig                    // 開發工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package.json                     // npm包管理配置文件