nuxtjs+express+vue2+vuex搭建的服務端渲染（SSR）個人網站專案

5se7en發表於2018-03-08
UXJSExpressVue服務端網站

5se7en.com

nuxtjs+express+vue2.0+vuex搭建的服務端渲染個人網站專案.

github專案地址: https://github.com/se7en-1992…
專案線上地址：https://5se7en.com/

注意事項

  • node>=v8.0.0+ (nuxt1.0.0以上版本的node版本號必須大於v8.0.0否則啟動的時候會報錯)
  • 若要測試遊戲登入請點選前往套馬遊戲註冊一個賬號

技術選型

這裡先說兩句題外話，談一談對前端開發產生了深遠影響的兩個時間點

  • ajax的出現，促成了Web 2.0時代的來臨
  • nodejs的出現，讓前端能做的更多，讓js不僅僅只是瀏覽器端的語言。

這裡為什麼要說這個呢，有些前端開發者會說node不是做後端的嗎？我為什麼要學nodejs呢？其實隨著前端的發展，尤其是node出現，前端發展日新月異，各種自動化工具，框架層出不窮。很多都是依賴node。node不僅僅只是用來拿來寫後端，可以這麼說，當前時間如果你對node毫無知曉，也不去學的話，那麼你已經被前端浪潮所覆蓋了。

  • 本專案用的是node中使用最多的express前端web框架，官網的demo是這麼形容的=> ExpressJS + Nuxt.js = ⚡️ 沒錯可以說是非常極速了，我的個人網站伺服器是阿里雲1核1g學生版機，網站除了第一次開啟稍微慢點，後面可以說得上是光速了。比我以前使用的任何框架都要極速。

  • 下面再談一下為什麼要使用服務端渲染和選用nuxtjs？

    • 知乎上有個論題大家可以看一看為什麼現在又流行服務端渲染html？，回答的人比較多，也比較雜，我這裡就簡單的總結一下

      • 服務端渲染，主要解決兩個痛點 SEO優化(一些新聞資訊類的網站都需要做一些搜尋引擎優化)和大型應用的首屏渲染(解決一些大型應用首頁載入速度問題)
      • 其實這又要談到歷史了，一開始html就是後端渲染的，前端實際上就是在切圖（CSS）和做特效(JS)，所以所有程式設計師中前端工資最低，職位也最低。所以前後端的鄙視鏈就出現了。
      • nodejs 和前端 mvc 的興起讓前端變得複雜起來，前端發現翻身的機會，於是全力支援這兩種技術，造成本不該做成 spa 的網站也成了 spa。慢慢地前後端分離運動從大公司開始興起，目的就是前端脫離後端的指指點點，獨立發展。（表面上是為了「程式碼分離」，實際上是為了「人員分離」，也就是「前後端分家」，前端不再附屬於後端團隊）
      • spa 之後發現 seo 問題很大，而且首屏渲染速度賊慢，但是自己選的路再難走也要走下去，於是用 nodejs 在服務端渲染這一條路被看成是一條出路
      • 簡而言之就是前端一開始騷不起來，後來node和MVC/MVVM（Vue,React,Angular）的出現前端開始騷起來了，搞獨立，把本應要做成服務端渲染的東西也做成了SPA，現在新技術又出來了，要及時發現錯誤，進行改正。前後端分離是趨勢，既然都分開了，總不能還讓後端去渲染，那我們們前端自己想辦法做服務端渲染吧，於是服務端渲染框架也就出現了。

    • 為什麼選用nuxtjs?

      • 一開始我用的服務端渲染是學習N-blog利用nodejs的express+ejs模版渲染做的，效果其實也還不錯，裡面的程式碼並沒有完全的元件化，我做的專案還使用的jQuery,這多low啊，那我怎麼能忍，我肯定要換個技術來玩。（這裡沒有貶低jQuery的意思，我覺得jQuery是個很不錯的JavaScript庫，曾經也可以說是一統前端了，包括現在，不會用jQuery的前端基本上沒幾個，但是怎麼說呢，jQuery在慢慢沉寂，操作dom在現在對比下來並不是一個最優的選擇了。）前端在不斷髮展，我們要做的就是選擇最優。
      • 在vue官網中也對nuxtjs做了強力的推薦，再加上nuxtjs的github上express模版demo介紹ExpressJS + Nuxt.js =⚡看到這個我就選了這個框架了。沒錯就是他了.
      • nuxtjs結合vue2、Webpack、vue-loader、babel-loader、vuex、Vue-Meta
      • 不需要在配置繁瑣的webpack配置,vue-loader自動生成路由，只需要在pages目錄下建立檔案就是自動生成對應的路由檔案

