一、安装最新版：
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
按照操作提示新建一个模板项目。
运行 npx vite --help获取命令参数列表，如下
--host [host] [string]
指定主机名
--port <port> [number]指定端口
--https [boolean]使用 TLS + HTTP/2
--open [path] [boolean | string]启动时打开浏览器
--cors [boolean]启用 CORS
--strictPort [boolean]如果指定的端口已被使用，则退出
--force [boolean]强制优化器忽略缓存并重新捆绑
-c, --config <file> [string]使用指定的配置文件
-r, --root <path> [string]使用指定的根目录
--base <path> [string]公共基本路径（默认：/）
-l, --logLevel <level> [string]info | warn | error | silent
--clearScreen [boolean]记录时允许/禁用清除屏幕
-d, --debug [feat] [string | boolean]显示调试日志
-f, --filter <filter> [string]过滤调试日志
-m, --mode <mode> [string]设置环境模式
-h, --help显示此消息
-v, --version显示版本号
新建的项目目录结构大概如下这样：
和用 vue-cli 初始化的目录有两处不同：
index.html入口文件被移到了根目录下。官方解释是：在开发期间 Vite 是一个服务器，而index.html是该 Vite 项目的入口文件。
vite.config.js替代了vue.config.js，作为 vite 项目的配置文件。
{
"name": "vite-test",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build:vite2": "vite build --config vite2.config.js"
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}
从上面可以看出，使用 Vite初始化的 Vue项目，Vue 的版本已经是最新的 Vue3了。而开发时依赖也从 vue-cli/webpack 系列切换到了 vite 系列。
注意：vite 配置文件默认是在跟目录的vite.config.js,我们也可以自定义config,如上面配置的vite build --config vite2.config.js我自己配置了一份自定义名称的vite2.config.js
启动项目 npm run dev
冷启动，速度是真的快到飞起。这是因为在本地开发时，Vite 使用了 原生 ES 模块，所以期间没有涉及模块编译过程，节约了不少时间。f12可以看到代码都是没有经过编译的
html 中引入了 main.js，也就是我们这个项目的入口文件
从上面这张图可以看出，代码还是原生的 import，没有经过任何转译。
