开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：搭建项目前端页面环境】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11328
搭建项目前端页面环境
内容介绍：
一、B2C 模式
二、搭建项目前端页面环境
一、B2C 模式
1.项目常用的商业模式是 B2C 模式。
（1）什么叫 B2C 模式？
有两部分，一个管理员，一个普通用户。
开发时做的是两套系统，一套系统是管理员系统。一套系统是普通用户系统。先做的是管理员系统叫后台管理系统，普通用户系统叫前台用户系统。
2.系统实现
之前写的讲师管理接口是后台系统中的一个模块。前台中可以实现视频的播放，微信扫码登录、微信支付等。
现在做的是后台分成两部分，后端接口和前端页面。
因为项目是前后端分离开发，所以肯定有后端接口部分和前端页面部分。接口部分（讲师管理模块）已经写过了。下面要做的就是前端页面。把前端页面的环境搭建出来，把页面效果做到。前台和后台一样，有接口有页面。
二、搭建项目前端页面环境
在实际开发中，一般来讲搭建一个页面环境很少是从零开始写，很多时候会选举一些框架或者一些模板来搭建页面，这么做效率更高，可以实现很多业务的功能。
- 选取一个模板（框架）进行环境搭建
Voe-admin-template
在资料里找到这个模板，或者到官网去下载最新的
资料文件夹位置：
资料/前端相关资源/两个压缩文件，哪个都可以。
可以看到两个文件的大小。第一个文件100多K，第二个文件900多k。现在用100多 K 就足够了，900多 K 中有更多写好的功能。模板就是项目的环境搭建，选用171 K 的压缩文件，
2.解压171 K 的压缩文件到工作区里面去。
解压之后是这样
点开里边还有一层
就这个文件直接复制到工作区中
3.通过 Vscode 的终端打开解压文件夹，进行依赖安装。
（1）找到第二步复制的文件在终端中打开
（2）打开之后把依赖装上，默认只有一个配置文件package.json。里边就是有很多的依赖。通过配置文件安装或下载依赖，使用命令npm install
如果失败，就把下载的东西删掉，重新用命令下载。
（3）下载完成之后，会多出来一个 node_moduiles 文件夹，最终依赖就在这里。
4.启动下载好依赖的项目
命令：npm run dev（run 运行 dev 开发环境）用这个命令启动项目。
（1）进入项目的目录，用终端打开
（2）直接输入命令 npm run dev
（3）启动过程中有一个百分比的显示，最终提示100%就成功了。
（4）可以看到有一个默认端口号叫9528，可以改，一般没必要改，用默认的就可以了。
成功之后会自动打开浏览器可以自动访问，如果你没自动打开，可以通过这个端口号访问。
打开之后就是后台系统的一个前端页面
它是一个用模板做到的登录页面。当看到它，就表示成功了。