開發環境

  • Node.js: ^8.9.4
  • express: ^4.16.2
  • nuxtjs: ^1.0.0-rc11
  • vue: ^2.5.3 
npm install
npm run dev

使用瀏覽器開啟 http://localhost:5757

友情提示

nuxt介紹

  • nuxt詳細的入門教程這裡不做詳細的介紹，官方文件講解的已經非常詳細了。這裡簡單介紹一下專案目錄作用

nuxt目錄介紹

  • assets

    • 如果你的靜態資原始檔需要 Webpack 做構建編譯處理，可以放到 assets 目錄，否則可以放到 static 目錄中去。
    • Nuxt 伺服器啟動的時候，該目錄下的檔案會對映至應用的根路徑 / 下，像 robots.txt 或 sitemap.xml 這種型別的檔案就很適合放到 static 目錄中。

  • components

    • 元件目錄 components 用於組織應用的 Vue.js 元件。Nuxt.js 不會擴充套件增強該目錄下 Vue.js 元件，即這些元件不會像頁面元件那樣有 asyncData 方法的特性。
簡而言之此目錄就是普通的vue元件目錄。

  • layouts

    • 該目錄名為Nuxt.js保留的，不可更改。
    • 你可以自定義合適自己網站的預設樣式和錯誤樣式

  • middleware

    • 中介軟體執行流程順序：

      • nuxt.config.js
      • 匹配佈局
      • 匹配頁面

  • pages

    • 該目錄名為Nuxt.js保留的，不可更改。
    • 頁面目錄 pages 用於組織應用的路由及檢視。Nuxt.js 框架讀取該目錄下所有的 .vue 檔案並自動生成對應的路由配置。
    • 此頁面的.vue檔案都具有asyncData、fech方法。

  • plugins

    • 外掛目錄 plugins 用於組織那些需要在 根vue.js應用 例項化之前需要執行的 Javascript 外掛。
    • 我們可以將element-ui或者mint-ui以及其他更多的外掛都可以放在plugins中使用

  • static

    • 該目錄名為Nuxt.js保留的，不可更改。
    • 靜態檔案目錄 static 用於存放應用的靜態檔案，此類檔案不會被 Nuxt.js 呼叫 Webpack 進行構建編譯處理。 伺服器啟動的時候，該目錄下的檔案會對映至應用的根路徑 / 下。

  • store

    • 該目錄名為Nuxt.js保留的，不可更改。
    • store 目錄用於組織應用的 Vuex 狀態樹 檔案。 Nuxt.js 框架整合了 Vuex 狀態樹 的相關功能配置，在 store 目錄下建立一個 index.js 檔案可啟用這些配置。

nuxt配置介紹

  • config

    • 此目錄並不是nuxt自身目錄而是一些專案經驗促使我新增此目錄從來更加方便的去管理和使用在專案中所需要的變數。
    • NEWRELIC_KEY:newrelic的金鑰，newrelic是伺服器端效能監控的一款軟體
    • TIMBER_KEY:timber的金鑰，timber是一種雲日誌記錄系統，簡單的來說就是紀錄線上的一些日誌
    • SENTRY_PROJECT_ID/SENTRY_PUBLIC_KEY/SENTRY_PRIVATE_KEY:Sentry的專案id,公鑰,私鑰，Sentry是一個開源的實時錯誤報告工具
    • porductionProxy/developmentProxy: 是nuxt的axios模組代理請求的路徑設定
    • 其實我在專案啟動的時候還使用了pm2有express專案經驗的人用過都說好，有日誌記錄狀態監控等，真的很好用。
  • nuxt.config.js

  • .editorconfig

    • EditorConfig是一套用於統一程式碼格式的解決方案

  • .eslintrc.js

    • ESLint是一個應用廣泛的 JavaScript 程式碼檢查工具

  • gitignore

    • git提交忽略項配置檔案

  • newrelic.js

    • newrelic配置檔案

  • start.js

    • express啟動入口檔案，開發環境直接使用nuxt啟動並沒有走start.js，生產環境用pm2啟動的該檔案

相關文章