mynuxt 是一个文章增删改查系统
因为目前的 spa 单页项目对 seo 很不友好, 如果你希望自己的网站在 seo 这块有较好的支持, 可以尝试一下 SSR 技术, nuxt.js 就是专门针对 vue 这一问题实现的技术, 因此这一次我就尝试写了一个项目, 主要实现的一个简单的文章的增删改查系统, 主要为实现 nuxt 集合 node 实现 ssr 功能
新人可以学习下 github.com/ITCNZ/mynux (如果觉得还不错请给个 star 星星吧)
用到的技术
- Vue2.0
- Nuxt1.0
- Node9.8 (必须 >=8.0)
- Express
- MongoDB
目录结构
assets 资源目录 assets 用于组织未编译的静态资源如 LESSSASS 或 JavaScript
build 打包后的文件
components 存放组件, 用于组织应用的 vue.js 组件
Footer 页面 footer 组件
....
layouts 布局模板文件, 默认 default, 通过为页面设置 layout 更改
edit 编辑 / 创建文章模板
....
middleware 存放应用的中间件
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 存放一些工具文件 (自己添加)
前端开发指南
首先需要安装 >=node8.0 因为 nuxt1.0.0 必须在 >=node8.0 的环境下才可以安装成功
富文本编辑器 nuxt-quill-plugin 的安装与使用 nuxt-quill-plugin
前端监控的是 3000 端口 , 执行命令 "npm run dev";
后端开发指南
下载安装 MongoDB, 具体详情不在此赘述, 给上链接 MongoDB.
安装 Express, 具体详情不在此赘述, 给上链接 Express
后端监控的是 3333 端口, 需要, 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.
来源: https://juejin.im/post/5aa893ae51882555677e3e5a