簡(jiǎn)介
Nuxt.js是一個(gè)基于Vue.js的通用應(yīng)用框架挡篓。通過(guò)對(duì)客戶(hù)端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，
Nuxt.js主要關(guān)注的是應(yīng)用的UI渲染恬砂。
Nuxt.js預(yù)設(shè)了利用Vue.js開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置咧纠。作為框架，
Nuxt.js為 客戶(hù)端/服務(wù)端 這種典型的應(yīng)用架構(gòu)模式提供了許多有用的特性泻骤，例如異步數(shù)據(jù)加載漆羔、中間件支持、布局支持等狱掂。
官網(wǎng)
中文官網(wǎng)
github
特點(diǎn)
-
容易構(gòu)建
Nuxt.js集成了以下組件/框架演痒，用于開(kāi)發(fā)完整而強(qiáng)大的 Web 應(yīng)用：- Vue 2
- Vue-Router
- Vuex (當(dāng)配置了Vuex 狀態(tài)樹(shù)配置項(xiàng)時(shí)才會(huì)引入)
- Vue 服務(wù)器端渲染 (排除使用mode: 'spa')
- Vue-Meta
-
結(jié)構(gòu)清晰
項(xiàng)目目錄 ├─asserts 資源目錄 包含未編譯的資源，如LESS趋惨、SASS或JavaScript鸟顺。 ├─components 組件目錄 包含vue組件 ├─layouts 布局目錄 頁(yè)面的模版文件，相當(dāng)于vuecli的public ├─middleware 中間件 ├─node_modules ├─pages 視圖目錄 視圖頁(yè)面，相當(dāng)于vuecli的views ├─plugins 插件目錄 包含在掛載根Vue.js應(yīng)用程序之前需要運(yùn)行的Javascript插件讯嫂。 ├─static 靜態(tài)目錄 不需要編譯蹦锋，通過(guò)`/`即可訪(fǎng)問(wèn) ├─store Vuex文件 ├─ ... ├─nuxt.config.js nuxtjs配置文件 └─package.json 包管理配置文件 路由簡(jiǎn)單
只需將單個(gè)文件Vue組件放入pages文件夾，Nuxt便會(huì)自動(dòng)以零配置生成路由配置簡(jiǎn)單
vue標(biāo)準(zhǔn)項(xiàng)目中沒(méi)有標(biāo)準(zhǔn)的方法可以一起配置所有東西欧芽。
Nuxt可以編輯nuxt.config.js文件并修改框架的任何內(nèi)容莉掂，覆蓋任何智能默認(rèn)值或預(yù)配置SEO
Vue應(yīng)用屬于CSR應(yīng)用在客戶(hù)端進(jìn)行渲染不適合SEO，Nuxt已預(yù)先配置為在服務(wù)器上生成應(yīng)用程序千扔，以及根據(jù)路由添加與SEO相關(guān)的標(biāo)簽初次加載
Nuxt使用全局或靜態(tài)方式渲染應(yīng)用憎妙，預(yù)渲染的HTML會(huì)使頁(yè)面在瀏覽器加載更快。而且通過(guò)自動(dòng)分割代碼曲楚，只會(huì)加載實(shí)現(xiàn)路由功能所需的JavaScript便于修改
使用Vue很難更改框架的底層厘唾，Nuxt提供了一個(gè)更高階的模塊系統(tǒng)，可以輕松自定義Nuxt的各個(gè)方面
流程圖
start
-
構(gòu)建項(xiàng)目
使用命令行工具:
yarnyarn create nuxt-app <project-name>npm
npm init nuxt-app <project-name>注:創(chuàng)建項(xiàng)目過(guò)程中會(huì)讓你進(jìn)行一些選擇洞渤，根據(jù)需求選擇即可 -
開(kāi)始項(xiàng)目
通過(guò) npm 或 Yarn 運(yùn)行項(xiàng)目
npmcd <project-name> npm run devyarn
cd <project-name> yarn dev -
more
Nuxt.js 提供了一系列常用的命令, 用于開(kāi)發(fā)或發(fā)布部署阅嘶。
發(fā)布部署
Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署
- 服務(wù)端渲染應(yīng)用部署
部署 Nuxt.js 服務(wù)端渲染的應(yīng)用不能直接使用 nuxt 命令，而應(yīng)該先進(jìn)行編譯構(gòu)建载迄，然后再啟動(dòng) Nuxt 服務(wù)讯柔，可通過(guò)以下兩個(gè)命令來(lái)完成:
nuxt
npmnuxt build nuxt start
yarnnpm run build npm run startyarn build yarn start注:build命令會(huì)生成.nuxt/文件夾 - 靜態(tài)應(yīng)用部署
Nuxt.js 可依據(jù)路由配置將應(yīng)用靜態(tài)化，可以將應(yīng)用部署至任何一個(gè)靜態(tài)站點(diǎn)主機(jī)服務(wù)商:
nuxt
npmnuxt generate
yarnnpm run generateyarn generate注:generate命令會(huì)生成dist/文件夾
