node-vue-moba 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
node-vue-moba 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
node-vue-moba 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-23

软件简介

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台

本项目是 Bilibili 全栈之巅 视频教程相关源码 https://github.com/wxs77577/node-vue-moba 持续更新中... 敬请关注

一、 入门

  1. 项目介绍
  2. 工具安装和环境搭建(nodejs,npm,mongodb)
  3. 初始化项目

二、 管理后台

  1. 基于Element UI的后台管理基础界面搭建

  2. 创建分类

  3. 分类列表

  4. 修改分类

  5. 删除分类

  6. 子分类

  7. 通用 CRUD 接口

  8. 装备管理

  9. 图片上传 (multer)

  10. 英雄管理

  11. 编辑英雄 (关联,多选,el-select, multiple)

  12. 技能编辑

  13. 文章管理

  14. 富文本编辑器 (quill)

  15. 首页广告管理

  16. 管理员账号管理 (bcrypt)

  17. 登录页面

  18. 登录接口 (jwt,jsonwebtoken)

  19. 服务端登录校验

  20. 客户端路由限制 (beforeEach, meta)

  21. 上传文件的登录校验 (el-upload, headers)

三、移动端网站

  1. "工具样式"概念和 SASS (SCSS)
  2. 样式重置
  3. 网站色彩和字体定义 (colors, text)
  4. 通用flex布局样式定义 (flex)
  5. 常用边距定义 (margin, padding)
  6. 主页框架和顶部菜单
  7. 首页顶部轮播图片 (vue swiper)
  8. 使用精灵图片 (sprite)
  9. 使用字体图标 (iconfont)
  10. 卡片组件 (card)
  11. 列表卡片组件 (list-card, nav, swiper)
  12. 首页新闻资讯-数据录入(+后台bug修复)
  13. 首页新闻资讯-数据接口
  14. 首页新闻资讯-界面展示
  15. 首页英雄列表-提取官网数据
  16. 首页英雄列表-录入数据
  17. 首页英雄列表-界面展示
  18. 新闻详情页
  19. 新闻详情页-完善
  20. 英雄详情页-1-前端准备
  21. 英雄详情页-2-后台编辑
  22. 英雄详情页-3-前端顶部
  23. 英雄详情页-4-完善

四、发布和部署 (阿里云)

  1. 生产环境编译
  2. 购买域名和服务器
  3. 域名解析
  4. Nginx 安装和配置
  5. MongoDB数据库的安装和配置
  6. git 安装、配置ssh-key
  7. Node.js 安装、配置淘宝镜像
  8. 拉取代码,安装pm2并启动项目
  9. 配置 Nginx 的反向代理
  10. 迁移本地数据到服务器 (mongodump)

五、进阶

  1. 使用免费SSL证书启用HTTPS安全连接
  2. 使用阿里云OSS云存储存放上传文件
展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2018/07/26 14:47

Node-Vue

Vue Webpack Node npm cnpm的关系理解: 1.实际上Vue本身是不依赖Node的, 2.而Vue-cli的脚手架是依赖于Webpack的,所以间接的也需要Node的支持, 3.Webpack基于Node的运行环境,Webpack在执行打包压缩的时候依赖Node, 没有Node就不能使用Webpack,并且支持ES6 4.npm只是nodejs的一个模块,运行在Node上,全称(Node Package Manager) 5.cnpm是淘宝的、只为下载快点 6.node是一个运行在服务器端的js环境 Vue的特点 MVVM模式(Model-...

0
0
发表于大前端专区
2018/06/15 15:23

vue node 环境配置 vue-cli的安装

原文链接: vue node 环境配置 vue-cli的安装 上一篇: Python uuid 模块 下一篇: osc 博客搜索的算法的问题 webstorm 配置 https://my.oschina.net/ahaoboy/blog/1614722 详细 https://my.oschina.net/ahaoboy/blog/1555346 安装node https://nodejs.org/en/ 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm i webpack -g 安装vue-cli cnpm i vue-cli -g 初始化项目 vu...

0
0
发表了博客
2019/01/15 16:55

node创建一个Vue项目

vue的安装 Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟。 Vue.js支持所有兼容ECMAScript5的浏览器。 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js。 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看。node最好使用新一些的版本,否则后续安装会提示n...

0
0
2020/06/30 21:54

windows下node和vue安装配置

下载 http://nodejs.cn/download/ 选择windows的zip压缩版本版本 这里使用zip版本配置 解压 配置 将解压出来的根目录配置到系统变量里就行了 保存后,打开cmd看是否配置成功 输入node -v,npm -v应该有版本号,就说明配置成功了 这个时候还要替换默认的npm包为淘宝的npm 输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 等待。。。 输入cnpm -v显示版本号 成功 安装vue-cli命令行工具 cnpm install --g...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部