Vite是Vue的译者尤雨溪合作开发的Web合作开发构筑辅助工具，它是两个如前所述应用程序原生植物ES组件引入的合作开发伺服器，在合作开发自然环境下，借助应用程序去导出import，在伺服器端按需校对回到，全然埃唐佩县了装箱那个基本概念，伺服器随启进料。与此同时不但对Vue文档提供更多了全力支持，还全力支持热预览，所以热预览的速率无法随著组件激增而减慢。在制造自然环境下采用Rollup装箱。
Vite具备下列特征：
加速的UAC即刻热组件预览（HMR，Hot Module Replacement）或是说按需校对Vite是在面世Vue 3的这时候合作开发的，现阶段仅全力支持Vue 3.x，这意味著与Vue 3不相容的库也无法与Vite一同采用。
采用Vite
与Vue CLI类似于，Vite也提供更多用npm或是yarn来聚合工程项目内部结构的形式。优先选择两个产品目录，关上指示提示信息询问处，依序继续执行上面的指示构筑钢架工程项目，并开启工程项目。
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
例如，创建的工程项目名为hello，继续执行完最后两个指示的结果如下图所示。
开启工程项目由于Vite采用了应用程序原生植物的ES组件引入功能，但IE 11并不全力支持ES的组件引入，因此如前所述Vite合作开发工程项目，应用程序无法采用IE11，其他主流的应用程序均全力支持ES组件的组件功能。
关上Chrome应用程序，访问http://localhost:3000/，界面如下图所示。
hello项目的默认页面采用Vite聚合的工程项目内部结构如下图所示。
hello工程项目的产品目录内部结构可以发现，Vite聚合的钢架工程项目的产品目录内部结构与Vue CLI聚合的工程项目产品目录内部结构很类似于，确实是这样的，所以合作开发形式也基本相同。不过Vite工程项目的默认配置文档是vite.config.js，而不是vue.config.js。
package.json文档的内容如下所示：
{
“name”: “hello”,
“version”: “0.0.0”,
“scripts”: {
“dev”: “vite”,
“build”: “vite build”
},
“dependencies”: {
“vue”: “^3.0.2”
},
“devDependencies”: {
“vite”: “^1.0.0-rc.8”,
“@vue/compiler-sfc”: “^3.0.2”
}
}
如果要构筑制造自然环境下应用的发布版本，只需要在终端询问处中继续执行上面的指示即可：
npm run build
虽然Vite的译者已经在背后做了很多工作，让我们能够沿用如前所述Vue CLI建立的钢架工程项目的合作开发习惯，但仍然会有一些细微的差别，详细的如是说请参看Vite源码库的GitHub网址。
与Vue CLI的不同
主要区别在于，对于Vite，在合作开发过程中没有捆绑。源代码中的ES Import语法直接提供更多给应用程序，应用程序通过原生植物的<script module>全力支持导出这些语法，并为每次引入发起HTTP请求。dev伺服器拦截请求，并在必要时继续执行代码转换。例如，引入到*.vue文档的内容在发送回应用程序之前被即刻校对。
这种方法有几个优点：
因为没有装箱工作要做，所以伺服器UAC非常快。代码是按需校对的，因此只有在当前页面上实际引入的代码才会校对。我们不必等到整个应用程序装箱后才开始合作开发，这对于有几十个页面的应用程序来说是两个巨大的不同。热组件预览（HMR）的性能与组件总数解耦。这使得无论应用程序有多大，HMR都能保持加速。整个页面的重新加载可能比如前所述绑定包的设置稍慢，因为本机ES引入会导致具备深度引入链的网络瀑布。但是，由于这是本地合作开发，所以与实际校对时间相比，差异是很小的。由于已校对的文档缓存在内存中，因此在页面重新加载时没有校对开销。
简单来说，就是采用Vite来合作开发Vue 3工程项目可以减少不必要的等待工程项目重启或组件预览的时间，加快合作开发进度。在聚合自然环境下，我们依然是需要对工程项目进行装箱的，以避免频繁的网络请求，Vite也提供更多了两个vite build来实现这一点，我们在终端询问处中继续执行npm run build，实际继续执行的就是vite build指示。
我是专注于软件合作开发和IT教育的孙鑫老师，喜欢我的文章欢迎转发、评论、关注、点赞和收藏，我会经常与大家分享IT技术、编程语言的文章和教学视频。现阶段已发布完整的《Vue.js从入门到实战》教学视频，正在发布《Java无难事》教学视频。
Vue.js从入门到实战
