写一个影城小项目带你了VUE（环境配置）

目录   

                          百慕大影城后台管理项目实践

            1.项目简介

            2.在本机搭建后端服务运行环境

            3.在本机搭建前端脚手架环境

本章所需工具：mysql   vscode   pm2    node.js    Navicat Premium 15（数据库执行）

---

                                                       百慕大影城后台管理项目实践

1. 项目立项。

       项目背景：有一个小老板开了一家私人电影院，最后越做越大，开成了连锁店。想写一个项目来管理电影院 的运营。主要功能：用户可以通过前台项目来查看电影院及电影信息、选择电影院、选座、买票等功能。管 理员可以通过后台管理项目进行：影院管理、演员管理、导演管理、放映厅管理、排片计划管理等。

2. 需求分析。

3. 原型设计。

4. 数据库设计。

5. 编码。

6. 测试。

7. 上线。

2.在本机搭建后端服务运行环境

1. 配置数据库。需要安装 mysql 数据库，执行数据库初始化脚本。

2. 运行 nodejs 服务端项目，提供服务接口。（ bmd_server.zip ）

1. 解压缩 zip 包，得到项目源代码目录。 nodejs 项目。

2. 启动 nodejs 服务端项目。

node index.js # 使用 node 命令

pm2 start index.js # 或者安装 pm2 进程管理工具，使用 pm2 工具启动

强烈建议使用 pm2 进程管理工具，管理 node 服务：

1. 安装 pm2 进程管理工具

2. 使用 pm2 的命令，启动这两个服务：

node index.js # 使用 node 命令

pm2 start index.js # 或者安装 pm2 进程管理工具，使用 pm2 工具启动

npm install -g pm2
pm2 start index.js # 3010
pm2 start uploadserver.js # 9000

3. 测试本地接口是否通过：

http://localhost:3010/movie-actors?page=1&pagesize=20

4. pm2 的常用命令：

当前服务端程序提供了 40 多个接口，涉及项目的各个模块：

导入 apipost 接口配置文件：

接口文件一旦导入成功即可 使用 apipost 来测试接口 。

此处准备了两套接口：

1. 线上接口， 前缀：

 https://web.codeboy.com/bmdapi/

2. 线下接口， 前缀：

http://localhost:3010/

例子：

https://web.codeboy.com/bmdapi/ movie-infos?page=xxxxxx

3.在本机搭建前端脚手架环境

1. 新建项目： bmdstudio - ms - client

选择合适的配置，使用 vue2.x 生成脚手架项目包。

vue create bmdstudio-ms-client

2. 进入项目中，安装所需要的模块：

3. 在 main.js 中，配置引入 ElementUI 组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4. 启动脚手架服务器：

npm run serve

显示Compiled successfully in 13153ms    表明运行成功！！！！