Vue框架应用实战项目式教程 课件 务1 “就业职通车”项目初始化.pptx

1“就业职通车”项目初始化任务1框架技术应用

CONTENTS目录04/05/任务分析任务陈述01/02/项目背景学习目标07/08/任务总结知识链接06/任务实施03/任务规划09/课后练习

学习目标开发环境搭建是项目开始的第一步，在企业项目工作中，需要大家拥有快速搭建项目环境的能力。本章节将带领大家搭建与配置开发环境、使用Vite工具创建Vue3项目，并完成Vue项目的初始化部署。

学习目标【知识目标】了解Vue框架；掌握Vue开发环境的安装。【技能目标】能够搭建Vue开发环境。【素质目标】培养细致严谨的工作态度。

项目背景Vue是一款友好的、多用途且高性能的JavaScript框架，Vue繁荣的生态圈提供了大量成熟的项目解决方案。使用Vue可以更快、更高效的开发项目，因此它被广泛应用于Web前端、移动端、跨平台应用的开发，使用场景十分广泛。本项目主要开发“就业职通车”网站，该网站是一个面向高校应届毕业生的就业网，实现了招聘信息浏览和发布、就业指导文章阅览、名企介绍等功能，以推动应届毕业生更充分更高质量的就业。

任务规划本任务要求搭建与配置开发环境、使用Vite工具创建Vue3项目，并使用Vue3框架实现“就业职通网”项目布局与样式。首页效果如图1-1所示。图1-1“就业职通网”效果图

任务1.1Vue环境配置【任务陈述】本任务要求配置Vue项目所必需的开发环境，并初始化Vue项目。具体任务目标如下：?配置Vue项目所必须的开发环境，包括Node.js环境、VisualStudioCode开发工具、Vite工具等；?在“:5173”地址中渲染Vue初始化项目，项目效果如图1-2所示。图1-2Vue项目渲染效果图

任务1.1Vue环境配置【任务分析】该任务要求搭建Vue项目所必须的环境，并初始化和渲染项目。具体任务实施流程如图1-3所示。图1-3任务实施流程图

任务1.1Vue环境配置【任务实施】步骤一.安装Node.JS环境。Node.js是一个开源的、跨平台的JavaScript运行时环境，Node.js具有独特的优势。打开Node.JS官网下载页面,如图1-4所示根据个人系统情况下载不同版本的Node.JS，本案例中以Windows系统上下载和安装Node.JS为例。图1-4Node.JS官网下载页

任务1.1Vue环境配置【任务实施】双击下载后的安装包，单击“Run”按钮进行环境安装，如图1-5所示。图1-5Node.JS安装

任务1.1Vue环境配置【任务实施】勾选“接受用户协议(IacceptthetermsintheLicenseAgreement)”复选框，单击“Next”按钮,如图1-6所示。图1-6勾选用户协议选项

任务1.1Vue环境配置【任务实施】如图1-7所示，Node.JS默认安装目录为“C:\ProgramFiles\nodejs”，你可以修改目录，并单击“Next”按钮。图1-7选择安装路径

如图1-8所示，单击树形图标来选择你需要的安装模式，然后单击“Next”按钮。图1-8选择需要安装的功能选项任务1.1Vue环境配置【任务实施】

任务1.1Vue环境配置【任务实施】如图1-9所示，单击“Install”按钮开始安装Node.js。你也可以单击“Back”按钮来修改之前的配置。然后单击“Next”按钮，安装完成后单击“Finish”按钮退出安装向导。图1-9Node.JS安装与结束

任务1.1Vue环境配置【任务实施】安装完成之后，检测PATH环境变量是否配置了Node.js。在桌面单击“开始”—“运行”选项，在“运行”窗口中输入“cmd”命令，单击“确定”按钮，在弹出的命令窗口中输入“path”命令，按回车键输出如下结果：上面输出结果为本机环境变量的配置，我们可以看到环境变量中已经包含了C:\ProgramFiles\nodejs\，说明环境变量在Node.js安装的过程中已经配置成功。

任务1.1Vue环境配置【任务实施】最后检测Node与npm版本号。在桌面单击“开始”—“运行”选项，在“运行”窗口中输入“cmd”命令，单击“确定”按钮，在弹出的命令窗口中分别输入“node-v”和“npm-v”命令后，输出如图1-10结果，说明Node.js和npm环境安装成功。图1-10Node.JS和npm版本检测

任务1.1Vue环境配置【任务实施】图1-11VSCode官网首页步骤二.安装VisualStudioCode开发工具。VisualStudioCode（简称“VSCode”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Wi