mynuxt是一個文章增刪改查系統
因為目前的spa單頁專案對seo很不友好，如果你希望自己的網站在seo這塊有較好的支援，可以嘗試一下SSR技術，nuxt.js就是專門針對vue這一問題實現的技術，因此這一次我就嘗試寫了一個專案，主要實現的一個簡單的文章的增刪改查系統，主要為實現nuxt集合node實現ssr功能。
新人可以學習下github.com/ITCNZ/mynux… （如果覺得還不錯請給個✨✨✨star星星吧✨✨✨）
也可以加 nuxt技術交流群：群號:320243648
也可以來個人部落格，討論交流：itcnz.github.io
用到的技術
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.