2022年最新Vue3搭建教程

前言

2021年8月5日，Vue正式发布3.2版本，同时，Vue的作者尤雨溪还在个人微博称：“ < script setup > + TS + Volar = 真香 ”；2022年1月22日，Vue官方宣布Vue3成为了新的默认版本。
如今的Vue3已经势不可挡，当然，搭建一个全新的Vue3项目也有了全新的方式，今天就带大家熟悉一下Vue3项目的全新搭建方式。

先决条件

• 熟悉命令行
• 安装node.js

搭建过程

找到一个你想要创建Vue项目的目录（本文以D:\i-work为例）。在此目录打开命令行，输入以下命令：

npm init vue@latest

回车，如果是第一次用这种方式创建Vue3项目，命令行会提示安装 create-vue 包，如下图：

输入【y】，确认安装。安装完成后会自动进入Vue项目创建，如下图：

接下来会让我们依次输入以下几个问题的答案，帮助创建项目：

1. Project name：项目名称，默认值：vue-project，可输入想要的项目名称，此处不建议中文。
2. Add TypeScript? 是否加入TypeScript组件？默认值：No。
3. Add JSX Support? 是否加入JSX支持？默认值：No。
4. Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
5. Add Pinia for state management? 是否添加Pinia组件来进行状态管理？默认值：No。
6. Add Vitest for Unit testing? 是否添加Vitest来进行单元测试？默认值：No。
7. Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试？默认值：No。
8. Add ESLint for code quality? 是否添加ESLint来进行代码质量检查？默认值：No。
   

完成以上步骤，一个全新的Vue3项目就创建好了。
接下来可以按照提示，启动项目。

cd vue-demo
npm install
npm run dev

在ide中启动项目

在VCSode中打开刚创建的Vue项目目录，如下图：

打开终端，输入以下指令：

npm install

稍等片刻，待所有的包安装完成后，在终端输入以下指令：

npm run dev

看到以上提示，项目启动成功。
打开浏览器，在地址栏输入 http://localhost:3000 即可打开项目。全新的Vue3初始页面，如下图：

到此为止，我们的Vue3项目就搭建完成了。新建的Vue3项目目录结构如下图：