本项目搭建使用的是 create-vue 官方脚手架工具进行构建。

环境要求：

• Node.js 版本要求在16以上，可以直接在官网下载最新版的Node.js，Node官网下载地址。
• cnpm 工具安装
  • 简介：cnpm工具提供了完整的npm功能，且因为其使用的是国内镜像进行安装，所以在安装和下载速度上会有很大的提升，方便我们的后续依赖包的安装与使用。
  • cnpm安装方法：npm install -g cnpm --registry=https://registry.npm.taobao.org，使用淘宝的镜像源去全局安装cnpm。
• npm设置淘宝镜像源
  • 通过给npm设置国内镜像源也可以达到和cnpm工具一样的效果，比较方便
  • 命令为：npm config set registry <https://registry.npm.taobao.org> ，用于设置淘宝镜像源
  • npm config list 查看当前的npm的配置信息，如仓库源、全局包安装地址等。

Vue项目搭建：

1. 打开cmd，进入想要创建Vue项目的目录，运行下列命令：

npm init vue@latest

此命令实际上会安装并执行 **create-vue，**这是Vue的一个官方的脚手架工具。

1. 安装并初始化完成后，会自动开始创建项目的准备中：

✔ Project name: … <your-project-name>    # 项目名称
✔ Add TypeScript? … No / Yes    # 是否添加TS文件
✔ 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 an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

刚开始学习的话，只用输入项目名称，其他的可以暂且无视掉。

1. 使用cd命令，进入到刚创建好的项目目录内，并使用cnpm命令安装依赖后运行项目。

cd vue项目目录     # 进入项目目录
cnpm install      # 开始安装依赖
npm run dev       # 安装完成之后，就可以开始运行Vue项目

1. 运行成功后，就可以通过网址去访问刚创建好的Vue项目了。

# 示例说明
VITE v4.4.7  ready in 535 ms

  ➜  Local:   **<http://localhost:5173/>   # 访问网址**
  ➜  Network: use --host to expose
  ➜  press h to show help