Nuxt ssr

Nuxt-ssr es un proyecto SSR para agregar, eliminar, modificar y verificar artículos.

El proyecto Nuxt.js es un proyecto con una estructura SSR completa y es adecuado para que practiquen los principiantes. Si le resulta útil, coloque una estrella en la esquina superior derecha para animarlo y esperar correcciones. También puedes unirte al grupo de intercambio técnico de Nuxt, donde todos pueden aprender unos de otros y crecer juntos.

Tecnologías utilizadas

Vue.js v2.0.0

Nuxt.js v1.0.0

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

Express.js v4.x

MongoDB v3.4.7

elemento-ui v2.3.2

Estructura del directorio

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

Guía de desarrollo front-end

Primero necesita instalar >=node8.0 porque nuxt1.0.0 debe instalarse en el entorno >=node8.0 antes de poder instalarlo correctamente.

Instale element-ui. Hay una demostración más detallada en la página del método de instalación. Puede consultarla.

Instalación y uso de nuxt-quill-plugin, un editor de texto enriquecido.

(Se pone énfasis en el hecho de que es imposible detectar la misma interfaz en el front-end y back-end local, por lo que es diferente del puerto de back-end a continuación) El front-end monitorea el puerto 3389 y ejecuta el comando "npm ejecutar dev";

Guía de desarrollo de backend

Descargue e instale MongoDB. No entraré en detalles aquí. Aquí está el enlace a MongoDB.

Instale Express. No entraré en detalles aquí. Aquí está el enlace a Express.

Instalar supervisor para monitoreo en tiempo real, que se puede realizar globalmente o solo en este proyecto. Método de instalación global: sudo npm install -g supervisor.

(Es importante tener en cuenta que debido a que no se puede implementar la detección local de front-end y back-end de la misma interfaz, es diferente del puerto de front-end anterior). El back-end monitorea el puerto 3000. Debe enviar un CD al servidor. directorio de carpetas y ejecute el comando "supervisor listrouter.js";

Implementación de la nube de Alibaba

Los pasos de implementación específicos no se explican en detalle aquí. Consulte el tutorial detallado para obtener más detalles.

Construir y ejecutar

 # 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

Para obtener una explicación detallada sobre cómo funcionan las cosas, consulte los documentos de Nuxt.js.