Nuxt ssr

Nuxt-ssr is an SSR project for adding, deleting, modifying and checking articles.

The Nuxt.js project is a project with a complete SSR structure and is suitable for newbies to practice. If it is helpful to you, please give a star in the upper right corner for encouragement and hope for corrections. You can also join the nuxt technical exchange group, where everyone can learn from each other and grow together.

Technologies used

Vue.js v2.0.0

Nuxt.js v1.0.0

Node.js v9.8.0 (must>=8.0)

Express.js v4.x

MongoDB v3.4.7

element-ui v2.3.2

Directory structure

 ├── 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弹框配置
│   ├── ...

Front-end Development Guide

First you need to install >=node8.0 because nuxt1.0.0 must be installed in >=node8.0 environment before it can be successfully installed.

Install element-ui. There is a more detailed demo on the installation method page. You can refer to it.

Installation and use of rich text editor nuxt-quill-plugin nuxt-quill-plugin.

(Emphasis is placed on the fact that it is impossible to detect the same interface in the local front-end and back-end, so it is different from the back-end port below) The front-end monitors port 3389 and executes the command "npm run dev";

Backend Development Guide

Download and install MongoDB. I won’t go into details here. Here is the link to MongoDB.

Install Express. I won’t go into details here. Here is the link to Express.

Install supervisor for real-time monitoring, which can be done globally or only in this project. Global installation method: sudo npm install -g supervisor.

(Emphasis is placed on the fact that local front-end and back-end detection of the same interface cannot be implemented, so it is different from the front-end port above) The back-end monitors port 3000. You need to cd to the server folder directory and execute the command "supervisor listrouter.js";

Alibaba Cloud deployment

The specific deployment steps are not explained in detail here. Please refer to the detailed tutorial for details.

Build and run

 # 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.