基于vite创建一个脚手架（快速入门）

Vite是一种新型的前端构建工具，主要用于构建现代化的Web应用程序。以 原生ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

一、Node.js下载与安装

1、打开Node,js官网（https://nodejs.org），点击下载按钮，一般下载后npm会自动安装，若npm没有自动安装，则手动到官网（https://www.npmjs.com）下载。

Node.js 是一个开源的、跨平台的 JavaScript 运行环境（本质是Chrome引擎的封装）,允许开发者使用 JavaScript 来编写服务器端代码
npm(Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具

 下载后打开安装包一直点next即可。下载完成后可在终端输入node -v查看Node.js版本，npm -v查NPM（Node包管理器）版本，确保安装成功且知晓版本信息。

 二、镜像源的修改

利用npm get registry可在终端查看当前镜像源，默认镜像源是国外网址，国内访问经常失败，所以可以设置淘宝镜像源（npm config set registry https://registry.npmmirror.com/）。

这样则下载好了Node.js和npm，但我们在后续写脚手架选择了pnpm。

npm与pnpm的区别

 

1、npm和pnpm都是JavaScript的包管理工具。

2、npm是Node.js的默认包管理器，它的工作方式比较直接。当安装一个包时，会在项目的node_modules文件夹下嵌套地复制每个依赖包，这可能导致相同版本的包被重复安装，占用较多磁盘空间。比如，项目依赖A和B，A和B又都依赖相同版本的C，那么C会在node_modules下有两份。

3、pnpm则采用了一种更节省空间的方式。它通过硬链接和符号链接来存储依赖包，所有相同版本的包在磁盘上只会存储一份。并且它在安装速度上可能更快，这是因为避免了大量重复的文件操作。例如，同样是A和B依赖相同版本C的情况，pnpm只会在一个地方存储C，然后通过链接的方式让A和B都能使用。

 三、基于pnpm和vite创建Vue3项目

1、安装pnpm工具包

选择想要存放脚手架的文件夹，打开终端（在路径处输入“cmd”打开终端）

执行 npm install -g pnpm下载pnpm工具包

2、创建脚手架：pnpm create vue 

3、修改项目名称，这里我选择默认项目名称（vue-project） 

4、配置脚手架相关插件

 5、执行以下指令

• cd vue-project
• pnpm install
• pnpm format
• pnpm dev

执行后复制“http://localhost:5173/”，打开网站

这样就创建好了一个脚手架！

通过visual Studio Code软件打开刚刚创建的文件夹。

在这个脚手架中有许多的文件，以下标红的均为重点（部分文件未写出来） 

 

在这些文件夹中，src是主要的开发目录

其中assets一般用于存放图片；components用于存放组件， 在components文件夹下面，以.vue文件形式存在，而这些组件用于构建用户界面；style.css一般用于存放样式，用于定义项目的外观等。

大家可以根据这些步骤创建一个脚手架，后续也会讲解如何创建一个属于自己的脚手架

四、网页无法访问

或许有人会遇到这样的问题，在重新打开创建好的脚手架的网址时会显示无法访问。

这是为什么呢？是因为运行在终端中的开发服务器被关闭了。

1、脚手架工具创建的项目，在开发阶段通常依赖一个本地开发服务器来提供网页服务。这个服务器在终端中通过特定的命令（比如pnpm run dev）启动。当你关闭终端，就相当于终止了这个服务器进程。

2、要让网址能够正常显示，你需要在存放脚手架的文件夹中打开终端（cmd），然后再次运行启动开发服务器的命令（cd vue-project、pnpm install、pnpm format、pnpm dev）。这样，开发服务器重新启动，就可以正常访问项目对应的网址了。