用pnpm从零构建Vue3+Vite+Element-plus项目

Lin·Ming

已于 2024-01-18 21:06:42 修改

阅读量1k

点赞数 12

文章标签： javascript 前端 vue.js elementui

于 2024-01-18 21:06:15 首次发布

本文链接：https://blog.csdn.net/weixin_40001194/article/details/135684051

版权

前言

由于之前的项目都是用npm去构建项目、下包、打包的，最近刷到一篇文章觉得pnpm安装速度挺快的，于是就尝试下，体验下。

一文看懂npm、yarn、pnpm之间的区别 - 知乎 (zhihu.com)

pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网

由于vue3官方文档中提示nodejs版本需安装18.0及更高版本

在这里插入图片描述

而pnpm官网中展示的兼容性中，nodejs@18+兼容性更佳，本文采用node@18.14.1

在这里插入图片描述

你可以直接在nodejs官网下载指定版

Node.js — Download (nodejs.org)

也可以通过安装nvm下载指定的node版

nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 (uihtm.com)

安装`pnpm`

通过npm安装pnpm

npm install -g pnpm

验证pnpm安装是否成功及查看pnpm版本

pnpm -v

设置淘宝源

//查看源
pnpm config get registry 
//切换淘宝源
pnpm config set registry https://registry.npmmirror.com/

pnpm的安装与使用_pnpm安装-CSDN博客

通过`Vite`搭建`Vue`项目

pnpm create vite

输入你想要的项目名称

在这里插入图片描述

选择框架，这里选择Vue (通过键盘上下键选择，回车确定)

在这里插入图片描述

选择语言（这里选择javascript）
构建完成

接着按照提示进入刚刚建的项目文件夹cd vite-project-vue3，然后键入code .（vscode 自带的命令：用vscode打开当前文件夹）
下载资源包
```
pnpm install
```
运行当前项目
```
pnpm run dev
// or
pnpm dev
```
安装Element-plus
```
pnpm install element-plus
```
安装 | Element Plus (element-plus.org)