（五）自定义组件
- 1、 VS插件推荐
- 2、开始创建自定义的组件
- 2.1、 快速添加基础页面内容: vbase
- 2.2、 随便写上内容
- 3、使用该组件
- 3.1、具体步骤
- 3.2、其他说明
1、 VS插件推荐
开始前，如果大家使用的是VS Code，我推荐安装Vue VSCode Snippets，方便大家开发。我这里使用的是WebStorm 2021.3，创建Vue项目也比较简单。命令创建方式见本栏目的第二篇文章。
2、开始创建自定义的组件
在我们Vue项目的src目录下，新建一个components文件夹（如果采用命令创建可能已经有这个文件夹了）。在components文件夹下创建一个MyDialog.vue页面。
2.1、 快速添加基础页面内容: vbase
创建页面后，我们直接创建一个在这个页面中敲vbase，对于VS编辑器选中直接回车，wb的话选择第一个提示后敲击回车。如下图：
回车后的页面内容如下：
2.2、 随便写上内容
我们直接在页面的div标签中写上内容。
3、使用该组件
使用方式也很简单，我们这里在src的主目录下找到App.vue页面。
3.1、具体步骤
- 在script 的标签中，使用import将我们的组件引入进来并取名为MyDialog
- 接着vue就会自动帮我们将这个名称按照驼峰格式作为标签。我们就直接在页面上使用该标签就可以了
- 我们启动项目（npm run dev） 后就可以在页面看到效果
3.2、其他说明
这里需要说明的一点就是在App.vue页面，
<script setup>
//这里面是内容。
</script>
我们可以采用以下这种方式
