####1. nuxt.js 是什么?
背景:2016 年 10 月 25 日,zeit.co 背后的團(tuán)隊(duì)對(duì)外發(fā)布了 Next.js,一個(gè) React 的服務(wù)端渲染應(yīng)用框架。幾小時(shí)后,與 Next.js 異曲同工,一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架應(yīng)運(yùn)而生,我們稱之為:Nuxt.js。
#### 畫重點(diǎn): 這句話的意思是說,nuxt和針對(duì)next而言的,都是服務(wù)端渲染的應(yīng)用框架。
Nuxt.js 是一個(gè)基于vue.js的通用應(yīng)用框架。
通過對(duì)客戶的/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織,Nuxt.js主要關(guān)注的是應(yīng)用的UI渲染。
我們的目標(biāo)是創(chuàng)建一個(gè)靈活的應(yīng)用框架,你可以基于它初始化新項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼,或者在已有node.js 項(xiàng)目中使用Nuxt.js .
Nuxt.js 預(yù)設(shè)了利用vue開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。
除此之外,我們還提供了一種命令叫: nuxt generate ,為基于vue的應(yīng)用提供生成對(duì)應(yīng)的靜態(tài)站點(diǎn)的功能。支持異步數(shù)據(jù)加載,中間件,布局等。
###2. Nuxt.js 框架是如何運(yùn)作的?
基于vue webpack babel ,集成了vue2 . vue-router .vuex(vuex狀態(tài)樹),vue-meta,壓縮后28kb,(31kb)。nuxt使用webpack,vue-loader,babel-loader來處理代碼的自動(dòng)化構(gòu)建。
###3.特性
####1.基于 Vue.js
####2 自動(dòng)代碼分層
####3 服務(wù)端渲染
####4 強(qiáng)大的路由功能,支持異步數(shù)據(jù)
####5 靜態(tài)文件服務(wù)
####6 ES6/ES7 語法支持
####7 打包和壓縮 JS 和 CSS
####8 HTML頭部標(biāo)簽管理
####9 本地開發(fā)支持熱加載
####10 集成ESLint
####11 支持各種樣式預(yù)處理器: SASS、LESS、 Stylus等等
#### 3.1 服務(wù)端渲染
你可以使用 Nuxt.js 作為你項(xiàng)目的UI渲染框架。
當(dāng)運(yùn)行 nuxt 命令時(shí),會(huì)啟動(dòng)一個(gè)支持 熱加載 和 服務(wù)端渲染(基于Vue.js的 vue-server-renderer 模塊)的開發(fā)服務(wù)器。
#### 3.2 應(yīng)用的靜態(tài)化
支持 Vue.js 應(yīng)用的靜態(tài)化算是 Nuxt.js 的一個(gè)創(chuàng)新點(diǎn),通過 <strong>nuxt generate </strong>命令實(shí)現(xiàn)。
該命令依據(jù)應(yīng)用的路由配置將每一個(gè)路由靜態(tài)化成為對(duì)應(yīng)的HTML文件。
靜態(tài)化可以讓你在任何一個(gè)靜態(tài)站點(diǎn)服務(wù)商托管你的web應(yīng)用。
Nuxt.js 的官網(wǎng)就是一個(gè)絕佳的例子, 它靜態(tài)化后托管于GitHub Pages:
源碼
靜態(tài)化后的文件
在每次更新文檔代碼的時(shí)候,為了避免手工執(zhí)行 nuxt generate 命令生成靜態(tài)文件,我們可以在每次提交代碼的時(shí)候調(diào)用一個(gè)AWS Lambda函數(shù)來做以下的事情:
拷貝 nuxtjs.org 源碼
使用 npm install 命令安裝依賴
運(yùn)行 nuxt generate
將生成的 dist 目錄提交至 gh-pages 分支
#### 4. 安裝?
vue init nuxt-community/starter-template <project-name>這里不能只寫前面的哇,裝不下的,會(huì)報(bào)404.
如果 vue-cli 沒有安裝, 需先通過 npm install -g vue-cli 來安裝。
然后安裝依賴包:
$ cd <project-name>
$ npm install
接著通過以下命令啟動(dòng)項(xiàng)目:
$ npm run dev