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.