nuxt學(xué)習(xí)記錄

####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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容