前后端分离开发

混合开发沟通成本高，分工不明确，不便管理，不易维护

根据提供的原型+需求分析出接口文档，前后端并行开发，测试，前后端联调测试

接口文档
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格式化代码