标签：npm cli YAPI deprecated package server https 工程化 apollo

前后端分离开发和接口文档管理平台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/[email protected]: 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/[email protected]: 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 [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/[email protected]: 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 [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: 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 [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]

2.引入Element UI组件库

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

Vue.use(ElementUI);

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

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

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

标签：npm,cli,YAPI,deprecated,package,server,https,工程化,apollo
From： https://www.cnblogs.com/JenckMin/p/18127681

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

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