重慶江北區(qū)網(wǎng)站建設公司seo網(wǎng)絡推廣是什么意思
Nuxt實戰(zhàn)教程基礎-Day01
- Nuxt是什么?
- Nuxt.js框架是如何運作的?
- Nuxt特性
- 流程圖
- 服務端渲染(通過 SSR)
- 單頁應用程序 (SPA)
- 靜態(tài)化 (預渲染)
- Nuxt優(yōu)缺點
- 優(yōu)點
- 缺點
- 安裝
- 運行項目
- 總結
前言:本教程基于Nuxt2,作為教程的第一天,我們先從了解Nuxt.js這個框架開始。
Nuxt是什么?
- Nuxt.js 是一個基于 Vue.js 的通用應用框架。
- 通過對客戶端/服務端基礎架構的抽象組織,Nuxt.js 主要關注的是應用的 UI 渲染。
- 就使用而言,組件寫法基本和vue相差不大,區(qū)別在于幾個鉤子函數(shù),以及一些服務端渲染相關的東西。
Nuxt.js框架是如何運作的?
Nuxt.js 集成了以下組件/框架,用于開發(fā)完整而強大的 Web 應用:
- Vue2、Vue-Router、Vuex (當配置了 Vuex 狀態(tài)樹配置項 時才會引入)、Vue 服務器端渲染 (排除使用 mode: ‘spa’)、Vue-Meta
- 壓縮并 gzip 后,總代碼大小為:57kb (如果使用了 Vuex 特性的話為 60kb)。
- 另外,Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作(如打包、代碼分層、壓縮等等)。
Nuxt特性
- 基于 Vue.js
- 自動代碼分層
- 服務端渲染
- 強大的路由功能,支持異步數(shù)據(jù)
- 靜態(tài)文件服務
- ES2015+ 語法支持
- 打包和壓縮 JS 和 CSS
- HTML 頭部標簽管理(title、keywords、description)
- 本地開發(fā)支持熱加載
- 集成 ESLint
- 支持各種樣式預處理器: SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送
流程圖
下圖闡述了 Nuxt.js 應用一個完整的服務器請求到渲染(或用戶通過 切換路由渲染頁面)的流程:
服務端渲染(通過 SSR)
-
您可以使用Nuxt.js作為框架來處理項目的所有 UI 呈現(xiàn)。
-
啟動時nuxt,它將啟動具有熱更新加載的開發(fā)服務器,并且Vue 服務器端渲染配置為自動為服務器呈現(xiàn)應用程序。
單頁應用程序 (SPA)
- 如果您不想使用服務器端渲染或需要應用程序提供靜態(tài)托管,則可以使用 nuxt --spa 命令即可使用 SPA 模式。它為您提供了強大的 SPA 部署機制,無需使用 Node.js 來運行應用程序或任何特殊的服務器端處理。
- 如果你的項目有自己的 Web 服務器(例如用 Express.js 啟動的 Web 服務),你仍然可以將 Nuxt.js 當作是中間件來使用,負責 UI 渲染部分的功能。在開發(fā)通用的 Web 應用過程中,Nuxt.js 是可插拔的,沒有太多的限制,可通過 開發(fā)編碼中使用 Nuxt.js 了解更多的信息。
靜態(tài)化 (預渲染)
-
支持 Vue.js 應用的靜態(tài)化算是 Nuxt.js 的一個創(chuàng)新點,通過 nuxt generate 命令實現(xiàn)。
-
該命令依據(jù)應用的路由配置將每一個路由靜態(tài)化成為對應的 HTML 文件。
例如,以下文件結構:
-| pages/
----| about.vue
----| index.vue
靜態(tài)化后變成:
-| dist/
----| about/
------| index.html
----| index.html
靜態(tài)化可以讓你在任何一個靜態(tài)站點服務商托管你的 Web 應用。
Nuxt優(yōu)缺點
優(yōu)點
- 利于seo,一般購物類網(wǎng)站都需要seo優(yōu)化
- 首屏渲染速度更快,原因是:服務端渲染只需要進行一次網(wǎng)絡請求,而客戶端渲染需要先請求運行所需文件,運行之后再進行網(wǎng)絡請求數(shù)據(jù),然后加載頁面
缺點
- 對于服務器要求比客戶端渲染高
安裝
運行 create-nuxt-app
確保安裝了 npx(npx 在 NPM 版本 5.2.0 默認安裝了):
$ npx create-nuxt-app <項目名>
或者用 yarn :
$ yarn create nuxt-app <項目名>
它會讓你進行一些選擇,你根據(jù)自己所需要的進行選擇就OK啦,如下圖是我創(chuàng)建項目時的選擇:
運行項目
cd <項目名>npm run dev
運行成功后如下圖,默認端口為3000
然后在瀏覽器輸入localhost:3000,將會看到如下圖所示
總結
Day01給大家簡單介紹一下Nuxt.js這個框架,以及項目創(chuàng)建過程,另外給大家介紹一個比較實用的瀏覽器插件可以用于分析網(wǎng)站用了哪些技術。這個插件就叫wappalyzer
,下面為給大家看看,這個插件的使用效果。
利用此插件即可分析那些網(wǎng)頁用了一些啥技術,當你們想要實現(xiàn)類似的效果就不用苦苦區(qū)百度搜索用了哪些技術了,接下來我就給大家推薦幾個Nuxt框架開發(fā)的網(wǎng)站給大家觀摩一下,后面的教程都將基于例舉的這幾個網(wǎng)站來展開。y.js.cn這個網(wǎng)站前端主要用了Nuxt、Element-UI、TailwindCSS等。jsjiami.cn這個網(wǎng)站同樣用了Nuxt等技術。后續(xù)教程都根據(jù)博主所已知的網(wǎng)站,來展開博客教程,如果大家有所知網(wǎng)站用Nuxt開發(fā)的,歡迎在評論區(qū)補充,我們一起學習學習。