从独立安装pnpm到安装NodeJS到构建VUE项目

最新推荐文章于 2024-06-04 10:16:21 发布
最新推荐文章于 2024-06-04 10:16:21 发布
阅读量852 收藏 3
点赞数
文章标签： vue.js 前端 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Monoder/article/details/134392958
版权

最近在学习VUE，开始的时候用的npm管理包，前端同事让我用pnpm，就用npm下载的pnpm，但是环境还是什么有问题，一直解决不好。同事就让我全部卸载直接安装pnpm，再用pnpm安装NodeJS试试，至此就摸索着给项目整起来了。

【独立安装pnpm】-【pnpm安装NodeJS】-【pnpm构建VUE项目】。

pnpm官方文档：Fast, disk space efficient package manager | pnpm

1、安装pnpm

使用 PowerShell 运行独立脚本进行安装：

iwr https://get.pnpm.io/install.ps1 -useb | iex
PS C:\Windows\system32>
PS C:\Windows\system32> iwr https://get.pnpm.io/install.ps1 -useb | iex
Downloading pnpm from GitHub...

Running setup...

Copying pnpm CLI from C:\Users\Monoder\AppData\Local\Temp\4121b611-b243-41b9-bce2-4979637fde4c\pnpm.exe to C:\Users\Monoder\AppData\Local\pnpm\pnpm.exe
Next configuration changes were made:
PNPM_HOME=C:\Users\Monoder\AppData\Local\pnpm
Path=%PNPM_HOME%;C:\Users\Monoder\AppData\Local\Microsoft\WindowsApps;E:\A_Tools\System\Bandizip\;F:\A_Tools\Network\Fiddler;%IntelliJ IDEA%;E:\A_Tools\Network\bin

Setup complete. Open a new terminal to start using pnpm.

# 可以看到安装目录为
C:\Users\Monoder\AppData\Local\pnpm

2、pnpm移动到自定义目录

2.1 移动目录

直接将安装目录的里的文件移动到目标安装目录即可

安装目录：C:\Users\Monoder\AppData\Local\pnpm

目标安装目录：F:\A_Tools\VersionControl\pnpm

2.2 修改环境变量

修改用户变量：PNPM_HOME

修改系统变量：

3、pnpm路径设置

在安装目录下新建四个文件夹，用来配置pnpm的路径，配置路径有两种方法：

修改配置文件，或者PowerShell运行命令。

pnpm-global：pnpm全局安装路径

pnpm-store：pnpm全局仓库路径(类似 .git 仓库)

pnpm-state：pnpm创建pnpm-state.json文件的目录

pnpm-cache：pnpm全局缓存路径

3.1 配置文件

配置文件路径：

C:\Users\<用户名>\AppData\Local\pnpm\config\rc

C:\Users\<用户名>\.npmrc

# pnpm全局安装路径
global-dir=F:\A_Tools\VersionControl\pnpm\pnpm-global

# pnpm全局bin路径
global-bin-dir=F:\A_Tools\VersionControl\pnpm

# pnpm全局仓库路径(类似 .git 仓库)
store-dir=F:\A_Tools\VersionControl\pnpm\pnpm-store

# pnpm创建pnpm-state.json文件的目录
state-dir=F:\A_Tools\VersionControl\pnpm\pnpm-state

# pnpm全局缓存路径
cache-dir=F:\A_Tools\VersionControl\pnpm\pnpm-cache

3.2 PowerShell命令(CMD)

pnpm config set global-dir F:\A_Tools\VersionControl\pnpm\pnpm-global
pnpm config set global-bin-dir F:\A_Tools\VersionControl\pnpm
pnpm config set store-dir F:\A_Tools\VersionControl\pnpm\pnpm-store
pnpm config set state-dir F:\A_Tools\VersionControl\pnpm\pnpm-state
pnpm config set cache-dir F:\A_Tools\VersionControl\pnpm\pnpm-cache

3.3 验证

# pnpm c get
C:\Users\Monoder>pnpm c get
cache-dir=F:\A_Tools\VersionControl\pnpm\pnpm-cache
global-bin-dir=F:\A_Tools\VersionControl\pnpm\pnpm
global-dir=F:\A_Tools\VersionControl\pnpm\pnpm-global
registry=https://registry.npmjs.org/
state-dir=F:\A_Tools\VersionControl\pnpm\pnpm-state
store-dir=F:\A_Tools\VersionControl\pnpm\pnpm-store
user-agent=pnpm/8.10.3 npm/? node/v18.5.0 win32 x64

4、 pnpm 设置镜像和代理

有时候运行pnpm install命令时会遇到下面这种情况，可以通过配置镜像或者走梯子代理解决；


4.1 设置镜像

# 查看源
pnpm get registry 

