0%

Vue初

可能历史上也有入门过,但这次应该不同,需要掌握从头开始构建的方法,不然只改页面也有点机械了。

pnpm vs npm

我感觉一句话总结。pnpm 更适合 Monorepo。

什么是 Monorepo?
Monorepo 指的是将多个相关项目或模块的代码存储在同一个版本控制仓库中的策略。相比于将每个项目分散在不同的仓库中,Monorepo 有以下优势:

统一依赖管理:所有项目共享相同的依赖版本,避免版本冲突。
代码复用:不同项目之间可以方便地共享和复用代码。
简化协作:开发者只需管理一个仓库,简化了协作流程。
一致的构建和测试流程:可以统一配置构建和测试工具,提高效率。
然而,管理 Monorepo 也带来了一些挑战,如依赖管理复杂、构建时间较长等。pnpm 通过其工作区功能,有效地解决了这些问题。

npmpnpm 都是 Node.js 生态系统中流行的包管理器,用于管理项目的依赖包。虽然它们的基本功能相似,但在性能、存储机制和功能特性上存在一些显著差异。以下将详细介绍两者的区别以及如何在 Ubuntu 系统上安装它们。


一、什么是 npm 和 pnpm

npm(Node Package Manager)

  • 简介:npm 是 Node.js 官方推荐的包管理器,随 Node.js 一起安装。它用于管理 JavaScript 代码包(即 Node.js 模块)的安装、更新和卸载。
  • 特点
    • 广泛使用,拥有庞大的包生态系统。
    • 简单易用,适合大多数开发需求。
    • 支持版本管理和依赖关系管理。

pnpm(Performant npm)

  • 简介:pnpm 是一个高性能的包管理器,旨在解决 npm 和 yarn 在依赖管理中的一些效率和存储问题。它通过独特的存储机制显著提高了安装速度和磁盘空间利用率。
  • 特点
    • 高效存储:使用内容寻址和硬链接技术,避免重复存储相同的依赖包。
    • 快速安装:由于优化的存储方式,依赖安装速度更快。
    • 严格的依赖管理:确保项目依赖的一致性,减少“依赖地狱”问题。

二、npm 和 pnpm 的主要区别

特性 npm pnpm
安装速度 相对较慢,尤其在大型项目中 更快,利用缓存和并行安装机制
磁盘空间 可能会有重复存储,导致占用较多磁盘空间 高效利用磁盘,通过硬链接减少重复存储
依赖管理 使用扁平化依赖树,可能导致依赖冲突 使用严格的依赖树,减少冲突和不一致性
工作区支持 原生支持有限,需要借助第三方工具 内置工作区支持,方便管理多包项目
配置复杂度 配置简单,适合大多数场景 配置略微复杂,但提供更多高级功能
社区和生态 拥有庞大的社区和丰富的插件生态 社区不断壮大,但相比 npm 生态稍显不足

vite vs vue

vite是构建工具,对比于 vue-cli 或者 webpack 等工具,vite 的构建速度更快。
vue是框架,对比于 react 或者 angular 等框架

构建

# 1. 创建项目目录
mkdir my-admin
cd my-admin

# 2. 使用 Vite 创建 Vue 项目
pnpm create vite my-admin --template vue-ts

# 3. 安装基础依赖
pnpm install

# 4. 安装必要的依赖包
pnpm add ant-design-vue@4
pnpm add pinia vue-router@4 @vueuse/core
pnpm add -D unocss @unocss/preset-uno @unocss/preset-icons
pnpm add -D sass typescript @types/node

# 5. 运行项目
pnpm dev

# 6. 打包项目
pnpm build

# 7. 部署项目
pnpm build && pnpm preview

my-admin/
├── src/
│ ├── api/ # API 请求
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── styles/ # 样式文件
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ └── views/ # 页面组件
├── .env # 环境变量
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目配置