Nuxt.js簡單的說是Vue.js的通用框架,最常用的就是用來作SSR(Server Side Render服務端渲染).再直白點說,就是Vue.js原來是開發SPA(Single Page Application單頁應用)的,但是隨著技術的普及,很多人想用Vue開發多頁應用,并在服務端完成渲染.這時候就出現了Nuxt.js這個框架,它簡化了SSR的開發難度.還可以直接用命令把我們制作的vue項目生成靜態HTML.

那服務器端渲染到底有什么好處？

最主要的原因時SPA（單頁應用）不利于搜索引擎的SEO操作。比如你作一個新聞網站，流量的一個主要來源是通過百度、谷歌、bing這些搜索引擎，但是它們對SPA的抓取并不好，特別是百度根本沒法抓取到SPA的內容頁面，所以我們必須把我們的應用在服務端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。那Nuxt.js適合作新聞、博客、電影、咨詢這樣的需要搜索引擎提供流量的項目。如果你要作移動端的項目，就沒必要使用這個框架了。

什么是SSR

SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。

SSR兩個優點：

SEO 不同于SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR生成的HTML是有內容的，這讓搜索引擎能夠索引到頁面內容。
更快內容到達時間 傳統的SPA應用是將bundle.js從服務器獲取，然后在客戶端解析并掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。

Nuxt.js的官方網站是這樣介紹的：

Nuxt.js 是一個基于 Vue.js 的通用應用框架。
通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

一. Nuxt.js安裝

####1.使用npm或者yarn來安裝vue-cli這個框架

npm install -g vue-cli or yarn global add @vue/cli

安裝完成后可以使用vue -V 來測試是否安裝成功。（注意：這里要使用大寫的V，小寫無效）
####2.使用vue安裝 nuxt
安裝好vue-cli后，就可以使用init命令來初始化Nuxt.js項目。

vue init nuxt/starter

這時候他會在github上下載模版，然后會詢問你項目的名稱叫什么，作者什么的，這些完全可以根據自己的愛好填寫。
####3.使用npm install安裝依賴包

npm install

這個過程是要等一會的，如果你這個過程安裝失敗，也不要慌張，你可以直接該刪除項目中的node_modules文件夾后，重新npm install進行安裝。
####4.使用npm run dev 啟動服務

npm run dev

####5.在瀏覽器輸入 localhost:3000,可以看到結果。

Hello World
學程序國際慣例的第一節都是來個Hello World ，我們先來體驗一下。
在項目根目錄下找到/pages/index.vue文件，讓后把項目名稱改寫成Hello World?？蚣苤С譄岣?#xff0c;所以你不用刷新就自動更新了。

二.Nuxt目錄結構詳講

|-- .nuxt // Nuxt自動生成，臨時的用于編輯的文件，build |-- assets // 用于組織未編譯的靜態資源入LESS、SASS 或 JavaScript |-- components // 用于自己編寫的Vue組件，比如滾動組件，日歷組件，分頁組件 |-- layouts // 布局目錄，用于組織應用的布局組件，不可更改。 |-- middleware // 用于存放中間件 |-- pages // 用于存放寫的頁面，我們主要的工作區域 |-- plugins // 用于存放JavaScript插件的地方 |-- static // 用于存放靜態資源文件，比如圖片 |-- store // 用于組織應用的Vuex 狀態管理。 |-- .editorconfig // 開發工具格式配置 |-- .eslintrc.js // ESLint的配置文件，用于檢查代碼格式 |-- .gitignore // 配置git不上傳的文件 |-- nuxt.config.json // 用于組織Nuxt.js應用的個性化配置，已覆蓋默認配置 |-- package-lock.json // npm自動生成，用于幫助package的統一性設置的，yarn也有相同的操作 |-- package-lock.json // npm自動生成，用于幫助package的統一性設置的，yarn也有相同的操作 |-- package.json // npm包管理配置文件

Nuxt常用配置項

