重慶江北區(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ū)補充，我們一起學習學習。