SEO 工作的目的：
seo 的工作目的是為了讓網(wǎng)站更利于讓各大搜索引擎抓取和收錄，增加產(chǎn)品的曝光率。
前言
Nuxt 是 Vue 上的 SSR，也就是服務(wù)端渲染應(yīng)用框架，可在很大程度上解決當(dāng)前 SPA 和 CSR 的首頁加載慢，不利于 SEO 的問題。
簡單的說Nuxt.js是Vue.js的通用框架，最常用的就是用來作SSR（服務(wù)器端渲染）。再直白點說，就是Vue.js原來是開發(fā)SPA（單頁應(yīng)用）的，但是隨著技術(shù)的普及，很多人想用Vue開發(fā)多頁應(yīng)用，并在服務(wù)端完成渲染。這時候就出現(xiàn)了Nuxt.js這個框架，她簡化了SSR的開發(fā)難度。還可以直接用命令把我們制作的vue項目生成為靜態(tài)html
什么是SSR？
SSR，即服務(wù)器渲染，就是在服務(wù)器端將對Vue頁面進行渲染生成html文件，將html頁面?zhèn)鬟f給瀏覽器。
SSR兩個優(yōu)點：
- SEO 不同于SPA的HTML只有一個無實際內(nèi)容的HTML和一個app.js，SSR生成的HTML是有內(nèi)容的，這讓搜索引擎能夠索引到頁面內(nèi)容。
- 更快內(nèi)容到達時間 傳統(tǒng)的SPA應(yīng)用是將bundle.js從服務(wù)器獲取，然后在客戶端解析并掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。
Nuxt.js的官方網(wǎng)站是這樣介紹的：
NuxtJS 讓你構(gòu)建你的下一個 Vue.js 應(yīng)用程序變得更有信心。這是一個 開源 的框架，讓 web 開發(fā)變得簡單而強大。
Nuxt.js是特點（優(yōu)點）：
- 基于 Vue.js
- 自動代碼分層
- 服務(wù)端渲染
- 強大的路由功能，支持異步數(shù)據(jù)
- 靜態(tài)文件服務(wù)
- ES6/ES7 語法支持
- 打包和壓縮 JS 和 CSS
- HTML頭部標(biāo)簽管理
- 本地開發(fā)支持熱加載
- 集成ESLint
- 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等
1. Nuxt環(huán)境搭建和Hello World
Nuxt.js 十分簡單易用。一個簡單的項目只需將 nuxt 添加為依賴組件即可。
為了快速入門，Nuxt.js 團隊創(chuàng)建了腳手架工具 create-nuxt-app（確保安裝了 npx（npx 在 NPM 版本 5.2.0 默認安裝了））。
npx create-nuxt-app nuxtdmo
現(xiàn)在運行在 http://localhost:3000 上運行
Nuxt自動生成了項目目錄，如下：。
|-- .nuxt // Nuxt自動生成，臨時的用于編輯的文件，build
|-- assets // 用于組織未編譯的靜態(tài)資源入LESS、SASS 或 JavaScript
|-- components // 用于自己編寫的Vue組件，比如滾動組件，日歷組件，分頁組件
|-- layouts // 布局目錄，用于組織應(yīng)用的布局組件，不可更改。
|-- middleware // 用于存放中間件
|-- pages // 用于存放寫的頁面，我們主要的工作區(qū)域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放靜態(tài)資源文件，比如圖片
|-- store // 用于組織應(yīng)用的Vuex 狀態(tài)管理。
|-- .editorconfig // 開發(fā)工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用于組織Nuxt.js應(yīng)用的個性化配置，已覆蓋默認配置
|-- package-lock.json // npm自動生成，用于幫助package的統(tǒng)一性設(shè)置的，yarn也有相同的操作
|-- package-lock.json // npm自動生成，用于幫助package的統(tǒng)一性設(shè)置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
2.Nuxt常用配置項
配置IP和端口
開發(fā)中經(jīng)常會遇到端口被占用或者指定IP的情況。我們需要在根目錄下的package.json里對config項進行配置。比如現(xiàn)在我們想把IP配置成127.0.0.1，端口設(shè)置1818。
//package.json
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818"
}
},
配置好后，我們在終端中輸入npm run dev，然后你會看到服務(wù)地址改為了127.0.0.1:1818.
配置全局CSS
在開發(fā)多頁項目時，都會定義一個全局的CSS來初始化我們的頁面渲染，比如把padding和margin設(shè)置成0，網(wǎng)上也有非常出名的開源css文件normailze.css。要定義這些配置，需要在nuxt.config.js里進行操作。
比如現(xiàn)在我們要把頁面字體設(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 。然后你會發(fā)現(xiàn)字體已經(jīng)變成了紅色。
配置webpack的loader
在nuxt.config.js里是可以對webpack的基本配置進行覆蓋的，比如現(xiàn)在我們要配置一個url-loader來進行小圖片的64位打包。就可以在nuxt.config.js的build選項里進行配置
build: {
loaders:[
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:"url-loader",
query:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
3.Nuxt路由
Nuxt的路由配置
簡單demo
在about文件夾下新建index.vue文件，并寫入下面的代碼：
<template>
<div>
<h2>About Index page</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
在news文件夾下新建index.vue文件，并寫入下面的代碼：
<template>
<div>
<h2>News Index page</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
修改原來的pages文件夾下的index.vue，刪除沒用的代碼，寫入下面代碼：
<template>
<div>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about">ABOUT</a></li>
<li><a href="/news">NEWS</a></li>
</ul>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style>
</style>
你現(xiàn)在你打開瀏覽器，發(fā)現(xiàn)都已經(jīng)ok了，不需要你單獨配置路由，因為Nuxt.js都為我們作好了，不用寫任何配置代碼。
雖然上面的例子跳轉(zhuǎn)已經(jīng)成功，但是Nuxt.js并不推薦這<a>標(biāo)簽的作法，它為我們準備了<nuxt-link>標(biāo)簽（vue中叫組件）。我們先把首頁的<a>標(biāo)簽替換成<nuxt-link>
<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>
我們再次預(yù)覽頁面，也是可以進行正常跳轉(zhuǎn)的，在實際開發(fā)中盡量使用標(biāo)簽的方法跳轉(zhuǎn)路由。
params傳遞參數(shù)
路由經(jīng)常需要傳遞參數(shù)，我們可以簡單的使用params來進行傳遞參數(shù)，我們現(xiàn)在向新聞頁面（news）傳遞個參數(shù)，然后在新聞頁面進行簡單的接收。
我們先修改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進行接收，代碼如下:
<template>
<div>
<h2>News Index page</h2>
<p>NewsID:{{$route.params.newsId}}</p>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
動態(tài)路由
新聞詳細頁面： 我在news文件夾下面新建了_id.vue的文件，以下畫線為前綴的Vue文件就是動態(tài)路由，然后在文件里邊有 $route.params.id來接收參數(shù)。
<!--/pages/news/_id.vue-->
<template>
<div>
<h2>News-Content [{{$route.params.id}}]</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
修改新聞首頁路由:
<!--/pages/news/index.vue-->
<template>
<div>
<h2>News Index page</h2>
<p>NewsID:{{$route.params.newsId}}</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/news/123">News-1</a></li>
<li><a href="/news/456">News-2</a></li>
</ul>
</div>
</template>
代碼寫好后，打開npm run dev 進行查看，我們已經(jīng)進入了新聞詳細頁，并在詳細頁中取得了傳遞過來的新聞ID.
動態(tài)參數(shù)校驗
進入一個頁面，對參數(shù)傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate( )。
<!--/pages/news/_id.vue-->
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}
我們使用了validate方法，并把params傳遞進去，然后用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面。
4. Nuxt的默認模版和默認布局
默認模板
Nuxt為我們提供了超簡單的默認模版訂制方法，只要在根目錄下創(chuàng)建一個app.html就可以實現(xiàn)了。現(xiàn)在我們希望每個頁面的最上邊都加入“Hollo Word” 這幾個字，我們就可以使用默認模版來完成。
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>Hollo Word/p>
{{ APP }}
</body>
這里的{{ HEAD }}讀取的是nuxt.config.js里的信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面了。需要注意的是HEAD和APP都需要大寫，如果小寫會報錯的。
這里還有一個小坑需要大家注意，就是如果你建立了默認模板后，記得要重啟服務(wù)器，否則你的顯示不會成功；但是默認布局是不用重啟服務(wù)器。
默認布局
和默認模板類似的功能還有默認布局，但是從名字上你就可以看出來，默認布局主要針對于頁面的統(tǒng)一布局使用。它在位置根目錄下的layouts/default.vue。需要注意的是在默認布局里不要加入頭部信息，只是關(guān)于<template>標(biāo)簽下的內(nèi)容統(tǒng)一訂制。
需求，我們在每個頁面的最頂部放入“我是默認布局 ”這幾個字，看一下在默認布局里的實現(xiàn)。
<!--/layouts/default.vue-->
<template>
<div>
<p>我是默認布局</p>
<nuxt/>
</div>
</template>
這里的<nuxt/>就相當(dāng)于我們每個頁面的內(nèi)容，你也可以把一些通用樣式放入這個默認布局里，但是個人不建議這樣寫，會增加頁面的復(fù)雜程度。
總結(jié)：要區(qū)分默認模版和默認布局的區(qū)別，模版可以訂制很多頭部信息，包括IE版本的判斷；模版只能定制<template>里的內(nèi)容，跟布局有關(guān)系。在工作中修改時要看情況來編寫代碼
5.Nuxt的錯誤頁面和個性meta設(shè)置
建立錯誤頁面
在根目錄下的layouts文件夾下建立一個error.vue文件，它相當(dāng)于一個顯示應(yīng)用錯誤的組件。
<!--/layouts/error.vue--->
<template>
<div>
<h2 v-if="error.statusCode==404">404頁面不存在</h2>
<h2 v-else>500服務(wù)器錯誤</h2>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:['error'],
}
</script>
代碼用v-if進行判斷錯誤類型，需要注意的是這個錯誤是你需要在<script>里進行聲明的，如果不聲明程序是找不到error.statusCode的。
個性meta設(shè)置
頁面的Meta對于SEO的設(shè)置非常重要，比如你現(xiàn)在要作個新聞頁面，那為了搜索引擎對新聞的收錄，需要每個頁面對新聞都有不同的title和meta設(shè)置。直接使用head方法來設(shè)置當(dāng)前頁面的頭部信息就可以了。我們現(xiàn)在要把New-1這個頁面設(shè)置成個性的meta和title。
1.我們先把pages/news/index.vue頁面的鏈接進行修改一下，傳入一個title，目的是為了在新聞具體頁面進行接收title，形成文章的標(biāo)題。
<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'jspang.com'}}">News-1</nuxt-link></li>
2.第一步完成后，我們修改/pages/news/_id.vue，讓它根據(jù)傳遞值變成獨特的meta和title標(biāo)簽。
<template>
<div>
<h2>News-Content [{{$route.params.id}}]</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
<script>
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
},
data(){
return{
title:this.$route.params.title,
}
},
//獨立設(shè)置head信息
head(){
return{
title:this.title,
meta:[
{hid:'description',name:'news',content:'This is news page'}
]
}
}
}
</script>
注意：為了避免子組件中的meta標(biāo)簽不能正確覆蓋父組件中相同的標(biāo)簽而產(chǎn)生重復(fù)的現(xiàn)象，建議利用 hid 鍵為meta標(biāo)簽配一個唯一的標(biāo)識編號。
6.靜態(tài)資源和打包
直接引入圖片
我們在網(wǎng)上任意下載一個圖片，放到項目中的static文件夾下面，然后可以使用下面的引入方法進行引用.
<div><img src="~static/logo.png" /></div>
這種引用方法是不用估計相對路徑的，“~”就相當(dāng)于定位到了項目跟目錄，這時候你的圖片路徑就不會出現(xiàn)錯誤，就算打包也是正常的。
CSS引入圖片
如果在CSS中引入圖片，方法和html中直接引入是一樣的，也是用“~”符號引入。
<style>
.diss{
width: 300px;
height: 100px;
background-image: url('~static/logo.png')
}
</style>
這時候在npm run dev 下是完全正常的，那我們看一下打包。
打包靜態(tài)HTML并運行
用Nuxt.js制作完成后，你可以打包成靜態(tài)文件并放在服務(wù)器上，進行運行。
在終端中輸入：
npm run generate
本地驗證：
在dist文件夾下輸入live-server就可以了。
