對(duì)于React椭更，Vue構(gòu)建的單頁面應(yīng)用老說哪审，SEO是一個(gè)眾所周知的問題。服務(wù)端渲染(SSR-server Side Render)是目前看來最好的解決辦法甜孤。React應(yīng)用有Next.js协饲，對(duì)應(yīng)Vue的解決方案就是Nuxt.js。
1.簡介
官網(wǎng)：https://nuxtjs.org/
GitHub：https://github.com/nuxt/nuxt.js
2.構(gòu)建第一個(gè)Nuxt.js項(xiàng)目
推薦使用Nuxt提供的模板缴川。假設(shè)你已經(jīng)安裝了vue-cli茉稠，如果沒有安裝請先執(zhí)行npm install vue-cli -g來安裝vue-cli。
$ vue init nuxt-community/starter-template <project-name>
進(jìn)入到項(xiàng)目文件夾中安裝依賴包把夸。
cd <project-name>
npm install
啟動(dòng)項(xiàng)目而线。
npm run dev
打開瀏覽器，訪問http://localhost:3000恋日。就能看到Next渲染出來的頁面了膀篮。
3.添加頁面
新建完成的項(xiàng)目結(jié)構(gòu)如下圖所示：
Nuxt約定所有頁面都放在pages文件夾下，Nuxt會(huì)根據(jù)目錄結(jié)構(gòu)自動(dòng)生成對(duì)應(yīng)的路由岂膳。
現(xiàn)在在pages下新建Vue文件test.vue誓竿，訪問http://localhost:3000/test
即可看到剛剛添加的頁面。
4.引入第三方插件
通常情況下我們都需要引入第三方的插件谈截，比如前段組件筷屡，日志等涧偷。
第一步當(dāng)然是安裝插件，此處以element-UI為例毙死。
npm install element-ui
雖然下載了element-ui的包但是卻不能像普通項(xiàng)目那樣直接在Vue實(shí)例中import然后使用燎潮。Nuxt的內(nèi)核項(xiàng)目都在.nuxt目錄下，如果修改這下面的文件是不會(huì)生效的扼倘。因?yàn)槊看尉幾g都會(huì)重新生成文件确封，所以直接修改該項(xiàng)目文件是無效的。
雖然不能直接修改再菊，但是Nuxt提供了特殊的方式引入第三方插件爪喘。
第一步，在pulgin文件夾下新建js文件element-ui.js袄简。文件內(nèi)容如下腥放。
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
第二步泛啸，修改nuxt.config.js绿语。添加plugins屬性。
/**
* include third-party plugin
*/
plugins: ['~plugins/element-ui'] // element-ui.js文件地址
重新編譯之后候址，Nuxt會(huì)編譯該第三方插件并使用吕粹。此時(shí)在任何一個(gè)Vue文件中都能使用該第三方插件。
5.靜態(tài)資源文件
你可以把靜態(tài)資源文件放到static文件夾下岗仑，然后就可以使用http://localhost:3000/<文件名>來訪問靜態(tài)資源文件匹耕。
Nuxt提供的功能還有很多，比如動(dòng)態(tài)路由荠雕，ESLint代碼檢測稳其。今天先介紹到這里，其他深入的用飯請參考官方網(wǎng)站炸卑。
如有理解不正確的地方既鞠，歡迎指正~~
