nuxt.js1-1

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

　　

　　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環境搭建和Hello World

　nuxt.js安裝

　　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,能夠看到結果。

　　Hello World

　　學程序國際慣例的第一節都是來個Hello World ，咱們先來體驗一下。

　　在項目根目錄下找到/pages/index.vue文件，讓後把項目名稱改寫成Hello World。框架支持熱更新，因此你不用刷新就自動更新了。