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

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、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。打开VSCode官网首页，在如图1-11所示的下载列表中，选择自己系统对应的下载链接。其中“Stable”表示稳定版，“Insiders”表示预览版。任务1.1Vue环境配置【任务实施】如图1-12所示，双击打开安装包，勾选【我接受协议】，根据提示单击“下一步”进行逐步安装即可。图1-12VSCode安装过程任务1.1Vue环境配置【任务实施】完成VSCode软件安装后还需要下载Vue语法支持插件。在VSCode中打开“拓展”选项（快捷键:ctrl+shift+x），搜索“VueLanguageFeatures”插件，单击“安装”按钮进行下载与安装，如图1-13所示。图1-13拓展插件任务1.1Vue环境配置【任务实施】步骤三.初始化Vue项目。NPM的全称是NodePackageManager，是一个Node.js包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。接下来我们将通过NPM下载Vite工具，并进行Vue项目初始化。在VSCode中新建项目文件夹，并通过【终端】—>【新建终端】选项打开软件中的命令行窗口，如图1-14所示。图1-14打开VSCode终端窗口任务1.1Vue环境配置【任务实施】在软件命令行窗口中使用“npm

init

vite@latest”命令搭建一个Vite项目，如图1-15所示。Vite是Vue的作者尤雨溪在开发Vue3.0的时候开发的一个基于原生ES-Module的前端构建工具。能够帮助我们快速搭建和发布Vue项目。图1-15搭建Vite项目输入项目名称，如图1-16所示。图1-16输入项目名称选择项目所使用的框架。通过键盘的方向键进行框架选择，按下回车键表示确定，如图1-17所示。图1-17选择项目框架任务1.1Vue环境配置【任务实施】任务1.1Vue环境配置【任务实施】选择项目所使用的编程语言，在此我们选择“JavaScript”语言，如图1-18所示。图1-18选择编程语言完成配置选择之后，通过如下命令进入项目目录，安装项目所依赖的包，如图1-19所示。图1-19安装依赖任务1.1Vue环境配置【任务实施】步骤四.渲染Vue项目。完成项目依赖包安装之后，我们在命令行窗口继续输入“npmrundev”命令，如图1-20所示,项目便渲染至“:5173”地址中了。图1-20项目渲染【知识链接】1.1.1Vue3介绍1.更优的性能2.更小的体积3.支持组合API4.更好的支持TS5.提供了更先进的组件1.1.2Vite工具介绍Vite号称是下一代的前端开发和构建工具，目前已经在前端社区里逐步开始流行起来了。比起传统的webpack构建，Vite在性能速度上都有了质的提高。使用Vite工具构建的项目在项目根目录中存在一个“vite.config.js”配置文件，通过该文件能够对项目进行相关配置。【知识链接】1.端口设置Vite默认将Vue项目渲染至5173端口，我们也可以通过“vite.config.js”配置文件，对其渲染端口进行修改。在“vite.config.js”中添加如下代码，即可修改项目渲染端口。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

//修改项目渲染端口为9999

port:9999

}})【知识链接】2.监听地址设置通过“host”属性能够指定服务器应该监听哪个IP地址。例如将监听地址修改为“”。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改项目渲染端口为9999

host:""//修改IP

}})【知识链接】3.应用自启动设置配置“open:true”选项，能够在开发服务器启动时，自动在浏览器中打开应用程序。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改项目渲染端口为9999

host:"",//修改IPopen:true

}})以上介绍的都是Vite中的一些基础配置，在项目的设计和发布过程中我们将会陆续接触到更多的Vite配置内容，同学们也可以前往Vite的官网进行进一步的了解和学习。任务1.2项目初始化【任务陈述】本任务要求根据项目素材，将Vue项目改写为如图1-1所示样式。【任务分析】本任务要求同学们对Vue项目结构有所了解。该项目页面主要由HTML布局代码、CSS样式代码、JavaScript脚本代码以及图片文件等组成，如何将这些原始素材放置在Vue项目的合理位置是项目实施的关键点。图1-1“就业职通网”效果图任务1.2项目初始化【任务实施】步骤一.部署HTML代码。清空App.vue文件中的默认代码并输入如下代码：<template></template><script></script><style></style>App.vue是项目根组件，项目中所有组件都将被加载至该组件进行渲染和展示。其中<template>标签主要用于部署HTML代码，<script>标签主要用于部署JavaScript脚本代码，<style>标签用于部署样式代码。将素材中的HTML代码复制到<template>标签中。任务1.2项目初始化步骤二.部署CSS代码。将素材中的“bootstrap.css”文件拷贝至项目的【assets】—>【css】目录中。Vue静态资源可以通过两种方式进行处理：在<script>被导入以及在<template>或<css>中通过相对路径被引用。这类引用会被打包处理，需要将资源放在【assets】目录中。放置在【public】目录下或通过绝对路径引用。这类资源将会直接被拷贝，而不会经过打包处理。Vue更推荐将资源作为模块依赖的一部分导入项目当中，这样脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求任务1.2项目初始化步骤二.部署CSS代码。App.vue文件中的<style>标签主要用于部署样式代码，在<style>标签中导入素材中的CSS样式文件。<template></template><script></script><style>@import

"./assets/css/bootstrap.css"</style>任务1.2项目初始化步骤三.部署图片文件。将素材中的图片文件拷贝至项目的【assets】—>【img】目录中。在VSCode软件中打开命令行工具，输入“npmrundev”命令渲染项目，此时便可以看到项目被成功渲染了。任务1.2项目初始化【知识链接】1.2.1Vue项目结构一个Vue项目包括如图1-21所示的文件和目录，接下来我们对其中主要文件和目录进行介绍。图1-21Vue项目结构任务1.2项目初始化【知识链接】1.2.1Vue项目结构node_modules目录npm加载的项目依赖模块。public目录public是静态资源目录，项目打包时，该目录下的资源不会被编译。assets目录assets同样是静态资源目录，项目打包时，该目录下的资源将会被编译。【知识链接】1.2.1Vue项目结构App.vueApp.vue是项目根组件，项目中所有组件都将被加载至该组件进行渲染和展示。main.js项目的核心文件，主要起到配置项目所必须的插件、实例化Vue等作用。项目创建完毕，main.js中会有默认的配置。//导入createApp包import{createApp}from'vue'任务1.2项目初始化【知识