搭建基于Vue 3的前端项目

一、 实验名称

搭建基于 Vue 3 的前端项目。

二、 参考资料

《Vue 3 官方网站：https://cn.vuejs.org》、《Axios：https://www.axios-http.cn》、《Mock.js：http://mockjs.com》和第二章课件。

三、 实验目的

1.      练习 pnpm 工具的使用。

2.      练习 Vue 项目依赖包的安装方法。

3.      练习使用 vs code 开发基于 Vue 的前端项目。

四、 实验内容

1.  在命令行窗口中输入 npm - v 查看 npm 的版本号，如果不能执行该命令，请安装 node。

2.  在命令行窗口中输入 npm i -g pnpm 全局安装 pnpm 包管理工具。

3.  在命令行窗口中进入要创建 Vue 项目的文件夹，输入 pnpm create vue 创建 Vue 项目，当出现“Project name:”提示时输入项目名位 szweb 并回车。当出现“Add TypeScript?”提示时选择 Yes，在项目中添加 TypeScript 支持。当出现“Add ESLint for code quality?”提示时选择 Yes，添加代码校验插件。当出现“Add Prettier for code formatting?”提示时选择 Yes，添加代码格式化插件。其它都选 No，如下图所示：

4. 输入 cd szweb 进入项目目录，输入 pnpm install 安装 packge.json 中配置的所有依赖包。

5. 输入 pnpm add axios 添加可以发送异步请求的 Axios 包。

6. 输入 pnpm add -D mockjs vite-plugin-mock cross-env 添加用于模拟后端数据的三个包。

7. 在 Windows 的菜单中找到 Windows PowerShell 菜单项，单击右键选择“以管理员身份运行”，在打开的窗口中输入 set-executionpolicy remotesigned，当出现输入提示时输入 Y。这样，在 vs code 中就可以执行 pnpm 的命令了。

8. 在创建项目的命令行窗口中（已经进入到 szweb 目录）输入 code . 用 vs code 打开当前项目。

9. 在 vs code 中选择：终端 -> 新建终端，打开终端窗口，在终端窗口中输入 pnpm dev 启动当前项目，启动成功后按住 Ctrl 键，点击 http://localhost:5173/，在浏览器中查看项目的首页。

10. 在 vs code 中查看项目结构。

按照实验任务书的要求完成以下实验报告：

一、程序代码

二、实验结果（含程序运行截图）

1. 在命令行窗口中输入 npm - v 查看 npm 的版本号，如果不能执行该命令，请安装 node。

2. 在命令行窗口中输入 npm i -g pnpm 全局安装 pnpm 包管理工具。

3. 在命令行窗口中进入要创建 Vue 项目的文件夹，输入 pnpm create vue 创建 Vue 项目，当出现“Project name:”提示时输入项目名位 szweb 并回车。当出现“Add TypeScript?”提示时选择 Yes，在项目中添加 TypeScript 支持。当出现“Add ESLint for code quality?”提示时选择 Yes，添加代码校验插件。当出现“Add Prettier for code formatting?”提示时选择 Yes，添加代码格式化插件。其它都选 No，如下图所示：

4. 输入 cd szweb 进入项目目录，输入 pnpm install 安装 packge.json 中配置的所有依赖包。

5. 输入 pnpm add axios 添加可以发送异步请求的 Axios 包。

6. 输入 pnpm add -D mockjs vite-plugin-mock cross-env 添加用于模拟后端数据的三个包。

7. 在 Windows 的菜单中找到 Windows PowerShell 菜单项，单击右键选择“以管理员身份运行”，在打开的窗口中输入 set-executionpolicy remotesigned，当出现输入提示时输入 Y。这样，在 vs code 中就可以执行 pnpm 的命令了。

8. 在创建项目的命令行窗口中（已经进入到 szweb 目录）输入 code . 用 vs code 打开当前项目。

9. 在 vs code 中选择：终端 -> 新建终端，打开终端窗口，在终端窗口中输入 pnpm dev 启动当前项目，启动成功后按住 Ctrl 键，点击 http://localhost:5173/，在浏览器中查看项目的首页。

10. 在 vs code 中查看项目结构。

三、出现问题及解决方法

问题 1：第八点，在创建项目的命令行窗口中（已经进入到 szweb 目录）输入 code . 用 vs code 打开当前项目，在命令行窗口输入 code . 时，系统无反应

解决方法：直接在 vs code 中选择菜单 -> 文件 -> 打开文件夹 -> 选择刚刚新建的 szweb 文件夹即可

四、实验心得

        在安装 node 以及 vs code 时需要通过配置系统环境变量