Vue.js前端开发框架应用（微课版） 课件 第九章 “代办事项”项目.pptx

Vue.js前端开发框架应用

“代办事项”项目

目录Vue开发环境创建Vue.js项目项目功能开发

目录Vue开发环境创建Vue.js项目项目功能开发

Vue开发环境一、Node.js环境Vue官方提供了脚手架，通过构建式的方式，帮助开发者快速搭建Vue项目，提高开发效率。使用脚手架快速搭建Vue项目，或者启动Vue项目（通过脚手架搭建），都需要确保Node.js环境已经安装成功。Node.js是一个JavaScript运行环境，为JavaScript开发提供了更多可能，使得开发者可以使用JavaScript创建各种服务器工具和应用程序，是大前端开发中必不可少的基础设施。

Vue开发环境一、Node.js环境安装Node.js环境浏览器访问Node.js官网（/）下载的Node.js本机上双击下载好的Node.js安装包，按照界面指引完成安装检查Node.js是否成功安装在本机上在命令行工具中，执行node命令，查看版本号：node-v

Vue开发环境二、包管理工具基于Node.js环境的前端项目，需要使用包管理工具npm对项目中的依赖包（也称“第三方模块”）进行下载和管理。npm的常见使用场景有三种：允许用户从npm服务器下载别人编写的第三方包到本地使用。比如，使用npm命令从服务器下载vue-router（路由）至Vue项目中。允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。比如，使用npm命令从服务器下载、安装Vue的脚手架VueCLI至本机。允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。比如，开发者自定编写了一个类似vue-router的包或者脚手架VueCLI至npm服务器。成功安装Node.js后，包管理工具npm随之安装成功。命令来查看npm的版本号：npm-v

Vue开发环境二、包管理工具npm并不是唯一的包管理工具，新出现的yarn也是一款JavaScript包管理工具。相比于npm，yarn的优点主要表现在以下几个方面：并行安装，提高包的下载速度。npm安装包时，是串行的，而yarn安装包是并行的。支持离线安装。已经下载的包会被缓存，无需重复下载。安全。yarn在下载包前会检查签名和包的完整性。若下载失败会重新请求，避免安装过程失败。通过npm命令安装yarn包管理工具：npminstallyarn-g//全局安装yarn

Vue开发环境二、包管理工具选择npm还是yarn来管理项目的依赖包？新建项目时，根据个人习惯选择npm或者yarn。对于已有项目，当项目目录中存在package-lock.json文件，则说明该项目中的依赖包是通过npm进行管理，如果是yarn-lock.json文件，则是由yarn是项目的包管理工具。

Vue开发环境三、安装VueCLI脚手架VueCLI是一个基于Vue.js的脚手架，将Vue生态中的工具基础标准化，提供项目规范和约定。开发者无需纠结项目的配置问题，即可快速开展业务开发。安装步骤：通过npm全局安装@vue/cli脚手架查看所安装VueCLI的版本号npminstall@vue/cli@5.0.8-gvue--version

目录Vue开发环境创建Vue.js项目项目功能开发

创建Vue.js项目一、vuecreate命令创建项目创建一个项目名称为hello的项目，输入如下命令：输入创建命令回车后，根据命令行工具中的提示进行后续的操作，对项目进行配置。项目成功创建后，进入该项目的根目录下，启动项目：项目启动命令的执行成功后，将会启动一个本地服务，命令行中打印出的执行结果有一段内容如下所示：打开浏览器，访问http://localhost:8080即可访问该项目，查看项目的页面效果。vuecreatehellocdhello//进入项目的根目录下yarnserve//启动项目Apprunningat:-Local:http://localhost:8080

创建Vue.js项目二、图形化界面创建项目创建一个新的vue项目，输入如下命令：创建命令执行完成后，将会启动一个本地服务：打开浏览器，访问启动的本地服务http://localhost:8000，跳转项目管理器页面：vueuiStartingGUI...Readyonhttp://localhost:8000

创建Vue.js项目二、图形化界面创建项目项目管理器页面中，创新新的项目，并对项目进行配置。成功创建项目后，页面自动跳转到“项目仪表盘”页面：

创建Vue.js项目二、图形化界面创建项目“项目仪表盘”页面中，单击页面