使用 vite 从 0 开始搭建vue项目

既然是第一次用vite搭建项目，最正确的姿势当然是阅读vite官网的说明，虽然是英文的，如果英文不好也没关系，浏览上谷歌翻译一下也是可以的。废话少说，我们开始吧。

一、创建项目

这里根据vite的兼容性说明，要求node.js版本>=12.0.0

提供了npm,yarn,两种包管理工具的创建方式

用NPM：

npm init @vitejs/app
复制代码

使用yarn：

yarn create @vitejs/app
复制代码

然后按照提示进行操作！

这里我们使用yarn来创建一个vue项目（这里我使用的Mac，与PC步骤基本一致）

0. 在我们想要创建的项目都目录下打开终端（命令行工具）

1. 输入如下命令

   // Mac  其中sudo是获取系统权限的标识
   sudo yarn create @vitejs/app
   ​
   // PC
   yarn create @vitejs/app
   复制代码

   我这里使用了sudo，所以要输入开机密码，输入之后回车，这里终端显示安装依赖，提示我们输入项目名称

   

2. 输入项目名称vite-vue，回车

   

3. 键盘上下↕️移动，选择要创建的项目模板，这里我们选择vue并回车

   

4. 此时我们依次执行上面三条命令，就一个简单的项目就创建并启动了。

这里我自己还使用了另一种包管理工具pnpm，来管理依赖包

原因是：pnpm安装依赖的包的速度远远快于npm、yarn，也是偶然看到公众号的推文，试了一下，果然真香。

想要了解原理的同学，可以看苍青浪的为什么现在我更推荐 pnpm 而不是 npm/yarn?，也可以去pnpm官网查看

创建项目的步骤1、2、3都一样，从第四步开始不一样

4. 使用pnpm install安装依赖

   pnpm install
   复制代码

5. 运行项目

   pnpm dev
   复制代码

这样就使用了pnpm的包管理工具安装依赖，至于依赖的安装，pnpm类似于yarn，使用pnpm add 依赖包名称，具体的更多命令大家就看一下官网，使用起来和npm、yarn都是类似的。

总结：

之前在看winter采访尤大的时候，尤大就提到在打磨vite，vite的打包速度会非常的快，今天试过之后确实真香，还内置了热部署等功能，非常好用；至于提到的pnpm，也是一个体验非常好的包管理工具，真的香。

Find me

微信公众号：heyhaiyang

掘金：heyhaiyang

博客园：heyhaiyang

头条号：heyhaiyang