Nuxt ssr

Nuxt-ssr é um projeto SSR para adicionar, excluir, modificar e verificar artigos.

O projeto Nuxt.js é um projeto com uma estrutura SSR completa e é adequado para iniciantes praticarem. Se for útil para você, dê uma estrela no canto superior direito para incentivo e esperança de correções. Você também pode participar do grupo de intercâmbio técnico nuxt, onde todos podem aprender uns com os outros e crescer juntos.

Tecnologias utilizadas

Vue.js v2.0.0

Nuxt.js v1.0.0

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

Express.js v4.x

MongoDB v3.4.7

elemento-ui v2.3.2

Estrutura de diretório

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

Guia de desenvolvimento front-end

Primeiro você precisa instalar >=node8.0 porque nuxt1.0.0 deve ser instalado no ambiente >=node8.0 antes de poder ser instalado com sucesso.

Instale o element-ui. Há uma demonstração mais detalhada na página do método de instalação.

Instalação e uso do nuxt-quill-plugin, um editor de rich text.

(A ênfase é colocada no fato de que é impossível detectar a mesma interface no front-end e back-end local, portanto é diferente da porta back-end abaixo) O front-end monitora a porta 3389 e executa o comando "npm executa dev";

Guia de desenvolvimento de back-end

Baixe e instale o MongoDB. Não entrarei em detalhes aqui.

Instale o Express. Não entrarei em detalhes aqui.

Instale supervisor para monitoramento em tempo real, que pode ser feito globalmente ou apenas neste projeto. Método de instalação global: sudo npm install -g supervisor.

(É importante observar que, como a detecção local de front-end e back-end da mesma interface não pode ser implementada, ela é diferente da porta front-end acima) O back-end monitora a porta 3000. Você precisa fazer cd para o servidor diretório da pasta e execute o comando "supervisor listrouter.js";

Implantação do Alibaba Cloud

As etapas específicas de implantação não são explicadas em detalhes aqui. Consulte o tutorial detalhado para obter detalhes.

Construir e executar

 # 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 obter explicações detalhadas sobre como as coisas funcionam, verifique a documentação do Nuxt.js.