Nuxt.js簡(jiǎn)單的說(shuō)是Vue.js的通用框架,最常用的就是用來(lái)作SSR(Server Side Render服務(wù)端渲染).再直白點(diǎn)說(shuō),就是Vue.js原來(lái)是開(kāi)發(fā)SPA(Single Page Application單頁(yè)應(yīng)用)的,但是隨著技術(shù)的普及,很多人想用Vue開(kāi)發(fā)多頁(yè)應(yīng)用,并在服務(wù)端完成渲染.這時(shí)候就出現(xiàn)了Nuxt.js這個(gè)框架,它簡(jiǎn)化了SSR的開(kāi)發(fā)難度.還可以直接用命令把我們制作的vue項(xiàng)目生成靜態(tài)HTML.

那服務(wù)器端渲染到底有什么好處？

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

什么是SSR

SSR，即服務(wù)器渲染，就是在服務(wù)器端將對(duì)Vue頁(yè)面進(jìn)行渲染生成html文件，將html頁(yè)面?zhèn)鬟f給瀏覽器。

SSR兩個(gè)優(yōu)點(diǎn)：

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

Nuxt.js的官方網(wǎng)站是這樣介紹的：

Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。
通過(guò)對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。

一. Nuxt.js安裝

####1.使用npm或者yarn來(lái)安裝vue-cli這個(gè)框架

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

安裝完成后可以使用vue -V 來(lái)測(cè)試是否安裝成功。（注意：這里要使用大寫(xiě)的V，小寫(xiě)無(wú)效）
####2.使用vue安裝 nuxt
安裝好vue-cli后，就可以使用init命令來(lái)初始化Nuxt.js項(xiàng)目。

vue init nuxt/starter

這時(shí)候他會(huì)在github上下載模版，然后會(huì)詢問(wèn)你項(xiàng)目的名稱叫什么，作者什么的，這些完全可以根據(jù)自己的愛(ài)好填寫(xiě)。
####3.使用npm install安裝依賴包

npm install

這個(gè)過(guò)程是要等一會(huì)的，如果你這個(gè)過(guò)程安裝失敗，也不要慌張，你可以直接該刪除項(xiàng)目中的node_modules文件夾后，重新npm install進(jìn)行安裝。
####4.使用npm run dev 啟動(dòng)服務(wù)

npm run dev

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

Hello World
學(xué)程序國(guó)際慣例的第一節(jié)都是來(lái)個(gè)Hello World ，我們先來(lái)體驗(yàn)一下。
在項(xiàng)目根目錄下找到/pages/index.vue文件，讓后把項(xiàng)目名稱改寫(xiě)成Hello World。框架支持熱更新，所以你不用刷新就自動(dòng)更新了。

二.Nuxt目錄結(jié)構(gòu)詳講

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

Nuxt常用配置項(xiàng)

已經(jīng)了解Nuxt生成項(xiàng)目的目錄結(jié)構(gòu)后，其實(shí)就可以愉快的玩耍了，但是感覺(jué)還是收到了很多約束，比如開(kāi)發(fā)時(shí)的IP地址和端口（localhost:3000）和公用的CSS，這節(jié)課我們就學(xué)習(xí)一些Nuxt的常用配置，讓我們開(kāi)發(fā)的更自由。
#####配置全局CSS
在開(kāi)發(fā)多頁(yè)項(xiàng)目時(shí)，都會(huì)定義一個(gè)全局的CSS來(lái)初始化我們的頁(yè)面渲染，比如把padding和margin設(shè)置成0，網(wǎng)上也有非常出名的開(kāi)源css文件normailze.css。要定義這些配置，需要在nuxt.config.js里進(jìn)行操作。

比如現(xiàn)在我們要把頁(yè)面字體設(shè)置為紅色，就可以在assets/css/normailze.css文件，然后把字體設(shè)置為紅色。

/assets/css/normailze.css

html{color:red; }

/nuxt.config.js

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

設(shè)置好后，在終端輸入npm run dev 。然后你會(huì)發(fā)現(xiàn)字體已經(jīng)變成了紅色。

四.Nuxt的路由配置和參數(shù)傳遞

學(xué)習(xí)前端框架都要學(xué)習(xí)路由機(jī)制,因?yàn)槁酚煽梢泽w現(xiàn)我們的業(yè)務(wù)邏輯,把模塊串聯(lián)起來(lái),讓程序煥發(fā)光彩.那簡(jiǎn)單的說(shuō)路由就是我們的跳轉(zhuǎn)機(jī)制,也可以簡(jiǎn)單理解成連接跳轉(zhuǎn).Nuxt.js的路由并不復(fù)雜,它給我們進(jìn)行了封裝,讓我們節(jié)省了很多配置環(huán)節(jié).
我們可以直接使用a標(biāo)簽跳轉(zhuǎn),但是Nuxt.js并不推薦這種方法,它為我們準(zhǔn)備了標(biāo)簽(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傳遞參數(shù)

路由經(jīng)常需要傳遞參數(shù)，我們可以簡(jiǎn)單的使用params來(lái)進(jìn)行傳遞參數(shù)，我們現(xiàn)在向新聞頁(yè)面（news）傳遞個(gè)參數(shù)，然后在新聞頁(yè)面進(jìn)行簡(jiǎn)單的接收。

我們先修改pages下的Index.vue文件，給新聞的跳轉(zhuǎn)加上params參數(shù)，傳遞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進(jìn)行接收，代碼如下。

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

asyncData方法獲取數(shù)據(jù)

在項(xiàng)目中需要在初始化頁(yè)面前先得到數(shù)據(jù)，也就是我們常說(shuō)的異步請(qǐng)求數(shù)據(jù)。Nuxt.js貼心的為我們擴(kuò)展了Vue.js的方法，增加了anyncData。從名字上就很好理解，這是一個(gè)異步的方法。
創(chuàng)建遠(yuǎn)程數(shù)據(jù)
在這里制作一些假的遠(yuǎn)程數(shù)據(jù)，我選擇的網(wǎng)站是myjson.com，它是一個(gè)json的簡(jiǎn)單倉(cāng)庫(kù)，學(xué)習(xí)使用是非常適合的。
我們打開(kāi)網(wǎng)站，在對(duì)話空中輸入JSON代碼，這個(gè)代碼可以自己隨意輸入哦。

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

輸入后，網(wǎng)站會(huì)給你一個(gè)地址，這就是你這個(gè)JSON倉(cāng)庫(kù)的地址了。

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

安裝Axios

Vue.js官方推薦使用的遠(yuǎn)程數(shù)據(jù)獲取方式
是Axios,所以我們安裝官方推薦的,來(lái)使用Axios,這里使用npm安裝或者yarn

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

ansycData的promise方法

我們?cè)趐ages下面新建一個(gè)文件，叫做ansyData.vue。
然后寫(xiě)入下面的代碼：

<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方法

當(dāng)然上面的方法稍顯過(guò)時(shí)，現(xiàn)在都在用ansyc…await來(lái)解決異步,改寫(xiě)上面的代碼.

<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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。