itcnz/nuxt-ssr

✨vue+nuxt+sass+node+express+MongoDB 实现的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.

nuxt-ssr's Issues

如果想后台管理页面的路由是127.0.0.1:3000/admin 改怎样设置呢？

默认的路由是app.use(nuxt.render)；

显示效果是127.0.0.1:3000

但我想要127.0.0.1:3000/admin

该怎么改？

app.use('/admin',nuxt.render) 使用这样的话会报 _nuxt/下的文件404

这该怎么设置呢？

你好， 配置axios报错。

连接不上服务器，求解决

DONE Compiled successfully in 63ms 16:32:55

OPEN http://localhost:3389

nuxt:render Rendering url / +0ms
nuxt:render Rendering url /login +397ms
当前服务器地址.... { url: { api: 'http://localhost:3000/api' }, env: 'localhost' }
nuxt:render Data fetching /login: 0ms +0ms

ERROR

Error: connect ECONNREFUSED 127.0.0.1:3000

• net.js:1191 TCPConnectWrap.afterConnect [as oncomplete]
  net.js:1191:14

我用npm install安装了依赖 然后用npm run dev运行 显示端口号是3389 但是api接口的端口号是3000 报错信息如上 虽然能正常显示登录页面 但是没办法登录进去 控制台报错信息如下
Failed to load resource: net::ERR_CONNECTION_REFUSED
E:\xampp\htdocs\mynuxt-master\node_modules_axios@0.16.2@axios\lib\core\createError.js:16 Uncaught (in promise) Error: Network Error
at createError (E:\xampp\htdocs\mynuxt-master\node_modules_axios@0.16.2@axios\lib\core\createError.js:16)
at XMLHttpRequest.handleError (E:\xampp\htdocs\mynuxt-master\node_modules_axios@0.16.2@axios\lib\adapters\xhr.js:87)

启动不了,求解决

F:\project\vue\mynuxt-master>npm run dev

[email protected] dev F:\project\vue\mynuxt-master
nuxt

nuxt:build App root: F:\project\vue\mynuxt-master +0ms
nuxt:build Generating F:\project\vue\mynuxt-master.nuxt files... +2ms
nuxt:build Generating files... +32ms
nuxt:build Generating routes... +10ms
nuxt:build Building files... +58ms
nuxt:build Adding webpack middleware... +2s
████████████████████ 100%

Build completed in 9.662s

DONE Compiled successfully in -1347ms 10:38:37

events.js:183
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 0.0.0.0:3389
at Object._errnoException (util.js:1022:11)
at _exceptionWithHostPort (util.js:1044:20)
at Server.setupListenHandle [as _listen2] (net.js:1351:14)
at listenInCluster (net.js:1392:12)
at doListen (net.js:1501:7)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ysjiao\AppData\Roaming\npm-cache_logs\2018-10-18T02_38_41_447Z-debug.log

关于nuxt.js大家有啥问题可以再次提问，各位同学一起解决

options['useConfigFile'] is an invalid additional property

Failed to compile with 6 errors, and all of them ocurred for the one reason what like this issue title said.

横纵向越权。。。

如何发布阿里云 上线的呢 咱们可以加一个微信群 一起讨论一下吗 包括一些技术问题的探讨等

如何发布阿里云 上线的呢 咱们可以加一个微信群 一起讨论一下吗 包括一些技术问题的探讨等
如何发布上线呢
您可以给我

axios异步请求数据用到了promise then，为啥不用 async/await