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

sunsmeil發表於2017-11-09
Vue服務端

為什麼使用服務端渲染

  • 更好的 SEO，由於搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。

    元件化開發、前後端分離思想貫穿在現今前端開發中。使用vue(SPA)確實極大的優化我們的開發體驗和產品效能。但是對於網站這種需要搜尋引擎爬取（seo），增加瀏覽量、增加權重的專案。SPA是不利於爬蟲抓取專案（因為在爬蟲抓完之後，js才載入，dom才渲染）。

  • 更快的內容到達時間(time-to-content)，特別是對於緩慢的網路情況或執行緩慢的裝置。

    不用等待所有js下載完畢並執行，才開始伺服器渲染。因此會獲得更好的使用者體驗。

使用技術棧

  • vue
  • nuxt（官網提供框架。 後文會針對提供一些區分和注意點）
  • express
  • axios(vue-resorce停止更新，官網推薦資料互動中介軟體)

如果感覺是很多不熟悉的名詞，不要感到很困難，可以通過引入一個基本的小專案上手練習。慢慢就都吸收了。後文提供專案地址，以及分析。

如果熟悉自行跳過。看專案初始

技術棧相關文件推薦

必看文件。讀一遍後，查詢即可。

瞭解文章。讀一遍

初始專案引入

直接使用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特有的語法即可。

注意事項

  • pages目錄結構和命名方式：
    • 動態資料：例如點選不同列表內容進入詳情頁，需要在命名上進行區分。例如圖中_id.vue。
    • 子路由： 例如theme.vue 需要同名資料夾theme 其中在進行子路由即可。
    • 如果想看具體的結構，可以執行 npm run build在生成的資料夾.nuxt 檢視生成router檔案的具體情況，進行調整
  • 使用axios 可以去看下es6的Promise Generator async。 www.ruanyifeng.com/blog/2015/0…
  • 最後，歡迎開啟新世界的大門。

相關文章