第三篇 Vue3项目中添加组件

1、背景说明

     经过前面两篇文章的说明,我们已经完成了vue3基本环境的搭建,以及vue3与element ui的集成工作。接下来我们就添加一个简单的组件。vue的前端开发工具很多,我们使用的是WebStorm 2022.1.2。

2、集成步骤

     我们的项目目录结构如下:

     第三篇 Vue3项目中添加组件_第1张图片

 

     我们会在components目录下面新增组件TopNode.vue,新建方式如下:

     第三篇 Vue3项目中添加组件_第2张图片

     具体使用方式

    第三篇 Vue3项目中添加组件_第3张图片

 

3、测试验证

 启动服务

npm run serve

测试结果:

第三篇 Vue3项目中添加组件_第4张图片 

 

你可能感兴趣的:(Vue项目,vue.js,javascript,前端)