vue-cli中公共提示与加载组件实战

在Vue CLI项目中，实现公用提示弹层（tips）和加载（loading）组件是提高代码复用性和维护性的重要一步。本文将详细介绍如何在vue-cli项目中创建和管理这些共享组件。 首先，为了保持代码结构清晰，建议在项目结构中创建一个名为`components`的文件夹，然后在其中创建一个名为`common`的子文件夹，用于存放所有的公共组件。这样有助于组织代码，使项目更易于管理和维护。 **一、loading组件** 1. `loading.vue`组件的实现： - 这个组件定义了一个简单的加载指示器，当`loading`属性为`true`时，显示一个动态的`loading.gif`图片。组件的模板部分包含一个`div`，其样式定义了加载动画的位置和样式，如全屏覆盖、居中对齐等。 - 在`script`部分，我们使用`export default`声明组件，并提供了数据属性`loading`默认值为`false`。此外，还添加了一个事件监听器，监听来自外部的`loading`信号，以便根据外部指令控制加载状态的显示与隐藏。 - `<style scoped>`标签内的SCSS代码设置了`.loading`类的样式，包括颜色、字体大小以及图标尺寸。 2. 在`app.vue`文件中引入并使用`loading`组件： - 在`<template>`部分，我们导入了`loading`组件，并将其放置在`<router-view>`下方，确保在整个应用中全局可见。这样，每当需要显示加载状态时，只需触发一个事件，加载组件就会根据这个信号调整其状态。 **二、提示弹层（tips）组件** 由于内容没有提供`tips`组件的具体实现，我们可以推测它可能也是一个类似的结构，包含模板、数据、事件处理和样式。`tips`组件可能会有一个文本区域来显示消息，可以通过传入不同的消息内容进行定制。在`app.vue`中导入并使用的步骤也类似于`loading`组件，只是需要传递的消息不同。 总结来说，通过在vue-cli项目中创建并管理公用的提示弹层和加载组件，我们可以避免重复编写相似的代码，提高开发效率。通过合理的文件结构组织和组件设计，使得整个项目的代码更加模块化，便于团队协作和未来的维护工作。同时，通过外部事件驱动组件的状态变化，使得组件的使用更加灵活和可扩展。