通过脚手架Vite创建Vue 3项目【实验二】

 Vite 官网：https://cn.vitejs.dev

 Vue 3的中文官网：https://cn.vuejs.org

 pnpm官网：https://pnpm.io/zh

Vite 是Vue官方推荐的搭建Vue项目的脚手架工具.

Vue.js 简称为 Vue ， 是一套用于构建用户界面的 渐进式Web前端框架， 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 3是2020年推出的最新版本，和上一个版本Vue 2相比，在功能和性能上都有了较大的改进。

  pnpm常用命令：

pnpm install /pnpm i 安装package.json中设置的全部依赖包
pnpm run xxx 运行package.json中scripts脚本
pnpm add xxx 安装依赖包到dependencies
pnpm add -D xxx 安装依赖包到devDependencies
pnpm update xxx/pnpm up xxx 更新依赖包
pnpm remove xxx 删除依赖包

步骤：

1. 安装一个基于 Chrome V8 引擎的 JavaScript 运行时Node.js。
2. 在命令行窗口中输入npm -v查看npm的版本号。
3. 在命令行窗口中输入npm i -g pnpm全局安装pnpm包管理工具。
4. 在命令行窗口中进入要创建 Vue 项目的文件夹，输入 pnpm create vue 创建 Vue 项目，当出现“Project name:”提示时输入项目名位 myweb 并回车。 当出现“Add TypeScript?”提示时选择 Yes，在项目中添加 TypeScript 支持。 当出现“Add ESLint for code quality?”提示时选择 Yes，添加代码校验插件。 当出现“Add Prettier for code formatting?”提示时选择 Yes，添加代码格式 化插件。其它都选 No.
5. 输入cd myweb进入项目目录，输入pnpm install安装packge.json中配置的所有依赖包。
6. 输入pnpm add axios添加可以发送异步请求的Axios包。
7. 输入pnpm add -D mockjs vite-plugin-mock cross-env添加用于模拟后端数据的三个包。
8. 在Windows的菜单中找到Windows PowerShell菜单项，单击右键选择“以管理员身份运行”，在打开的窗口中输入set-executionpolicy remotesigned，当出现输入提示时输入Y。这样，在vs code中就可以执行pnpm的命令了。
9. 在创建项目的命令行窗口中（已经进入到myweb目录）输入code .用vs code打开当前项目。
10. 在vs code中选择：终端->新建终端，打开终端窗口，在终端窗口中输入pnpm dev启动当前项目，启动成功后按住Ctrl键，点击http://localhost:5173/，在浏览器中查看项目的首页。
11. 在vs code中查看项目结构。