vue 服務端渲染 入門學習和注意事項（內含推薦文檔）

爲何使用服務端渲染

• 更好的 SEO，因爲搜索引擎爬蟲抓取工具能夠直接查看徹底渲染的頁面。

組件化開發、先後端分離思想貫穿在現今前端開發中。使用vue(SPA)確實極大的優化咱們的開發體驗和產品性能。可是對於網站這種須要搜索引擎爬取（seo），增長瀏覽量、增長權重的項目。SPA是不利於爬蟲抓取項目（由於在爬蟲抓完以後，js才加載，dom才渲染）。

• 更快的內容到達時間(time-to-content)，特別是對於緩慢的網絡狀況或運行緩慢的設備。

不用等待全部js下載完畢並執行，纔開始服務器渲染。所以會得到更好的用戶體驗。

使用技術棧

• vue

• nuxt（官網提供框架。 後文會針對提供一些區分和注意點）

• express

• axios(vue-resorce中止更新，官網推薦數據交互中間件)

若是感受是不少不熟悉的名詞，不要感到很困難，能夠經過引入一個基本的小項目上手練習。慢慢就都吸取了。後文提供項目地址，以及分析。

若是熟悉自行跳過。看項目初始

技術棧相關文檔推薦

必看文檔。讀一遍後，查找便可。

• vue 官方2.0中文文檔：https://cn.vuejs.org/v2/guide/

• nuxt 中文api文檔 ：https://zh.nuxtjs.org/api

• express 中文api文檔： http://expressjs.jser.us/3x_z...

---

瞭解文章。讀一遍

• 前端seo知識：

  • http://imweb.io/topic/5682938... (前端寫頁面注意)

  • https://www.rapospectre.com/b... （詳細分析）

初始項目引入

直接使用vue init引入

vue init nuxt-community/express-template <project-name>
cd <project-name> # 移動到項目目錄
npm install # or yarn install

項目運行

$ npm install # Or yarn install

# 服務熱加載在 localhost:3000
$ npm run dev # server下的index能夠改變端口

# 正式構建
$ npm start

項目結構分析

建議同時與nuxt文檔一塊兒，使用更佳。

nuxt分析(重點)

• 例如： assets、components、eslintrc.js、package.json、yarn.lock和咱們正常使用vue是相同的。

• 咱們只須要針對的學習一些nuxt特有的語法便可。

  • layouts(佈局文件)

    • 爲頁面指定使用哪個佈局文件

  • pages（頁面文件、路由根據文件生成）https://zh.nuxtjs.org/api/com...

  • asyncData 方法使得你可以在渲染組件以前異步獲取數據。https://zh.nuxtjs.org/api/

  • head 設置當前頁面的頭部標籤。https://zh.nuxtjs.org/api/pag...

注意事項

• pages目錄結構和命名方式：

  • 動態數據：例如點擊不一樣列表內容進入詳情頁，須要在命名上進行區分。例如圖中_id.vue。

  • 子路由： 例如theme.vue 須要同名文件夾theme 其中在進行子路由便可。

  • 若是想看具體的結構，能夠運行 npm run build在生成的文件夾.nuxt 查看生成router文件的具體狀況，進行調整

• 使用axios 能夠去看下es6的Promise Generator async。 http://www.ruanyifeng.com/blo...

• 最後，歡迎打開新世界的大門。