web开发学习总结（未完，待续。。。）

开发语言选型

前端

语言/框架

• HTML5
• CSS
• JavaScript
• node.js
• pnpm
• git
• vite
• vue3
• bootstrap

UI框架

• Arco design pro（Vite + Vue +Typescript）
• Ant Design Pro （Umi + React + Typescript）

IDE

• Idea

后端

语言/框架

• Nginx
• Tomcat
• Java
• Mybatis
• MySQL

IDE

• Idea

数据库

• MySQL

环境准备

• 安装JAVA环境的JDK

链接：https://www.oracle.com/java/technologies/downloads/

最好选择JDK17的版本，暂时是最稳定支持久的版本。

---

• 安装Gradle环境

链接：https://gradle.org/

直接选择最高版本就行，但是要注意JAVA的JDK版本要对应升级。

---

• 安装Node.js

链接：https://nodejs.org/en

需要进入英文版，要不然可能存在是老版本的情况。总之就是以英文版网页为准。

而且不知道中文版的网页是不是真的

打开 cmd 窗口，输入命令 node -v 和 npm -v 检查是否安装成功，正常输出对应版本号即可。

---

• 安装pnpm包管理工具

npm、cnpm、yarn、pnpm四个包管理工具（对比了解）

npm、cnpm、yarn、pnpm四个包管理工具（对比了解）

包管理工具	优点	缺点	可以替代的方案	注意事项
npm	- 具有丰富的模块生态系统 - 社区活跃，更新迭代快 - 官方的默认工具，使用广泛	- 安装依赖速度慢 - 会有多个版本的包存在	yarn、pnpm	由于npm在安装依赖过程中可能会出现网络问题，因此注意备份和恢复本地缓存
cnpm	- 由于镜像源国内化，因此安装速度较快	- 镜像源不稳定，容易出现问题 - 存在部分包安装失败的情况	taobao-npm、yarn	由于cnpm可能存在不稳定性问题，建议在尝试使用之前先备份好本地缓存
yarn	- 稳定性高，下载速度快 - 可以直接安装特定版本的包 - 可以并行下载多个包	- 模块生态相比npm较弱	npm、pnpm	yarn需要配置registry以确保从正确的镜像源下载包
pnpm	- 安装速度快，同时占用空间少 - 可以与npm完全兼容	- 相对较新，缺乏历史纪录 - 存在兼容性问题	npm、yarn	pnpm需要在使用之前进行正确的配置和安装，避免出现奇怪的兼容性问题

在使用这些包管理工具时，需要注意以下几点：

选择合适可靠的镜像源加速依赖的下载；
注意遵循版本号规范，确保依赖版本的稳定性；
避免重复安装同一个包的多个不同版本，减少磁盘占用；
在进行升级操作时，注意备份本地缓存，并进行测试和验证；
避免在过程中突然终止安装或升级操作，可能导致不完整的依赖关系和污染的缓存。

全局安装：npm install pnpm -g

npm install pnpm -g

修改下载依赖源地址（主要操作，其他的不太需要操作）

查看下载源：

pnpm config get registry

切换淘宝源，可以加快下载速度

pnpm config set registry https://registry.npmmirror.com/

还原：

pnpm config set registry https://registry.npmjs.org

安装包

pnpm install 包名称

pnpm i 包名称

pnpm add [包名称1] [包名称2] [包名称3] // 同时安装多个包

参数：

-g 全局安装

-S 默认写入package.json文件的dependencies对象中

-D 将包放在package.json文件的devDependencies（本地环境开发模式）对象里面

--production 只安装生产环境依赖

dependencies：项目依赖。无论在开发环境（线下）还是生产环境（线上）中都需要的包。如js框架vue、页面路由vue-router，各种ui框架antd、element-ui、vant等。

devDependencies: 开发依赖。比如css预处理器、vue-cli脚手架、eslint之类。 这些包只是在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；因此不需要打包。

pnpm publish //发布包

pnpm config set store-dir <global-store-path> //设置存储路径

pnpm -v // 查看版本号

pnpm list [-g] //查看依赖(全局)

删除包

pnpm uni

pnpm remove 包名称 // 移除包

pnpm remove 包名称 --global // 移除全局包

更新包

pnpm up // 更新所有依赖项

pnpm upgrade 包 // 更新包

pnpm upgrade 包 --global // 更新全局包

---

• 安装git

链接：https://git-scm.com/

从官网下载不了，因为需要访问GitHub，需要使用国内镜像下载。

链接：https://registry.npmmirror.com/binary.html?path=git-for-windows/

安装的时候，由于权限问题，需要右键使用管理员权限安装。

• 使用vite创建项目

链接：https://cn.vitejs.dev/

在命令提示行界面输入：

> npm create vite@latest

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行：

# npm 7+, extra double-dash is needed:
> npm create vite@latest my-vue-app -- --template vue

社区模板​

create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。

npx degit user/project my-project
cd my-project

npm install
npm run dev

如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。

npx degit user/project#main my-project

index.html 与项目根目录​

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

指定替代根目录​

vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。注意 Vite 同时会解析项目根目录下的 配置文件（即 vite.config.js），因此如果根目录被改变了，你需要将配置文件移动到新的根目录下。

命令行界面​

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

json

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview"