Vue3入门第一步，Vite创建项目

基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。那下面开始体验vite的丝滑吧。

首先，安装vite,下文均以yarn为例

yarn global add vite

开始创建项目

yarn create vite vite-project --template vue-ts

参数解析

vite-vue-app：是项目的名称，根据自己的需要来定义

--template:指定模板的名称

其中支持的模板名如下：

• vanilla
• vanilla-ts
• vue
• vue-ts
• react
• react-ts
• react-swc
• react-swc-ts
• preact
• preact-ts
• lit
• lit-ts
• svelte
• svelte-ts
• solid
• solid-ts
• qwik
• qwik-ts

当然，也可以直输入

yarn cretate vite

然后根据提示，一步一步完成创建

执行完成后，进入到vite-project目录，在终端输入yarn dev，发现启动的过程几乎是瞬间完成的。

cd vite-project
yarn dev

创建完成之后，下面来看一下vite的常用配置

在命令行输入

yarn dev

也可以通过命令行，在package.json中配置，命令行的优先级是要大于配置的。

执行输出的信息

可以按照提示，可以做一些常用的操作

比如执行完yarn dev之后，需要打开浏览器，直接在英文输入的状态下，按下“o”然后敲回车，就会通过默认浏览器打开。

第一个项目就跑起来了