创建vue3项目脚手架

使用 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 构建打包上线。