Vue 服務(wù)端渲染 Nuxt.js 用起來真的挺香的。
嗨，好久不見。
我是你干貨滿滿、穩(wěn)定更新的勾勾。
Nuxt.js 應(yīng)用
Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。Nuxt.js 預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，為基于 Vue.js 的應(yīng)用提供生成對應(yīng)的靜態(tài)站點的功能。
打開 Nuxt.js官網(wǎng)：https://www.nuxtjs.cn/ ，學(xué)習(xí)指南寫的非常詳細(xì)且通俗易懂。根據(jù)指南，我們可以看到有兩種安裝方式，一種使用 create-nuxt-app 腳手架工具，另一種是自己手動創(chuàng)建。
安裝
腳手架安裝
接下來我們分別嘗試不同的安裝方式，先使用腳手架進(jìn)行安裝，執(zhí)行命令 ：npx create-nuxt-app creact-nuxt
接著，在命令行中會有很多的選擇項，分別有項目名稱、開發(fā)語言、UI組件庫、服務(wù)器框架、測試框架、HTTP請求庫等等，可以根據(jù)自己的需要進(jìn)行不同的選擇，安裝成功過后，命令行中會給出對應(yīng)的提示信息。
我們可以根據(jù)提示信息運行項目。項目有開發(fā)環(huán)境和生產(chǎn)環(huán)境兩種運行方式，開發(fā)環(huán)境下直接使用 npm run dev 即可，而要運行生產(chǎn)環(huán)境，則需要先進(jìn)行 build 編譯，編譯成功后才能開啟項目運行。
因為項目是剛剛初始化的，我們并沒有寫任何內(nèi)容，所以，不管使用那種運行方式，我們能看到的都是下面這個頁面內(nèi)容。
手動安裝
不同于腳手架安裝，手動安裝需要我們自己創(chuàng)建項目并安裝所需擴展和插件，還需要我們自己寫好組件代碼，然后配置執(zhí)行命令，才能啟動運行。但是，手動創(chuàng)建更加考驗大家對項目的整體把控能力。
執(zhí)行命令：mkdir nuxtnpm ?創(chuàng)建文件夾后，切換目錄：cd nuxtnpm ;
然后執(zhí)行命令：npm init -y 創(chuàng)建項目并生成 package.json 文件；
使用命令：npm install nuxt --save ?安裝 Nuxt.js 框架；
在 nuxtnpm 目錄中，創(chuàng)建 pages 目錄及 pages/index.vue 組件文件，在組件文件中，寫如下代碼，打聲招呼：
<template><div><h2> 嗨 Nuxt.js h2>div>template><script>export default {}script>
最后，我們還要在 ?package.json 文件中，配置運行命令的腳本參數(shù)：
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate"},
配置好命令參數(shù)后，就和前面的運行套路是一樣的了。
npm run dev ?啟動一個熱加載的 Web 服務(wù)器（開發(fā)模式）；
npm run build 編譯項目，利用 webpack 編譯應(yīng)用，壓縮 JS 和 CSS 資源（發(fā)布用）；
npm run start 以生產(chǎn)模式啟動一個 Web 服務(wù)器 (需要先進(jìn)行項目編譯)。
項目運行后，我們就可以看到剛剛寫的組件內(nèi)容了。
需要注意的是，pages 目錄是必須的，Nuxt.js 框架會自動讀取該目錄下所有的 .vue 文件并自動生成對應(yīng)的路由配置。
路由
基礎(chǔ)路由
基礎(chǔ)路由不需要配置，Nuxt.js 會根據(jù) pages 中的文件夾及文件自動生成路由配置。
假設(shè) pages 的目錄結(jié)構(gòu)如下：
pages/--| user/-----| index.vue-----| one.vue--| index.vue
那么，Nuxt.js 自動生成的路由配置如下：
router: {routes: [{name: 'index',path: '/',component: 'pages/index.vue'},{name: 'user',path: '/user',component: 'pages/user/index.vue'},{name: 'user-one',path: '/user/one',component: 'pages/user/one.vue'}]}
同樣的，在 /.nuxt/router.js 文件中，我們也能夠看到相關(guān)內(nèi)容。
路由導(dǎo)航
Nuxt 中的路由導(dǎo)航有三種方式，一種就是普通的 a 標(biāo)簽跳轉(zhuǎn)，太過于基礎(chǔ)這里就不說了；兩外兩種分別是 nuxt-link 組件和編程式導(dǎo)航。
nuxt-link 組件用于在頁面中添加鏈接跳轉(zhuǎn)到其他頁面。目前
而編程式導(dǎo)航的用法，同樣與 Vue 中的使用方式一致：
<template><div><h2>nuxt-link 跳轉(zhuǎn)：h2><nuxt-link to="/user/info">Go to usernuxt-link><h2>編程式導(dǎo)航 跳轉(zhuǎn)：h2><button @click="clickBtn">Go to userbutton>div>template><script>import axios from 'axios'export default {methods:{clickBtn(){this.$router.push('/user')}}}script>
異步數(shù)據(jù)-asyncData
Nuxt.js 擴展了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。
asyncData 方法會在組件（限于頁面組件）每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。Nuxt.js 會將 asyncData 返回的數(shù)據(jù)融合組件 data 方法返回的數(shù)據(jù)一并返回給當(dāng)前組件。
<template><div>user-index page<hr /><div v-for="v in dataObj"><h3>{{ v.name }}h3>div>div>template><script>import axios from "axios";export default {async asyncData({ params }) {// 發(fā)送請求，獲取數(shù)據(jù)const { data } = await axios.get(`http://127.0.0.1`);// 解析數(shù)據(jù)const dataObj = JSON.parse(data);// 返回數(shù)據(jù)后，Nuxt 會合并data方法的數(shù)據(jù)給組件，無需額外代碼return { dataObj };},};script>
Nuxt.js 對 SSG 的支持
在開始之前，我們需要先了解 SSG 的含義，SSG（Static Site Generators）：靜態(tài)站點生成。
就是將應(yīng)用中用到的所有頁面，全部生成靜態(tài)文件的方案。靜態(tài)站點生成方案，更適合 CDN、緩存、內(nèi)容數(shù)據(jù)無變化的頁面，比如：宣傳頁、博客文章、幫助文檔、新聞頁面、電商產(chǎn)品列表等眾多應(yīng)用場景。因為頁面都是事先生成好的，一次構(gòu)建，反復(fù)使用，訪問速度快。
那么，在 Nuxt.js 中如何將應(yīng)用靜態(tài)化導(dǎo)出呢？
npm run generate 命令就是用來專門做靜態(tài)導(dǎo)出的，這個命令執(zhí)行后，Nuxt 會根據(jù)路由配置，將應(yīng)用的全部內(nèi)容生成對應(yīng)的 HTML 靜態(tài)站點資源，這個命令會創(chuàng)建一個 dist 文件夾，所有靜態(tài)化后的資源文件均在其中。
推薦閱讀：
術(shù)與器：React 服務(wù)端渲染和靜態(tài)站點生成
手動實現(xiàn)一個自己的 React 服務(wù)端渲染
Vue 3.0 中的響應(yīng)式是如何實現(xiàn)的？
點個“在看”和“贊”吧，
畢竟我是要成為前端網(wǎng)紅的人。