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

爲何使用服務端渲染

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

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

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

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

使用技術棧

• vue
• nuxt（官網提供框架。 後文會針對提供一些區分和注意點）
• express
• axios(vue-resorce中止更新，官網推薦數據交互中間件)

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

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

技術棧相關文檔推薦

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

• vue 官方2.0中文文檔：cn.vuejs.org/v2/guide/
• nuxt 中文api文檔 ：zh.nuxtjs.org/api
• express 中文api文檔： expressjs.jser.us/3x_zh-cn/ap…

---

瞭解文章。讀一遍

• 前端seo知識：
  • imweb.io/topic/56829… (前端寫頁面注意)
  • www.rapospectre.com/blog/38 （詳細分析）

初始項目引入

直接使用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（頁面文件、路由根據文件生成）zh.nuxtjs.org/api/compone…
  • asyncData 方法使得你可以在渲染組件以前異步獲取數據。zh.nuxtjs.org/api/
  • head 設置當前頁面的頭部標籤。zh.nuxtjs.org/api/pages-h…

注意事項

• pages目錄結構和命名方式：
  • 動態數據：例如點擊不一樣列表內容進入詳情頁，須要在命名上進行區分。例如圖中_id.vue。
  • 子路由： 例如theme.vue 須要同名文件夾theme 其中在進行子路由便可。
  • 若是想看具體的結構，能夠運行 npm run build在生成的文件夾.nuxt 查看生成router文件的具體狀況，進行調整
• 使用axios 能夠去看下es6的Promise Generator async。 www.ruanyifeng.com/blog/2015/0…
• 最後，歡迎打開新世界的大門。