vite学习

vite学习

第一步安装 pnpm

先查看node 的版本

vite学习_第1张图片

发现我的Node.js版本是这个,

vite学习_第2张图片

根据官方文档要求,这边node.js版本不能安装vite

想要在window系统上升级node,似乎只能到node官网下载window安装包来覆盖之前的node。

不过,windows系统的node升级,是可以通过nvm版本控制器来切换的。

这里,就用nvm 来进行node.js的版本切换

nvm的一些常用指令
nvm version         // 查看nvm版本
nvm install 4.6.2   // 安装node4.6.2版本(附带安装npm)
nvm uninstall 4.6.2 // 卸载node4.6.2版本
nvm list            // 查看node版本
nvm use 4.6.2       // 将node版本切换到4.6.2版本
nvm root         // 查看nvm安装路径 
nvm install latest  //下载最新的node版本和与之对应的npm版本

vite学习_第3张图片

1,nvm nvm list 是查找本电脑上所有的node版本

- nvm list 查看已经安装的版本
- nvm list installed 查看已经安装的版本
- nvm list available 查看网络可以安装的版本

2,nvm install 安装最新版本nvm

3,nvm use  ## 切换使用指定的版本node

4,nvm ls 列出所有版本

5,nvm current显示当前版本

6,nvm alias   ## 给不同的版本号添加别名

7,nvm unalias  ## 删除已定义的别名

8,nvm reinstall-packages  ## 在当前版本node环境下,重新全局安装指定版本号的npm包

9,nvm on 打开nodejs控制

10,nvm off 关闭nodejs控制

11,nvm proxy 查看设置与代理

12,nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
  nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.

13,nvm uninstall  卸载制定的版本

14,nvm use [version] [arch] 切换制定的node版本和位数

15,nvm root [path] 设置和查看root路径

16,nvm version 查看当前的版本

去Node.js官网查看node.js更新了,那些版本

https://nodejs.org/en/blog/

vite学习_第4张图片

最新版本有不少问题,这里就选中了node.js 16.15.1版本的

nvm安装这个版本:

vite学习_第5张图片

vite学习_第6张图片

上面这种情况,请用管理员权限打开cmd。然后再试nvm use;

vite学习_第7张图片

vite学习_第8张图片

vite学习_第9张图片

这样node 版本就切换为16.15.1版本了

下面安装 pnpm

先配置全局的 yarn

npm install yarn -g

vite学习_第10张图片

使用下面命令安装

npm i pnpm -g

image.png

为什么要安装pnpm

vite学习_第11张图片

使用 pnpm 创建vite项目

vite学习_第12张图片

vite学习_第13张图片

vite学习_第14张图片

vite学习_第15张图片

vite学习_第16张图片

vite学习_第17张图片

vite学习_第18张图片

可以用 pnpm i 或者 pnpm install 安装依赖

vite学习_第19张图片

输入 pnpm run dev

vite学习_第20张图片

项目地址在浏览器打开

vite学习_第21张图片

vite学习_第22张图片

第一个vite项目运行成功

你可能感兴趣的:(前端,学习,javascript,前端)