vue+nuxt+scss+node+express+MongoDB 實現的ssr文章發佈系統

mynuxt是一個文章增刪改查系統

由於目前的spa單頁項目對seo很不友好，若是你但願本身的網站在seo這塊有較好的支持，能夠嘗試一下SSR技術，nuxt.js就是專門針對vue這一問題實現的技術，所以這一次我就嘗試寫了一個項目，主要實現的一個簡單的文章的增刪改查系統，主要爲實現nuxt集合node實現ssr功能。

新人能夠學習下github.com/ITCNZ/mynux… （若是以爲還不錯請給個✨✨✨star星星吧✨✨✨） 也能夠加 nuxt技術交流羣：羣號:320243648 也能夠來我的博客，討論交流：itcnz.top

用到的技術

Vue2.0

Nuxt1.0

Node9.8 (必須>=8.0)

Express

MongoDB

目錄結構

├── assets                              資源目錄 assets 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript
├── build                               打包後的文件
├── components                          存放組件，用於組織應用的 Vue.js 組件
│   ├── Footer                          頁面footer組件
│   ├── ....
├── layouts                             佈局模板文件，默認default，經過爲頁面設置layout更改
│   ├── edit                            編輯/建立文章模板
│   ├── ....
├── middleware                          存放應用的中間件
├── node_modules                        Node依賴文件
├── nuxt.config.js                      Nuxt主配置文件
├── pages                               存放頁面的目錄
│   ├── index.vue                       首頁
│   ├── ....
├── plugins                             存放插件，用於組織那些須要在 根vue.js應用 實例化以前須要運行的 Javascript 插件
│   └── nuxt-quill-plugin.js            富文本編輯器插件
├── README.md                           README
├── server                              express後臺目錄
│   ├── api.js                          server端接口
│   ├── db.js                           鏈接MongoDB數據庫文件
│   ├── listrouter.js                   server啓動配置
│   ├── ....
├── static                              靜態文件目錄,此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啓動的時候，該目錄下的文件會映射至應用的根路徑 / 下
└── util                                存放一些工具文件（本身添加）
複製代碼

前端開發指南

首先須要安裝 >=node8.0 由於nuxt1.0.0 必須在>=node8.0的環境下才能夠安裝成功

富文本編輯器nuxt-quill-plugin的安裝與使用 nuxt-quill-plugin

前端監控的是3000端口 ,執行命令 "npm run dev";

後端開發指南

下載安裝MongoDB, 具體詳情不在此贅述,給上連接 MongoDB.

安裝Express, 具體詳情不在此贅述,給上連接 Express

後端監控的是3333端口, 須要,cd 到 server文件夾目錄下,執行命令 "supervisor listrouter.js";

構建與運行

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate
複製代碼

For detailed explanation on how things work, checkout the Nuxt.js docs.