vue项目组件化开发，在项目中引入公共组件

一、vue组件化开发是什么？

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

二、使用步骤

1.创建vue组件

代码如下（示例）：

<template>
  <div id="listScroll">
      213412
  </div>
</template>
<script>
export default {
  name: "listScroll",
  data() {
    return {};
  },
};
</script>
<style scoped>
#listScroll {
}
</style>

2.引入组件

代码如下（示例）：

<template>
  <div id="componentHtml">
    <div id="centerBody">
      <listScroll />
    </div>
  </div>
</template>
<script>
import listScroll from "./listScroll";
export default {
  name: "componentHtml",
  components: { listScroll },
  data() {
    return {};
  },
};
</script>
<style scoped>
@import "../../common/css/bodycss.css";
#componentHtml {
  height: 100%;
}
</style>

3.查看结果

总结

good morning