vite学习（一）：vite初体验

概念

vite是一个轻量级的http服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。以及一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

安装并基于vite2创建项目

以npm为例

npm init @vitejs/app

输入你要创建的项目名称，回车 

选择要创建的项目框架，我们这里选择vue，回车

选择vue项目语言，默认为js，可选这ts，我们选择js，回车 

 这样一个基于vite2的vue3项目便创建成功了，切换到项目中安装依赖，启动项目。

cd <project-name>

npm install

npm run dev

基于vite创建的vue3项目及结构，需要注意的是，基于vite创建的vue3项目，index.html文件由public文件夹移入到了项目根目录中，配置文件由vue.config.js替换成了vite.config.js。

 

使用npm run dev启动项目，可见使用vite的项目启动速度极快，仅需329ms，这也是vite目前最大的优势之一。

vite2相对于vite1的主要变化

（1）配置选项变化：vue特有选项、创建选项、css选项、jsx选项等

（2）别名行为变化：不再要求/开头或结尾

（3）vue支持：通过@vitejs/plugin-vue插件支持

（4）HMR API变化

（5）清单格式化变化

（6）插件API重新设计