使用 Vite 创建项目
Vite 是由 Vue 作者尤雨溪先生带领团队开发的一个构建工具，它利用浏览器原生支持 ES 模块的特点，极大提升了开发体验，自 2021 年 1 月份发布 2.0 版本以来，发展非常快，笔者也在第一时间参与贡献了一些文档和插件，并且在 2021 年期间，个人项目已经全面切换到 Vite ，公司业务也在 2021 年底开始使用 Vite 创建新项目，整体情况非常稳定，前景非常乐观。
推荐以下这几种创建 Vite 项目的方式：Create Vite、Create Vue 和 Create Preset。
Create Vite
Create Vite 是 Vite 官方推荐的一个脚手架工具，可以创建基于 Vite 的不同技术栈基础模板。
运行以下命令创建模板项目，再按照命令行的提示操作（选择 vue 技术栈进入），即可创建一个基于 Vite 的基础空项目。
npm create vite
不过这个方式创建的项目非常基础，如果需要用到 Router 、 Vuex 、 ESLint 等程序，都需要再单独安装和配置，所以推荐使用 Create Preset。
Create Vue
Create Vue 是 Vue 官方推出的一个新脚手架，用以代替基于 Webpack 的 Vue CLI ，它可以创建基于 Vite 的 Vue 基础模板。
运行以下命令创建模板项目，然后根据命令行的提示操作即可。
npm init vue@3
Create Preset
Create Preset 是 Awesome Starter 的 CLI 脚手架，提供快速创建预设项目的能力，可以创建一些有趣实用的项目启动模板，也可以用来管理的常用项目配置。
简单使用
可以通过包管理器直接创建配置，然后按照命令行的提示操作，即可创建开箱即用的模板项目。
npm create preset
在这里选择 vue 技术栈进入，选择 vue3-ts-vite 创建一个基于 Vite + Vue 3 + TypeScript 的项目启动模板。
如果下载失败，可以通过
npm create preset proxy on开启加速镜像代理下载。
全局安装
也可以像使用 @vue/cli 一样，全局安装到本地，通过 preset init 命令来创建项目。
推荐全局安装它，用起来更方便，请先全局安装：
npm install -g create-preset
可以通过下面这个命令来检查安装是否成功，如果成功，将会得到一个版本号：
preset -v
然后可以通过 --template 选项直接指定一个模板创建项目，在这里使用 vue3-ts-vite 模板创建一个名为 hello-vue3 的项目：
preset init hello-vue3 --template vue3-ts-vite
常用的项目模板也可以绑定为本地配置，点击 Create Preset 官方文档 查看完整使用教程。
使用 @vue/cli 创建项目
如果不习惯 Vite ，依然可以使用 Vue CLI 作为开发脚手架。
和 Vite 的区别
Vue CLI 使用的构建工具是基于 Webpack。
更新 CLI 脚手架
请先全局安装，把脚手架更新到最新版本（最低版本要求在 4.5.6 以上才能支持 Vue 3 项目的创建）。
npm install -g @vue/cli
使用 CLI 创建 3.x 项目
Vue CLI 全局安装后，可以在命令行输入 vue 进行操作，创建项目使用的是 create 命令：
vue create hello-vue3
由于要使用 TypeScript ，所以需要选择最后一个选项来进行自定义搭配，通过键盘的上下箭头进行切换选择：
Vue CLI v5.0.4
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
多选菜单可以按空格选中需要的依赖，总共选择了下面这些选项：
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select,
<a> to toggle all, <i> to invert selection, and <enter> to proceed)
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
选择 Vue 版本，要用 Vue 3 所以需要选择 3.x ：
? Choose a version of Vue.js that you want to start the project with
(Use arrow keys)
> 3.x
2.x
是否选择 Class 语法的模板，在 Vue 2 版本为了更好的支持 TypeScript ，通常需要使用 Class 语法，由于 Vue 3 有了对 TypeScript 支持度更高的 Composition API ，因此选择 n ，也就是 “否” ：
? Use class-style component syntax? (y/N) n
Babel 可以把新版本的 JavaScript 语句转换为兼容性更好的低版本 Polyfill 写法，所以选 y 确认使用：
? Use Babel alongside TypeScript
(required for modern mode, auto-detected polyfills, transpiling JSX)?
(Y/n) y
接下来是选择路由模式，选 y 启用 History 模式，选 n 使用 Hash 模式，可根据项目情况选择。
建议先选 y 确认，如果遇到部署的问题可以在 “路由” 一章的 部署问题与服务端配置 小节查看如何处理。
? Use history mode for router?
(Requires proper server setup for index fallback in production)
(Y/n) y
选择一个 CSS 预处理器，可以根据自己的喜好选择，不过鉴于目前开源社区组件常用的都是 Less ，所以也建议选择 Less 作为入门的预处理器工具。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
Sass/SCSS (with dart-sass)
> Less
Stylus
Lint 规则，用来代码检查，写 TypeScript 离不开 Lint ，可以根据自己喜好选择，也可以先选择默认，后面在 添加协作规范 一节也有说明如何配置规则，这里先默认第一个：
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Lint 的校验时机，一个是在保存时校验，一个是在提交 commit 的时候才校验，这里也选默认：
? Pick additional lint features: (Press <space> to select,
<a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
( ) Lint and fix on commit
项目配置文件，笔者更习惯保存为独立文件：
? Where do you prefer placing config for Babel, ESLint, etc.?
(Use arrow keys)
> In dedicated config files
In package.json
是否保存为未来的项目配置，存起来方便以后快速创建：
? Save this as a preset for future projects? Yes
? Save preset as: vue-3-ts-config
至此，项目创建完成！可以通过 npm run serve 开启热更进行开发调试，通过 npm run build 构建打包上线。