Vite快速上手

Vite快速上手

快速上手

Vite官方目前提供了一个比较简单的脚手架：create-vite-app，可以使用这个脚手架快速创建一个使用Vite构建的Vue.js应用。

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

如果使用yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

P.S.

npm init或者yarn create是这两个包管理工具提供的新功能。

其内部就是自动去安装一个create-的模块（临时），然后自动执行这个模块中的bin。

例如：

yarn create react-app my-react-app就相当于先yarn gloable add create-react-app，然后自动执行create-react-app my-react-app

对比差异点

打开生成的项目，会发现就是一个很普通的Vue.js应用，没有太多特殊的地方。

不过相比于之前vue-cli创建的项目或者是基于Webpack搭建的Vue.js项目，这里的开发依赖非常简单，只有vite和@vue/compiler-sfc.

Vite带来的优势主要体现在提升开发者在开发过程中的体验。

• Dev Server无需等待，即时启动
• 几乎实时的模块热更新
• 所需文件按需编译，避免编译用不到的文件
• 开箱即用，避免各种Loader和Plugin的配置

Vite的由来

• 如果应用比较复杂，使用Webpack的开发过程相对比没有那么丝滑。
• Webpack Dev Serve冷启动时间会比较长
• Webpack HMR热更新的反应速度比较慢