工业UI开发技术-课件 3.4.1-组件的创建.pptxVIP

组件的创建深圳市信息职业技术学院

目录01组件的概念02组件的创建03脚手架用法04组件的使用

本节目标 通过对组件的介绍，掌握组件的概念，掌握组件的创建方式，掌握脚手架常用的命令，通过任务实施掌握组件的使用。通过本节学习可以：掌握组件的概念掌握组件的创建掌握脚手架用法掌握组件的使用

01组件的概念

组件的概念组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。这和我们嵌套HTML元素的方式类似。Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。组件：局部功能的代码和资源的集合

02组件的创建

组件的创建一般情况下，我们会将能够实现局部功能的代码（结构、样式、交互）通过一个.vue文件来编写，以达到组件复用的效果。在该.Vue文件中通过template标签来定义该组件中所有的结构、通过style标签来定义组件中结构所需要的样式、通过script标签定义该组件中需要的数据和交互效果。例如，我们定义一个课程组件，即Course.vue文件代码如下：

组件的创建我们定义一个课程组件，即Course.vue文件代码如右侧所示：

03脚手架用法

脚手架概念鉴于浏览器只能解析html、css、js文件代码，我们单独的定义一个Course.vue文件时并不能直接运行该Course.vue文件。所以能够帮助翻译.vue文件的工具（VueCLI）应运而生，开发者会习惯将VueCLI俗称为脚手架。使用该脚手架前需要进行全局安装，安装命令为：npminstall-g@Vue/cli。在指定目录下使用脚手架命令创建项目，该脚手架会帮助我们自动生成代码结构。创建项目的命令为：Vuecreate项目名称。

脚手架用法使用该脚手架前需要进行全局安装，安装命令为：npminstall-g@Vue/cli。在指定目录下使用脚手架命令创建项目，创建项目的命令为：Vuecreate项目名称。该脚手架会帮助我们自动生成代码结构。

04组件的使用

组件的使用项目创建完成后，将Course.vue组件放在components目录下并且在app组件中进行注册

组件的使用注册完成后，启动项目启动命令：npmrun项目名Course.vue组件中的结构、样式、交互效果如图所示：

THANKYOU深圳市信息职业技术学院