已經了解Nuxt生成項目的目錄結構后，其實就可以愉快的玩耍了，但是感覺還是收到了很多約束，比如開發時的IP地址和端口（localhost:3000）和公用的CSS，這節課我們就學習一些Nuxt的常用配置，讓我們開發的更自由。
#####配置全局CSS
在開發多頁項目時，都會定義一個全局的CSS來初始化我們的頁面渲染，比如把padding和margin設置成0，網上也有非常出名的開源css文件normailze.css。要定義這些配置，需要在nuxt.config.js里進行操作。

比如現在我們要把頁面字體設置為紅色，就可以在assets/css/normailze.css文件，然后把字體設置為紅色。

/assets/css/normailze.css

html{color:red; }

/nuxt.config.js

css:['~assets/css/normailze.css'],

設置好后，在終端輸入npm run dev 。然后你會發現字體已經變成了紅色。

四.Nuxt的路由配置和參數傳遞

學習前端框架都要學習路由機制,因為路由可以體現我們的業務邏輯,把模塊串聯起來,讓程序煥發光彩.那簡單的說路由就是我們的跳轉機制,也可以簡單理解成連接跳轉.Nuxt.js的路由并不復雜,它給我們進行了封裝,讓我們節省了很多配置環節.
我們可以直接使用a標簽跳轉,但是Nuxt.js并不推薦這種方法,它為我們準備了標簽(vue中叫組件).

<template><div><ul><li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li><li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li><li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li></ul></div> </template><script>export default {components: {} } </script><style></style>

params傳遞參數

路由經常需要傳遞參數，我們可以簡單的使用params來進行傳遞參數，我們現在向新聞頁面（news）傳遞個參數，然后在新聞頁面進行簡單的接收。

我們先修改pages下的Index.vue文件，給新聞的跳轉加上params參數，傳遞3306ID。

<template><div><ul><li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li><li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li><li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li></ul></div> </template><script>export default {components: {} } </script><style></style>

在news文件夾下的index.vue里用$route.params.newsId進行接收，代碼如下。

<template><div><h2>News Index page</h2><p>NewsID:{{$route.params.newsId}}</p><ul><li><a href="/">Home</a></li></ul></div> </template>

asyncData方法獲取數據

在項目中需要在初始化頁面前先得到數據，也就是我們常說的異步請求數據。Nuxt.js貼心的為我們擴展了Vue.js的方法，增加了anyncData。從名字上就很好理解，這是一個異步的方法。
創建遠程數據
在這里制作一些假的遠程數據，我選擇的網站是myjson.com，它是一個json的簡單倉庫，學習使用是非常適合的。
我們打開網站，在對話空中輸入JSON代碼，這個代碼可以自己隨意輸入哦。

{"name": "CSDN","age": 18,"interest": "I love coding!" }

輸入后，網站會給你一個地址，這就是你這個JSON倉庫的地址了。

https://api.myjson.com/bins/8gdmr

安裝Axios

Vue.js官方推薦使用的遠程數據獲取方式
是Axios,所以我們安裝官方推薦的,來使用Axios,這里使用npm安裝或者yarn

npm install axios --save
yarn add @nuxtjs/axios

ansycData的promise方法

我們在pages下面新建一個文件，叫做ansyData.vue。
然后寫入下面的代碼：

<template><div><h1>姓名：{{info.name}}</h1><h2>年齡：{{info.age}}</h2><h2>興趣：{{info.interest}}</h2></div> </template> <script> import axios from 'axios' export default {data(){return {name:'hello World',}},asyncData(){return axios.get('https://api.myjson.com/bins/8gdmr').then((res)=>{console.log(res)return {info:res.data}})} } </script>

ansycData的await方法

當然上面的方法稍顯過時，現在都在用ansyc…await來解決異步,改寫上面的代碼.

<template><div><h1>姓名：{{info.name}}</h1><h2>年齡：{{info.age}}</h2><h2>興趣：{{info.interest}}</h2></div> </template> <script> import axios from 'axios' export default {data(){return {name:'hello World',}},async asyncData(){let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')return {info: data}} } </script>

總結

以上是生活随笔為你收集整理的开始使用Nuxt.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。