# 安装包时临时使用镜像源
pnpm --registry https://registry.npmmirror.com install axios

# 持久修改
pnpm config set registry https://registry.npmmirror.com

# 去除
pnpm config set registry https://registry.npmjs.org

4.2 设置代理

# 设置成梯子的代理端口号
pnpm config set proxy=http://127.0.0.1:1081
pnpm config set https-proxy http://127.0.0.1:1081

5、安装node

5.1 安装

# 安装 Node.js 的 LTS 版本
pnpm env use --global lts

# 安装 Node.js v16：
pnpm env use --global 16

# 安装 Node.js 的预发布版本：
pnpm env use --global nightly
pnpm env use --global rc
pnpm env use --global 16.0.0-rc.0
pnpm env use --global rc/14

# 安装最新版本的 Node.js：
pnpm env use --global latest

# 使用 codename 安装 Node.js 的 LTS 版本：
pnpm env use --global argon

5.2 添加别的版本

安装指定版本的 Node.js，而不将其激活为当前版本。

# add
pnpm env add --global lts 18 20.0.1

5.3 移除指定版本

# 移除指定版本的 Node.JS
pnpm env remove --global 14.0.0
pnpm env remove --global 14.0.0 16.2.3

5.4 查看版本

列出本地或远程可用的 Node.js 版本。

# 输出本地安装的版本：
pnpm env list

# 输出远程可用的 Node.js 版本：
pnpm env list --remote

# 输出远程可用的 Node.js 16 版本：
pnpm env list --remote 16

5.5 安装事项

选择安装 20.0.0 版本。（具体安装哪个版本根据自己需要来）

pnpm env use --global 20.0.0

# 安装记录
C:\Users\Monoder>pnpm env use --global 20.0.0
Fetching Node.js 20.0.0 ...
Node.js 20.0.0 was installed
  F:\A_Tools\VersionControl\pnpm\nodejs\20.0.0
Node.js 20.0.0 is activated
F:\A_Tools\VersionControl\pnpm\node.exe -> F:\A_Tools\VersionControl\pnpm\nodejs\20.0.0\node.exe

安装的目录默认位于pnpm的安装目录，暂时没发现可以修改的方法；

6、创建vue项目

在项目目录下打开cmd窗口

6.1 创建vite

# 创建项目：pnpm create vite
PS E:\C_Project\VUE> pnpm create vite
.../pnpm/pnpm-store/v3/tmp/dlx-29932     |   +1 +
.../pnpm/pnpm-store/v3/tmp/dlx-29932     | Progress: resolved 1, reused 1, downloaded 0, added 1, done
# 输入项目名称：my-vue
? Project name: » vite-project 
# 选择构建框架：Vue
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
# 选择脚本语言：TypeScript
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗
    
# 构建完成，初始化项目
Scaffolding project in E:\C_Project\VUE\my-vue...

Done. Now run:

  cd my-vue
  pnpm install
  pnpm run dev

# 切换到项目目录下：cd .\my-vue\
PS E:\C_Project\VUE> cd .\my-vue\
# 构建项目：pnpm install
PS E:\C_Project\VUE\my-vue> pnpm install
Packages: +47
+++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 69, reused 47, downloaded 0, added 47, done

dependencies:
+ vue 3.3.8

devDependencies:
+ @vitejs/plugin-vue 4.4.1
+ typescript 5.2.2
+ vite 4.5.0
+ vue-tsc 1.8.22

Done in 13.6s
# 启动项目：pnpm run dev
PS E:\C_Project\VUE\my-vue> pnpm run dev

> my-vue@0.0.0 dev E:\C_Project\VUE\my-vue
> vite


  VITE v4.5.0  ready in 431 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

6.2 创建vue

# 创建项目：pnpm create vue
PS E:\C_Project\VUE> pnpm create vue
.../pnpm/pnpm-store/v3/tmp/dlx-1436      |   +1 +
.../pnpm/pnpm-store/v3/tmp/dlx-1436      | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

# my-vue
? 请输入项目名称： » vue-project
# 下面是一些可供选择的插件
? 是否使用 TypeScript 语法？ » 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

正在构建项目 E:\C_Project\VUE\my-vue...

项目构建完成，可执行以下命令：

  cd my-vue
  pnpm install
  pnpm format
  pnpm dev

# 切换到项目目录下：cd .\my-vue\
PS E:\C_Project\VUE> cd .\my-vue\
# 构建项目：pnpm install
PS E:\C_Project\VUE\my-vue> pnpm install
Packages: +315
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 337, reused 304, downloaded 11, added 315, done
node_modules/.pnpm/vue-demi@0.14.6_vue@3.3.8/node_modules/vue-demi: Running postinstall script, done in 177ms

dependencies:
+ pinia 2.1.7
+ vue 3.3.8
+ vue-router 4.2.5

