Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itcnz/nuxt-ssr
✨vue+nuxt+sass+node+express+MongoDB 实现的SSR项目。
https://github.com/itcnz/nuxt-ssr
axios element-ui express mongodb nodejs nuxt-quill-plugin nuxtjs sass ssr vuejs vuex
Last synced: 7 days ago
JSON representation
✨vue+nuxt+sass+node+express+MongoDB 实现的SSR项目。
- Host: GitHub
- URL: https://github.com/itcnz/nuxt-ssr
- Owner: ITCNZ
- Created: 2018-03-13T11:13:03.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:50:18.000Z (almost 2 years ago)
- Last Synced: 2024-12-16T06:04:23.382Z (7 days ago)
- Topics: axios, element-ui, express, mongodb, nodejs, nuxt-quill-plugin, nuxtjs, sass, ssr, vuejs, vuex
- Language: JavaScript
- Homepage: https://itcnz.github.io/20180320/mynuxt.html
- Size: 2.57 MB
- Stars: 347
- Watchers: 9
- Forks: 71
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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, 安装方法页面[这个页面](http://element.eleme.io/#/zh-CN/component/quickstart)下面有比较详细的demo,可参考
> 富文本编辑器nuxt-quill-plugin的安装与使用 [nuxt-quill-plugin](https://github.com/surmon-china/vue-quill-editor).
> （划重点，因为本地前后端检测同一个接口无法实现，所以与下面的后端端口不同）前端监控的是3389端口 ,执行命令 "npm run dev";
## 后端开发指南
> 下载安装MongoDB, 具体详情不在此赘述,给上链接 [MongoDB](https://www.mongodb.com/download-center?jmp=nav#atlas).
> 安装Express, 具体详情不在此赘述,给上链接 [Express](http://expressjs.com/zh-cn/4x/api.html) .
> 安装supervisor 实时监控，可以进行全局，也可只安装在本项目中。全局安装方法：sudo npm install -g supervisor.
> （划重点，因为本地前后端检测同一个接口无法实现，所以与上面的前端端口不同）后端监控的是3000端口, 需要,cd 到 server文件夹目录下,执行命令 "supervisor listrouter.js";
## 阿里云部署
> 具体部署步骤不在此详解，具体可看[详细教程](https://itcnz.github.io/20180418/%E9%98%BF%E9%87%8C%E4%BA%91%E9%83%A8%E7%BD%B2nuxt%E9%A1%B9%E7%9B%AE.html)
## 构建与运行
``` bash
# 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](https://github.com/nuxt/nuxt.js).