混合开发沟通成本高，分工不明确，不便管理，不易维护
根据提供的原型+需求分析出接口文档，前后端并行开发，测试，前后端联调测试
接口文档
API接口管理 Mock服务
2.前端工程化：把前端开发所需的工具、技术、经验等进行规范化、标准化。
2.1 环境准备
Vue-cli是vue官方提供的一个脚手架，快速生成一个vue项目模板
功能：统一目录结构，本地调试，热部署，单元测试，集成打包上线
依赖环境NodeJS
//nodejs环境安装
npm config set prefix "W:\java\nodejs"
npm config get prefix
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
vue --version
2.2 Vue项目简介
vue ui //图形化界面
vue create project //创建vue项目
npm run serve 运行项目
node_modules存放整个项目的依赖包，public存放静态文件,
src源代码：assets静态资源，components可重用的组件，router路由配置，views视图组件，App.vue入口页面，main.js入口js文件
package模块基本信息，项目开发所需模块，版本信息 vue.config.js保存配置文件，如代理端口等。
2.3 Vue项目开发流程
- 组件文件以.vue结尾，每个组件由三部分组成
template模板，生成html代码
script控制模板的数据来源和行为
style为css样式代码
3. Vue组件库Element
Element是饿了么团队研发 基于Vue2.0的桌面组件库
3.1 快速入门
npm i element-ui -S //在当前工程目录下安装
//引入ui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//3. 访问官网，复制组件代码，调整
3.2 常见组件
- 表格：展示多条结构类似的数据，可对数据进行排序、筛选、对比
- pagination分页：数据过多时使用分页分解数据
layout属性设置sizes, prev, pager, next, jumper, ->, total, slot排列顺序
事件 pagesize改变时会触发size-change每条页数，current-page - Dialog对话框，保留当前页面状态弹出对话框
- Form表单 由输入框、选择器
//3. 发起异步请求，加载数据
npm install axios; //右键项目安装axios 后重启项目
import axios from 'axios';
- 前端路由：URL中的hash（#号）与组件之间的对应关系
Vue Router官方路由组成
VueRouter 路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>请求链接组件，浏览器会解析成a
<router-view> 动态视图组件，用来渲染展示与路由路径对应的组件
npm install vue-router@3.5.1 //安装 - 在router下的index.js定义路由
- 打包 执行build，打包后在dist目录下
部署在Nginx服务器上，点击download里的stable version
conf配置文件目录，html静态资源文件目录，logs日志文件，temp临时文件，将打包后的文件全部复制到html中
双击nginx.exe启动，服务器默认占用80端口
查找哪个端口占用80：netstat -ano | findStr 80 任务管理器中查找pid，可以在conf下nginx.conf修改端口号80
ctrl+alt+L格式化代码
