Vue3 _ 15. Vue CLI 中引入自定义组件

我们之前的博客中已经了解了如何创建一个 Vue CLI 项目，并且还简单介绍了项目的结构，今天我们就来看看如何自定义组件。

一、创建组件

我们去 components 目录下创建一个 TestComponent.vue 的组件

一个组件中包括三个部分：template、script、style

template 中是写一些 HTML 样式，好比定义一个 a 标签啊，p 标签啥的；

script 中是写一些方法，绑定的数据等

最后一个 style 是写样式的（这里我们是引入的 Less 预处理，下面我们会去说这个如何去使用）

创建完成后，我们这里还需要解决一个问题，就是 ESLint: Delete `␍`(prettier/prettier)

可以看到哈，这东西太烦了，这个就是 ESLint 的代码检查，这里大家看我的博客，自己去操作解决一下。

https://lemon1234.com/blog/4b14fcffd9d4a80325fc9a428aebf3fb

首先，我们先在 template 中添加一些 DOM

 这里我们是有绑定一个 msg 的值，这里我们需要在 script 中添加 msg。

这里要说的是，这个和我们之前学习基础的时候写法不一样。

最后一个我们写一些简单的样式

二、使用组件

上面我们已经将这个组件创建好了，接下来我们来使用一下组件。

我们把组件引入到 Home.vue 中。

首先，我们需要将这个组件 import 到 Home.vue 中。

这里这个红线可以先不管，因为我们还没有使用

然后我们将引入的这个 TestComponent 注册到 Home 中。这里可以参考上面的 HelloWorld。

同样忽略红线~~~

注册的话，我们是需要将组件放到 components 中，这个 components 中就是可以定义注册的组件有那些。详细可以看官网：https://cn.vuejs.org/v2/guide/components.html

最后就是使用，使用的话很简单，我们只需要将这个注册的名字当做标签，写在当前页面（组件）中的 template 即可。

ctrl + s 保存项目，我们来看看效果

三、组件效果查看

丑是丑了点，但是也还好。

这一篇东西不多，大家自己操作一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~