全栈开发学习(Node+Vue+Mongodb)(一)——开发前的准备工作

寒假开始之后开始跟着b站的全栈大佬学习开发web端的项目，正好去年暑假的时候做导师项目也学习了这方面的相关知识，但是当时对于很多概念还不是很清晰，导致项目做出来功能也不是非常完善，也没有相应的后台管理系统，只是粗略的入门了vue的相关知识，所以打算趁着找实习前的最后一段时间做几个比较完整的项目。

这个项目的完成耗费了10天左右的时间，管理后台部分使用的技术栈为Node.js+Express框架+ElementUI框架+Mongodb数据库，移动端网站部分使用Vue.js+SASS等。项目总体来说比较完整，内容也比较多，这段时间将会每天对整个项目进行复盘，记录一下重要过程和心得，整理完之后希望能熟练使用这一套技术再完成一个自己的项目。在此特别感谢b站全栈之巅的老师，通过这个项目学习到了很多知识。

1 项目介绍

这是一个复刻王者荣耀旧版移动端官网的项目，前后端功能完善，比较完整地实现该网站的界面展示要求。后端部分基本实现CRUD的功能，能够对移动端网站展示数据进行管理。

2 相关工具安装

• 编辑器：VSCode
• 数据库：Mongodb
• nodejs
• npm

3 项目初始化

三个文件夹结构

• server（服务端，后台管理界面/web端的接口包含在此）：

  直接新建，再进行node初始化：npm init -y

  安装nodemon， 执行：npm i -g nodemon

  进入package.json ,添加"serve":“nodemon index.js”,方便启动

  启动服务端项目 ，执行：npm run serve

• admin（后台管理界面）: vue create web

  启动admin管理后台 ，执行：npm run serve

• web（后台管理界面）: vue create admin

  启动web端项目 ，执行：npm run serve