携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

使用vite项目模板

• create-vite 是一个快速生成主流框架基础模板的工具。
• 我们通过一下命令来创建vite项目

npm create vite@latest

• 首先输入项目名称
• 然后，vite 默认给开发者提供了6种开发模板来进行选择
  • vanilla - 无框架模板
  • vue - vue项目模板
  • react - react项目模板
  • preact - 轻量化react项目模板
  • lit - Web组件构建库项目模板
  • svelte - svelte项目模板
• 选完项目模板会让开发者选择是否需要ts，加-ts就是安装ts的版本
• 最后项目就创建完成了，就是这么简单

社区模板

• 除了使用vite提供的默认项目模板，我们也可以在 Awesome Vite 仓库中，找一些社区维护的模板，里面包含各种工具和不同框架的模板，我们可以找到合适的项目，直接 fork 下来进行使用。
• 比如：我是以vue为主要开发框架的，目前vue2项目开发比较多，我们就可以直接找到 vite-vue2-simple-starter 这个基础的vue2项目模板，clone下来直接使用。

npm init

• 有一些框架组织或者社区，给我们提供了更为方便、标准的框架模板，比如现在大火的vue3，官方给提供了，npm init的方式来创建vue3的项目，默认使用vite作为构建工具
• 执行以下命令

npm ini vue@3

• 因为我们是执行远程构建命令的，所以执行命令之后，会让我们选择是否下载，我们选择是。
• 然后输入项目名称。
• 再然后，会让我们选择是否需要集成typeScript、JSX、vue-router、pinia等工具。

Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Project name: ... v
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes

• 这些工具可以帮助我们更好的初始化搭建项目。
• 除了vue3，其他框架也有对应的一些命令，这里就不一一介绍了，大家可以自行查阅下相关资料。

总结

这一节，我们介绍了下vite如何来创建项目，以及使用npm init来创建vue3项目，希望大家可以很零活的使用vite来创建项目。