devDependencies:
+ @rushstack/eslint-patch 1.5.1
+ @tsconfig/node18 18.2.2
+ @types/node 18.18.9 (20.9.0 is available)
+ @vitejs/plugin-vue 4.4.1
+ @vitejs/plugin-vue-jsx 3.0.2
+ @vue/eslint-config-prettier 8.0.0
+ @vue/eslint-config-typescript 12.0.0
+ @vue/tsconfig 0.4.0
+ eslint 8.53.0
+ eslint-plugin-vue 9.18.1
+ npm-run-all2 6.1.1
+ prettier 3.1.0
+ typescript 5.2.2
+ vite 4.5.0
+ vue-tsc 1.8.22

Done in 1m 21s
# 启动项目：pnpm dev
PS E:\C_Project\VUE\my-vue> pnpm dev

> my-vue@0.0.0 dev E:\C_Project\VUE\my-vue
> vite


  VITE v4.5.0  ready in 847 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

1.1.2.3
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pnpm + vue3.0 + vite + pinia + vueuse 搭建前端项目
发果叁
06-08 5089
使用 npm 安装 注意：node 的版本号。安装 pnpm，node 的版本号不能小于 V14.19.0查看 nvm 现在使用的 node 版本号。 使用 nvm 安装 node 14.19.0 版本 ，安装完毕之后切换到此版本中，最好关闭之后再切。 输入项目名 选择一个框架 使用 typescript 5.启动项目 集成配置 为保证 node 的使用 修改 3.代码质量风格的统一 集成 eslint 安装 创建配置文件： 创建忽略文件： 命令行式运行
pnpm 手动安装 - windows系统
dark0sun的博客
11-28 1493
pnpm 手动安装 - windows系统
前端工程化工具系列（七）—— PNPM(v9.4.0)：高性能的 NPM 替代品
最新发布
天下布武
06-04 884
（Performant NPM）是一个高效的 NPM 包管理器，它使用硬链接和符号链接来减少磁盘空间的使用，并提高了安装速度。
Idea使用指南
张凡的博客
09-08 1275
安装:只选一个X64，其余一路next 使用：
pnpm安装以及管理多个nodejs版本
qq_36437991的博客
02-01 2722
pnpm安装以及管理多个nodejs版本
使用pnpm+vite创建vue
xiao_cheng_的博客
04-27 3711
(踩坑中……) 目录一、创建项目步骤二、vite使用记录1、vite使用eslint2、vite 使用sass，不需要安装sass-loader：3、vite使用mock:4、vite使用axios5、vite使用vue-router6.使用pinia7.使用pinia-plugin-persist 一、创建项目步骤 没得axios/vueRouter，啥都要自行安装 pnpm安装：https://blog.csdn.net/xiao_cheng_/article/details/124247953 p
Monorepo的入门—— 采用pnpm构建一个demo
z止于至善的博客
07-25 3386
Monorepo大家应该都听过，并且知道一些优秀开源项目都是使用Monorepo的方式管理项目的，比如Vue3、Vite、ElementPlus等，同时这几个项目都是采用pnpm作为包管理工具。
vue使用到的工具node npm cnpm pnpm yarn管理
m0_47634044的博客
05-30 1421
vue前端框架搭建项目使用到的工具 1、node.js nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。 相较于传统的web开发，前端使用js开发，服务端还需要用其他语言来写。 node.js官网下载地址：https://nodejs.org/en/download/，一路默认即可。最后通过cmd命令框输入：node -v查看即可 2、npm node package Manager:Node 的包管理系统，世界上最大的软件包仓库。在这里，我们要实现各种功能几乎
pnpm快速创建 Vue.js 项目(npm类似)
夏日漱石的博客
08-31 1970
pnpm快速创建 Vue.js 项目(npm类似)
VUE3入门第二篇：安装pnpm
坐公交也用券
03-07 1763
一般情况下，对于我们都会使用npm进行管理，但是使用 npm 时，依赖每次被不同的项目使用，都会重复安装一次。所以我们使用更加先进的pnpm，在使用 pnpm 时，依赖会被存储在内容可寻址的存储中，优点如下：如果你用到了某依赖项的不同版本，只会将不同版本间有差异的文件添加到仓库。例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。所有文件都会存储在硬盘上的某一位置。
pnpm 基本详细使用教程（安装、卸载、使用、可能遇到的问题及解决办法）
热门推荐
蓝雨天的博客
02-15 5万+
pnpm 全称 performant npm，意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。被誉为 最先进的包管理工具。特点：速度快、节约磁盘空间、支持 monorepo、安全性高、创建一个非扁平的 node_modules 目录。pnpm 相比较于 yarn/npm 这两个常用的包管理工具在性能上也有了极大的提升，根据目前官方提供的benchmark。
安装并搭建Vue项目【安装node，设置npm镜像】
彭_德华的博客
10-04 6126
文章目录前言一、安装Vue1.安装node.js配置路径和缓存（非必要）2.安装cnmp镜像3.安装vue-cli3.0脚手架二、可视化工具构建Vue项目1.进入图形化界面2.创建项目 前言 本篇简述Windows下，安装、搭建Vue项目。Vue的一些基本语法不涉及，需要自行学习。 在学习前端前沿技术之前，在本地安装node+vue环境。Vue通过尽可能简单的 API 实现 响应的数据绑定 和 组合的视图组件。它易于上手，便于与第三方库或既有项目整合。 一、安装Vue 安装它的方式有三种：安装独立版本
Vue移动端-轻松切换pnpm，快速安装Vant-快速上手！- day04
qq_55013922的博客
08-31 2388
有赞公司出品Vant 是一个轻量、可制定的移动端组件库Vant 是基于Vue.js的轻量高效的移动端UI组件库轻量高效：Vant 组件库经过精心优化，体积小且高效。多样化组件：包含常见的按钮、输入框、轮播图、列表等组件。自定义主题：支持自定义主题，方便符合项目风格。友好的文档和示例：提供详细文档、示例和API文档。可扩展性：支持自定义组件和扩展已有组件。国际化支持：支持多语言和国际化功能。零部件依赖：不依赖三方npm包。
Vue3基础：pnpm是什么？npm和pnpm的区别？如何使用pnpm？
code_space
01-25 2132
pnpm 是一个流行的 JavaScript 包管理器，类似于 npm 和 yarn。它是 performant npm 的缩写，意在表明它是一个更高效的 npm 替代品。
Vue3+ts+pinia+Vant+pnpm项目起步
behance的博客
08-10 366
项目创建 执行创建命令 选择项目依赖内容 vscode插件安装 必装：可选： 格式：单引号，没有分号，行宽度80字符，没有对象数组最后一个逗号，换行字符串自动（系统不一样换行符号不一样） vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的 允许对 props 进行解构，我们会开启解构保持响应式的语法糖 执行： vscode 开启 eslint 自动修复： 代码检查工作流 husky 配置 初始化与安装 修改 .husky
幽灵依赖是什么，pnpm出现的意义，使用pnpm创建一个vue3项目
随便写写
06-26 3342
幽灵依赖是什么，pnpm出现的意义，使用pnpm创建一个vue3项目，配置eslint，prettier，stylint
2024年最新Vue3学习日记 Day4 —— pnpm，Eslint，字节跳动8年老Web前端面试官经验谈
2401_84435942的博客
05-15 812
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-Kb3LnFVq-1715709266486)]
研究一下「pnpm」这个神奇的包管理工具
Mark
07-07 1152
从pnpm 官网的定义来 👀：快速的，节省磁盘空间的包管理工具。它用于管理 JavaScript 依赖包，类似于 npm 或 yarn，旨在解决传统包管理工具在安装和升级依赖时的一些常见问题 🤕，例如：占用大量磁盘空间、重复下载依赖项等... 😵「pnpm」的主要特点之一是它使用一种称为「虚拟化节点模块」的技术来管理依赖项。它通过在单个磁盘位置存储依赖项的多个版本来减少磁盘占用空间，并通过「符号链接」将它们正确引用到项目中，这种方法还可以加快安装和更新依赖项的速度！🐂🍺
pnpm使用记录
TangAcrab的博客
06-09 1015
最近社区pnpm的呼声很高，下载尝试一下。 为什么使用： pnpm官网 安装 npm install -g pnpm 与npm部分命令差异对比 可以看到安装新的依赖时是通过 pnpm add <pkg> pnpm也有pnpx 使用pnpm 在现有基于vue-cli的项目下： 运行时将npm或者yarn换成pnpm即可 ...
vue3中用pnpm安装vue-router
03-11
在Vue 3中使用pnpm安装vue-router的步骤如下： 1. 首先，确保你已经安装了pnpm。你可以通过运行以下命令来检查是否已安装： ``` pnpm --version ``` 2. 创建一个新的Vue项目。你可以使用Vue CLI来创建一个新的项目，运行以下命令： ``` vue create my-project ``` 3. 进入到项目目录中： ``` cd my-project ``` 4. 使用pnpm来安装vue-router。运行以下命令： ``` pnpm add vue-router@next ``` 5. 安装完成后，你可以在项目中使用vue-router了。在你的Vue应用程序中，你可以通过导入vue-router并创建路由实例来配置路由。例如，在`src/main.js`文件中添加以下代码： ```javascript import { createApp } from 'vue' import App from './App.vue' import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home } ] }) const app = createApp(App) app.use(router) app.mount('#app') ``` 以上是使用pnpm安装和配置vue-router的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值