代码模块化，组件化

（以下是我作为初学者对代码模块化的理解，可能会有很多不足，有什么错误，补充的，可以向我提出）

模块化，组件化的理解

模块化就是将一个完整项目，将功能相似的几个区域，单独拿出来成为一个独立模块，这样我们哪里有需要这个的功能，就可以直接引入，避免重复一样的代码，可以使代码更简洁，使用更方便，也更有利于管理我们的代码，以实现项目的工程化。组件化就是在模块化的基础上，细分很多的组件，这样理解会有些生硬，可以这么说，模块化和组件化都是把项目功能相似的一部分变为单独的一块，使用时引入，最大的称为模块，模块下引入的小的称之为组件，相似的功能，相似的样式，相似的布局每个都可以单独成为一个组件。

创建一个简单的组件

在一个创建好的新项目中，找到src下App.vue，和components>HelloWorld。vue两个文件，接下来我们会用到

首先把这两个文件清空，以便我们更清楚的进行演示接下来的操作

我们先简单在App.vue文件中用v-for写十个div，并加入文字，点击的时候，让他变红

我是这样写的，运行后是这个样子，（我这里使用的使谷歌浏览器）

现在们要把这些代码内容变成一个组件，然后在这个文件中引入

现在把这些内容全部移入HelloWorld.vue文件中（就是剪切粘贴到HelloWorld.vue中，嘻嘻），App.vue就是现在这个样子

我们现在要在App.vue中引入HellloWorld.vue，在script中用import引入

黄色的波浪线是警告，这里警告的原因是因为我们已经引入了这个文件，但是还没有使用，（不用在意，我妈下一步用上以后就不会有这个警告了）