既然是第一次使用vite搭建项目,最正确且直接的方式当然是阅读 vi特官网(Getting Started | Vite)或者vite中文网(为什么选 Vite {#why-vite} | Vite中文网),官网虽然是英文的,如果小伙伴英语不好也没关系,谷歌浏览器翻译一下也是可以的,ok,那我们现在开始吧!一切以官网为准!!!
一、搭建第一个 Vite 项目
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
这里我使用的是nvm-windows来进行动态切换node版本,好处就是针对不同的项目可以快速切换node版本。Nvm,Nrm使用详解_前端菜菜DayDayUp的博客-优快云博客
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
然后按照提示操作即可!
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
这里我使用的 npm 来创建一个vue+ts的项目 (这里我使用Windows)
-
在我们想要创建的项目都目录下打开终端(命令行工具)
-
按步骤进行一下操作:键盘上下↕️移动,选择要创建的项目模板
3. 此时我们依次执行上面三条命令,就一个简单的项目就创建并启动了。