vite初使用随记

vite的安装

按照官网文档来看，并不难。

先检查自己电脑node的版本与npm的版本/yarn的版本

可以直接用yarn安装，yarn create vite 这是最原始的安装，即类似于安装vue-cli一样会出现选项配置。

官方文档还给出了其他更便捷的安装方法，有需求可以去看 网址：https://vitejs.cn/guide/#scaffolding-your-first-vite-project

但与vue脚手架不同的是，vite不在带有vuex的安装与router的安装（需要自行安装依赖）

选择三个配置

• 项目名
• 框架（vue react或其他）
• 使用js还是ts

创建项目很快，然后进入项目目录

项目结构不同点：

• index.html不在public里面，而是移出来了，这里官网给出的答案是：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。
• vite.config.js 配置文件的变化，
  
  

因为我用的是vite2.0 ,Vite 2.0 core 现在与框架无关。所以现在通过@vitejs/plugin-vue这个插件来支持Vue。

defineConfig 为帮手函数，这样不用jsdoc注解也可以获取类型提示。

具体其他配置可参考官方文档。

项目使用体验不同点

我们可以看到启动项目只需要1.2s左右，是脚手架速度的100倍！

可以在配置文件中开启或禁止 hmr

HMR：Hot Module Replacemant模块热替换。在webpack的定义是：在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

不过现在还是不想轻易的使用vite来进行下一步项目的构建。vite虽然启动快，但如果依赖过多的话，首屏加载会有一丢丢慢