nuxtjs+express+vue2+vuex搭建的服務端渲染（SSR）我的網站項目

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結合vue二、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

友情提示

• N-blog(一個不錯的Nodejs + Express + MongoDB入門項目)
• vue2.0官網文檔
• nuxtjs官方文檔
• vue2-elm(一個不錯的vue2.0我的項目)
• nuxtjs.org

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啓動的該文件