当前位置: 首页 > news >正文

Vue学习001-创建 Vue 应用

创建 Vue 应用

  • 1、安装node.js
  • 2、安装pnpm
    • npm、pnpm、yarn、bun 对比
      • ​​安装速度​​
      • ​​​​磁盘空间​​
      • ​​​​​​网络与缓存​​
      • ​​​​​​适用场景推荐
      • ​​​​​​兼容性与生态
  • 3、创建应用
    • 3.1 输入项目名称
      • 3.2 请选择要包含的功能
      • 3.3 选择一个端到端测试框架
      • 3.4 是否引入Oxlint以加快检测?
  • 4、启动
  • 参考链接

在这里插入图片描述

1、安装node.js

这里建议安装nvm多版本管理node.js,想用哪个版本,一条命令即可~
多版本管理node.js

2、安装pnpm

为什么要用pnpm,为啥不用npm直接安装?下面也有所讲解。

npm install -g pnpm@latest# 查看是否安装
pnpm -v# 查看当前配置的镜像地址
pnpm config get registry# 修改国内pnpm源
pnpm config set registry https://registry.npmmirror.com

在这里插入图片描述

npm、pnpm、yarn、bun 对比

​​安装速度​​

​​Bun​​ 最快(官方称比 npm 快 20-100 倍,利用 Zig 编写和并行安装)。
​​pnpm​​ 次之(通过硬链接复用依赖,冷启动快)。
​​yarn​​ 优于 npm(并行下载 + 缓存优化)。
​​npm​​ 最慢(但 v7+ 已改进)。

​​​​磁盘空间​​

​​pnpm​​ 最节省(全局存储共享依赖,节省 50%+ 空间)。
​​Bun​​ 和 ​​yarn​​ 中等(优化缓存但仍有冗余)。
​​npm​​ 占用最高(每个项目独立安装依赖)。

​​​​​​网络与缓存​​

​​yarn​​​​pnpm​​ 支持离线安装,缓存机制更高效。
​​Bun​​ 依赖全局缓存,但更注重运行时性能

​​​​​​适用场景推荐

​​npm​​
新手入门或小型项目;
对兼容性要求极高的传统项目。
​​yarn​​:
企业级 Monorepo(Yarn Workspaces);
需要严格依赖锁定和离线支持的场景。
​​pnpm​​:
大型项目或 Monorepo(依赖隔离和磁盘优化);
追求高效和稳定性的团队。
​​bun​​:
新项目或实验性技术栈(如 SSR、高频 API);
追求极致性能(安装、运行时、打包一体化)

​​​​​​兼容性与生态

​​npm​​
100% 兼容 Node.js,最稳定 最大,官方支持 性能劣势
​​yarn​​:
高度兼容,但 PnP 模式可能冲突 成熟,企业级项目常用 Yarn Berry 配置复杂
​​pnpm​​:
99% 兼容,少数旧工具需适配 快速增长,Monorepo 首选 极少数包兼容性问题
​​bun​​:
80% 兼容,部分 Node.js API 需适配 新兴,社区活跃但较小 稳定性风险,Windows 支持较弱

3、创建应用

上面的环境都准备好之后,就可以创建了。

pnpm create vue@latest

3.1 输入项目名称

在这里插入图片描述

3.2 请选择要包含的功能

这里我全选了,其他的按需要勾选
在这里插入图片描述

3.3 选择一个端到端测试框架

这里默认第一个即可。
在这里插入图片描述

3.4 是否引入Oxlint以加快检测?

这里可以Yes,试验快不快。如果是正式项目不建议!
在这里插入图片描述
看到这一步说明创建成功~
在这里插入图片描述

4、启动

进入目录,然后先进行依赖安装:

pnpm install

加粗样式

运行所需的依赖都安装之后,运行命令:

pnpm run dev

在这里插入图片描述
访问这个链接:http://localhost:5174/
看到个页面说明启动成功:
在这里插入图片描述

参考链接

https://cn.vuejs.org/guide/quick-start.html

http://www.dtcms.com/a/250849.html

相关文章:

  • 循环神经网络及其变体
  • Python+QT远程控制助手-ver2
  • Dify 插件工具:远程连接配置指南
  • NY271NY274美光科技固态NY278NY284
  • 车载通信架构 --- IP ECU 在连接被拒绝后的重连机制
  • C++第一阶段——语言基础与核心特性
  • 项目 : 基于正倒排的boost搜索引擎
  • AI for Science:智能科技如何重塑科学研究
  • 基于机器学习的逐巷充填开采岩层运动地表沉降预测
  • 408第一季 - 数据结构 - B树与B+树
  • Spring Boot Web 应用开发
  • 6,TCP客户端
  • 【技术实战】工业级设备健康管理系统搭建全栈指南:从数据采集到预测性维护
  • LeetCode 2300.咒语和药水的成功对数
  • Java面试题:分布式ID时钟回拨怎么处理?序列号耗尽了怎么办?
  • 香橙派Zero3结合Docker部署私有音乐实践过程
  • vscode通过ssh连接
  • Flink与Kubernetes集成
  • RV1126+OPENCV对视频流单独进行视频膨胀/腐蚀操作
  • 微软Bing正式推出AI视频生成工具:Bing Video Creator,由Sora技术驱动,限时免费体验!
  • Docker + PyFlink1.17 数据写入 MySQL
  • 05-mcp-server案例分享-用豆包大模型 1.6 手搓文生图视频 MCP-server发布到PyPI官网
  • ESP32 005 MicroPython I2S 实现音频传输与播放
  • 性能优化 - 案例篇:11种优化接口性能的通用方案
  • Bootstrap 5学习教程,从入门到精通, Bootstrap 5 列表组(List Group)语法知识点及案例(14)
  • AWS EC2 终极指南:如何选择预装 GPU 驱动和特定功能的最佳 AMI
  • AWS 解决方案深度剖析:Amazon QLDB — 构建可信赖、不可变的数据审计基石
  • 基于AWS无服务器架构的区块链API集成:零基础设施运维实践
  • 微软azure抢跑aws和谷歌云的区别
  • 线性代数(2)几何角度来理解线性方程组