Nuxt ssr

Nuxt-ssr是一個文章增刪改查的SSR項目

Nuxt.js該項目是一個ssr結構完整的項目，適合新人練手使用，如果對您有幫助，請右上角給個star，鼓勵一下，同時希望指正。也可以加nuxt技術交流群，大家一起互相學習，互相成長。

用到的技術

Vue.js v2.0.0

Nuxt.js v1.0.0

Node.js v9.8.0 (必須>=8.0)

Express.js v4.x

MongoDB v3.4.7

element-ui v2.3.2

目錄結構

 ├── assets                              资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
├── build                               打包后的文件
├── components                          存放组件，用于组织应用的 Vue.js 组件
│   ├── Footer                          页面footer组件
│   ├── ....
├── layouts                             布局模板文件，默认default，通过为页面设置layout更改
│   ├── edit                            编辑/创建文章模板
│   ├── ....
├── middleware                          存放应用的中间件
│   ├── auth.js                         路由是否登录拦截
│   ├── ...
├── 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                                存放一些工具文件（自己添加）
│   ├── net.js                          封装网络请求
│   ├── ui.js                           封装ui弹框配置
│   ├── ...

前端開發指南

首先要安裝>=node8.0 因為nuxt1.0.0 必須在>=node8.0的環境下才可以安裝成功

安裝element-ui, 安裝方法頁面這個頁面下面有比較詳細的demo,可參考

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

（劃重點，因為本地前後端檢測同一個介面無法實現，所以與下面的後端端口不同）前端監控的是3389端口,執行命令"npm run dev";

後端開髮指南

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

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

安裝supervisor 即時監控，可以進行全局，也可只安裝在本專案中。全域安裝方法：sudo npm install -g supervisor.

（劃重點，因為本地前後端檢測同一個介面無法實現，所以與上面的前端連接埠不同）後端監控的是3000埠, 需要,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.