GitHub Vue項目推薦|Node.js (Express.js) + Vue.js (Element UI) 全棧開發王者榮耀手機端官網和管理後臺

項目在線視頻：https://www.bilibili.com/video/av50341412

視頻播放量很高哦，作者講的很仔細

項目分析

倉庫名稱：node-vue-moba

標星(star)：195 （不錯哦，潛力股項目）

標星趨勢

關注(watch)：9

拷貝(fork)：56

貢獻人數：1

倉庫大小：5 MB

綜合推薦指數： 2星

開發語言

主要語言：Vue

語言分佈：Vue:46.00%、JavaScript:26.26%、CSS:14.89%、HTML:12.85%

項目概述

【全棧之巔】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雲存儲存放上傳文件

項目地址

https://github.com/wxs77577/node-vue-moba

程序員新視界：分享有趣、有料的流行程序員話題，每天進步一點點。