前端工程化（Vue脚手架搭建）

 一、前后端分离开发

1. 接口文档管理平台YApi

就算后端接口没开发完，前端人员也可以用mock服务进行模拟数据测试。

2. YApi使用步骤

可以指定返回的值（而不是随机生成）：高级Mock

二、前端工程化 （环境搭建）

1. 工程化定义

2. Vue脚手架工具（vue-cli）

因为自己想做到这些要求有一定难度，所以用Vue脚手架工具做前端工程化 。

Nodejs：前端工程化的运行环境，类似Java中的jdk环境，没有它脚手架无法运行， 需要安装。

3. 安装Nodejs

下载安装（Windows系统可更改安装目录，安装路径不要有中文）， 安装完成后Nodejs会自动配置环境变量。只需验证Nodejs版本即可，若出现版本号则代表安装成功：

配置npm的全局安装路径：（npm为Nodejs中的包资源管理器，注意配置的路径是你Nodejs的安装路径）

验证是否配置成功（显示的是安装路径就代表成功了）：

切换npm的淘宝镜像（方便后期资源下载）：

4. 安装vue-cli

验证是否安装成功（能看见版本信息就代表安装成功）：

三、Vue项目

1. 创建Vue项目

终端输入vue ui：

点击创建，进入创建新项目的界面，配置好信息后点击下一步：

选择手动，点击下一步：

在系统默认选项的基础上，额外勾选Router选项即可，点击下一步：

选择vue的版本为2.x，选择语法检测规范第一个选项，点击创建项目：

点击创建项目，不保存预设：

新项目的页面：

用VSCode打开创建vue项目的文件夹：

2. Vue项目目录结构

3. 启动Vue项目

VSCode 中的图形化界面：

4. 配置端口

因为默认的端口是8080，会和后台端口冲突，所以改动vue.config.js文件，修改默认端口号为7000：

四、Vue项目开发流程

1. vue的组件文件

2. 自定义App.vue

创建script时，选择倒数第二个javascript.vue，这样会创建标准格式的script，只有在这里定义成一个可以导出的模块，其他地方才可以通过import方式导入：

这里的数据模型 是一个函数（data后面省略了冒号和function，js自定义对象的语法是这样的），函数里面要声明一个对象，并把对象return回去，这样就定义好了一个数据模型，然后在methods中定义方法：

运行结果：