一、实验名称
搭建基于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时需要通过配置系统环境变量
