持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 14 天，点击查看活动详情
前言
我们之前都是不用脚手架来完成我们的项目的，并且学习了 compositionApi 的基本用法。 那么接下来我们要通过脚手架创建 vue3 项目，来继续深入学习 vue3 相关的知识。
创建 vue3 项目的方式
目前创建 vue3 的项目方式比较多：
- vue-cli 创建 vue3 项目
- vite 创建 vue3 项目
- create-vue 创建 vue3 项目
那么接下来我们分别介绍下这三种创建方式。
vue-cli 创建 vue3 项目
- vue-cli 是基于 webpack 来创建项目
- 通过 npx 安装 vue-cli
- 通过 npx 安装的好处是临时使用一些库，每次都会使用最新版本，不会将库安装在本地，节省资源
- 缺点是每次都要临时下载
- 我们后面不会使用这种创建方式，所以临时使用一下就可以了
npx @vue/cli create project-demo
- 这里的
@vue/cli是脚手架库，npx 下载之后相当于命令前缀 - 此段命令相当于
vue create project-demo - 执行成功之后，会让我们选择默认 vue2 或者 vue3 的模版或者自定义模版
- 我们选择自定义模版
- 这里可以选择我们是否要配置一些插件
- 选择完插件，会让我们选择是使用 vue3 还是 vue2，我们这里当然选择 vue3 啦
然后会让你选择是否使用 class 形式的组件 是否使用 babel 处理 ts，jsx 之类的
我们都直接跳过就行了，后面就可以运行创建项目了。
vite 创建 vue3 项目
- 通过 vite 官网的介绍，我们可以通过 vite 创建各种各样的项目（后面会讲），我们这里直接执行创建就好了。
- 我这里使用 pnpm 创建项目，大家可以选择其他包管理器进行项目创建。
pnpm create vite
- 首先需要先输入项目名称
- 然后选择框架语言，到这里你会发现，我们可以基于 vite 创建多种语言的项目
- 我们选择 vue
- 这里的 vue 是 vue3，使用 vite 创建项目就没有 vue2
- 如果想基于 vite 创建 vue2 项目，可以查找相关的社区模版
- 然后会询问是创建 vue3+js 还是 vue3+ts 的项目，我们可以先选择 vue3+js 的项目
- 选择完以后我们的项目就创建好了。
create-vue 创建 vue3 项目
- 最后一种也是我最推荐大家使用的一种，这个库也是官方进行维护的，所以使用起来无烦恼，yyds。
- 执行方式也是比较简单的，我们可以基于 vite 创建 vue3 或者 vue2 的项目
npm init vue@3
npm init vue@2
询问是否需要安装，填y
- 依次填写和选择下列选项
✔ Project name: … vue3-train 项目名称
✔ Add TypeScript? … Yes 是否使用ts
✔ Add JSX Support? … Yes 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? … No 是否使用vue-router
✔ Add Pinia for state management? … Yes 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? … Yes 是否使用eslint
✔ Add Prettier for code formatting? … Yes 是否使用prettier
- 选择完以后就创建成功了