05 工程化开发入门
pnpm 包管理器
pnpm 通过软、硬链接（hark link、symbolic link） + 全局存储（store）结合的依赖管理方式完全实现了依赖树结构的包管理方式，解决了 npm3 及 yarn 中的幽灵依赖和 npm 分身的问题，提升了依赖包的安装速度，减小了磁盘空间占用。
什么是 pnpm
根据官网的介绍 p 是单词 performant 的缩写，所以 pnpm 可以理解为 performant npm。
pnpm 主要有以下优点：
- 快速：
pnpm比其他包管理工具快两倍; - 高效：
node_modules中的文件链接自特定的内容寻址存储库; - 支持 monorepo:
pnpm内置了对存储库中的多个包的支持; - 严格：
pnpm默认创建一个非平铺的node_modules,因此代码不能访问任意包;
与其他包管理工具对比
- npm（Node Package Manager）是 Node.js 默认的包管理工具，在社区中拥有广泛的用户和生态系统。它具有丰富的功能和强大的生态支持。
- yarn 是由 Facebook 开发的包管理工具，旨在解决 npm 在性能和一致性方面的一些问题。yarn 具有类似的命令和功能，可以与 npm 兼容，并通过并行下载和缓存机制来提高安装和更新的速度。yarn 在性能上较 npm 有一些优势，特别在大型项目或复杂的依赖关系中更为明显。
- pnpm 是一个相对较新的包管理工具，与 npm 和 yarn 不同的是，pnpm 使用一种称为“符号链接”的技术来实现依赖的共享。这意味着 pnpm 不会将每个依赖都复制到项目目录中，而是在全局缓存中共享它们。这样可以节省磁盘空间，并且在安装和更新时也更加高效。
| 功能 | pnpm | Yarn | npm |
|---|---|---|---|
| 工作空间支持（monorepo） | ✔️ | ✔️ | ✔️ |
隔离的 node_modules | ✔️ - 默认 | ✔️ | ✔️ |
提升的 node_modules | ✔️ | ✔️ | ✔️ - 默认 |
| 自动安装 peers | ✔️ | ❌ | ✔️ |
| Plug'n'Play | ✔️ | ✔️ - 默认 | ❌ |
| 零安装 | ❌ | ✔️ | ❌ |
| 修补依赖项 | ✔️ | ✔️ | ❌ |
| 管理 Node.js 版本 | ✔️ | ❌ | ❌ |
| 有锁文件 | ✔️ - pnpm-lock.yaml | ✔️ - yarn.lock | ✔️ - package-lock.json |
| 支持覆盖 | ✔️ | ✔️ - 通过 resolutions | ✔️ |
| 内容可寻址存储 | ✔️ | ❌ | ❌ |
| 动态包执行 | ✔️ - 通过 pnpm dlx | ✔️ - 通过 yarn dlx | ✔️ - 通过 npx |
| 辅助缓存 | ✔️ | ❌ | ❌ |
| 列出许可证 | ✔️ - 通过 pnpm licenses list | ✔️ - 通过插件 | ❌ |
为什么选择使用 pnpm
pnpm 主要有几个优势，这也是 pnpm 项目创立之初的初心：
- 节省磁盘空间：pnpm 会在本地磁盘上维护一个共享的依赖包存储库，当你在不同项目中安装相同版本的依赖包时，pnpm 会将其存储在共享存储库中，避免了重复下载和存储依赖包。
- 提高安装速度：pnpm 使用符号链接技术和并行安装，因此能够显著提高依赖包的安装速度，尤其对于大型项目而言，这意味着能够大幅缩短依赖安装的时间成本。
- 高效更新：pnpm 的软链接方式可以让更新依赖包的操作更为高效，因为它能够复用已有的依赖，而无需重复下载和存储。
- 生态兼容：pnpm 兼容现有的 npm 生态，可以无缝使用大部分基于 npm 的包和工具，而且它还支持 Yarn 的 lockfile 格式，方便与使用 Yarn 的项目进行集成和迁移。
综上所述，选择使用 pnpm 可以带来磁盘空间、安装速度、更新效率、版本管理等多方面的优势，特别是对于需要频繁安装依赖和维护大型项目的开发团队而言，pnpm 提供了一种显著改善依赖管理体验的解决方案。
使用 pnpm
安装 pnpm
bash
# 使用 scoop 安装
scoop install pnpm
# 使用 npm 全局安装
# pnpm 是 pnpm 的普通版本，需要 Node.js 运行
npm install -g pnpm
# @pnpm/exe 与 Node.js 一起打包成可执行文件，因此它可以在没有安装 Node.js 的系统上使用
npm install -g @pnpm/exe
# 在项目中安装 pnpm： 如果你不想在全局范围内安装 pnpm，可以通过以下命令在项目中安装
npm install pnpm设置淘宝镜像源
将 PNPM 源设置为国内的镜像，可以大幅提升安装速度。
bash
# 查询下载源
npm config get registry
pnpm config get registry
yarn config get registry
# 设置淘宝镜像
pnpm config set registry https://registry.npmmirror.com
npm config set registry https://registry.npmmirror.com
yarn config set registry https://registry.npmmirror.com
# 恢复为官方镜像
pnpm config set registry https://registry.npmjs.org
npm config set registry https://registry.npmjs.org
yarn config set registry https://registry.yarnpkg.com初始化项目
powershell
pnpm init按照提示填写项目的相关信息，包括项目名称、版本、描述等，即可初始化一个 pnpm 项目。
查看依赖
bash
pnpm list
# 别名
pnpm ls安装依赖
安装软件包及其依赖的任何软件包。默认情况下，任何新软件包都安装为生产依赖项。
| 命令 | 解释 |
|---|---|
pnpm add sax | 保存到 dependencies |
pnpm add -D sax | 保存到 devDependencies |
pnpm add -O sax | 保存到 optionalDependencies |
pnpm add -g sax | Install package globally |
pnpm add sax@next | 从 next 标签下安装 |
pnpm add sax@3.0.0 | 安装指定版本 3.0.0 |
安装所有依赖
powershell
pnpm install
# 别名
pnpm i更新依赖
bash
pnpm update <package-name>
# 别名
pnpm up
pnpm upgrade| 命令 | 解释 |
|---|---|
pnpm up | 遵循 package.json 指定的范围更新所有的依赖项 |
pnpm up --latest | 更新所有依赖项，此操作会忽略 package.json 指定的范围 |
pnpm up foo@2 | 将 foo 更新到 v2 上的最新版本 |
pnpm up "@babel/*" | 更新 @babel 范围内的所有依赖项 |
卸载依赖
bash
pnpm remove <package-name>
# 别名
pnpm rm
pnpm uninstall
pnpm un本地调试
这些命令可以根据你的项目需求和配置来进行调整和使用，命令不固定，具体在 package.json 中的 scripts 中查看。
pnpm start: 启动项目的开发服务器或者运行一些开发时需要的脚本。pnpm run <script-name>: 运行package.json文件中定义的脚本。pnpm test: 运行项目的测试脚本。pnpm dev: 启动开发式，通常用于本地开发调试。
lock 文件迁移
将 npm、yarn 的 lock 文件迁移生成 pnpm-lock.yaml 锁定依赖版本。
bash
pnpm import更多阅读
工程化开发和脚手架
开发 Vue 的两种方式
- 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。
- 工程化开发模式：基于构建工具（例如：webpack）的环境中开发 Vue。
工程化开发模式优点
- 提高编码效率，比如使用 JS 新语法、Less/Sass、Typescript 等通过 webpack 都可以编译成浏览器识别的 ES3/ES5/CSS 等
工程化开发模式问题
- webpack 配置不简单
- 雷同的基础配置
- 缺乏统一的标准
为了解决以上问题，所以我们需要一个工具，生成标准化的配置
脚手架 Vue CLI
基本介绍
- Vue CLI 是 Vue 官方提供的一个全局命令工具
- 可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】
Vue CLI 现已处于维护模式！
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。
官方介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过
@vue/cli实现的交互式的项目脚手架。 - 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service)，该依赖：- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
好处
- 开箱即用，零配置
- 内置 babel 等工具
- 标准化的 webpack 配置
使用步骤
全局安装（只需安装一次即可）
bash# pnpm pnpm add @vue/cli -g # npm npm i @vue/cli -g # yarn yarn global add @vue/cli查看
vue/cli版本bash❯ vue --version @vue/cli 5.0.8创建项目架子：vue create project-name(项目名不能使用中文) 或者 vue ui(会打开一个图形化界面，
http://localhost:8000)建议
将 NPM 源设置为国内的镜像，可以大幅提升安装速度。
bash# 查询下载源 npm config get registry pnpm config get registry yarn config get registry # 设置淘宝镜像 pnpm config set registry https://registry.npmmirror.com npm config set registry https://registry.npmmirror.com yarn config set registry https://registry.npmmirror.com # 恢复为官方镜像 pnpm config set registry https://registry.npmjs.org npm config set registry https://registry.npmjs.org yarn config set registry https://registry.yarnpkg.com- 项目名不能使用中文
- 刚进入提示选取一个
preset。你可以选默认的包含了基本的 Babel + ESLint 设置的preset，也可以选手动选择特性来选取需要的特性。我们这里学习 vue2，所以选择Default ([Vue 2] babel, eslint)。 - 然后会让我们选择包管理器（
npm、yarn、pnpm），这里我们选择pnpm。（如果你没有安装 pnpm，可以选择npm或者yarn）。
启动项目：(命令不固定，在
package.json中的scripts中查看)bash# 命令不固定，在 `package.json` 中的 `scripts` 中查看 # 例如：scripts 中的为 serve pnpm run serve npm run serve yarn serve
脚手架目录介绍和运行流程
项目目录介绍
bash
.vue-demo01
├── babel.config.js # Babel 配置文件，用于转译 ES6+ 语法
├── jsconfig.json # JavaScript 项目配置文件
├── node_modules # 存放项目依赖的 npm 包
├── package.json # 项目的配置信息和依赖管理文件
├── pnpm-lock.yaml # pnpm 的锁定文件，用于确保依赖的一致性
├── public
│ ├── favicon.ico # 网站图标
│ └── index.html # 项目的入口 HTML 文件
├── README.md # 项目的说明文档
├── src
│ ├── App.vue # 根组件
│ ├── assets
│ │ └── logo.png # 存放项目中使用的静态资源
│ ├── components
│ │ └── HelloWorld.vue # 示例组件
│ └── main.js # 项目的入口文件
└── vue.config.js # Vue CLI 配置文件虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可
| 文件名 | 描述 |
|---|---|
main.js | 入口文件 |
App.vue | App 根组件 |
index.html | 模板文件 |
运行流程
组件化开发
- 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
- 好处：便于维护，利于复用 → 提升开发效率。
- 组件分类：普通组件、根组件。
比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分
总结
组件化的好处是什么？
- 便于维护，利于复用 → 提升开发效率。
组件的分类？
- 普通组件、根组件。