前后端分离开发和接口文档管理平台YAPI以及前端工程化（Vue-cli）

前后端分离开发和接口文档管理平台YAPI以及前端工程化（Vue-cli）

前后端分离开发

需求分析=>接口定义（API接口文档）=>前后端并行开发（遵守规范）=>测试（前端、后端）=>前后端联调测试

YApi

1.介绍：YApi是 高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

2.地址：http://yapi.smart-xwork.cn/

前端工程化

前端工程化：是指在企业 级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

• 模块化：JS、CSS
• 组件化：UI结构、样式、行为
• 规范化：目录结构、编码、接口
• 自动化：构建、部署、测试

环境准备

vue-cli

1.介绍：Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。

2.Vue-cli提供了如下功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

3.依赖环境：NodeJS

4.安装

Microsoft Windows [版本 10.0.22631.3296]
(c) Microsoft Corporation。保留所有权利。

C:\WINDOWS\System32>npm config  set prefix "D:\javaweb\NodeJS"

C:\WINDOWS\System32>npm config  get prefix
D:\javaweb\NodeJS

C:\WINDOWS\System32>npm config set registry https://registry.npmmirror.com

C:\WINDOWS\System32>npm install -g @vue/cli
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

added 853 packages in 59s

74 packages are looking for funding
  run `npm fund` for details

C:\WINDOWS\System32>vue  --version
@vue/cli 5.0.8

C:\WINDOWS\System32>

Vue项目-目录结构

1.基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

• >node_modules 整个 项目的依赖包
• >public 存放项目的静态文件
• >src 存放项目的源代码
• .gitignore
• babel.config.js
• jsconfig.json
• package-lock.json
• package.json 模块基本信息，项目开发所需要模块，版本信息
• README.md
• vue.config.js 保存vue配置的文件，如：代理、端口的配置等

src的子目录：

• >assets 静态资源
• >components 可重用的组件
• >router 路由配置
• >views 视图组件（页面）
• App.vue 入口页面（根组件）
• main.js 入口js文件

Vue项目-配置端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	devServer: {
		port: 7000,
}
})

（按Ctrl + c，再输入y停止当前服务）终止批处理操作（Y/N）？y

Vue项目开发流程

1.Vue的组件文件以.vue结尾，每个组件由三个部分组成： <template>（模板部分，由它生成HTML代码）、<script>（控制模板的数据来源和行为）、<style>（CSS样式部分）

Vue组件库Element

1.Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。

2.组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

3.官网：https://element.eleme.cn/#/zh-CNListener

快速入门

1.安装Element UI组件库（在当前工程的目录下），在命令行执行命令：

npm install element-ui@2.15.3

2.引入Element UI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.访问官网，复制组件代码，调整

常见组件（在官网 复制粘贴）

• Table表格
• Pagination分页
• Dialog对话框
• Form表单