1.运行环境：
- 编译器:Visual Studio Code
- Vue版本：2.9.6
- 在vue-cli搭建的项目目录树下
2.自定义vue组件
-
在src目录下新建一个components目录用于存放自定义组件:
-
新建一个vue文件并编写如下内容(以HelloWorld为例):
这里的export default内容体内的name属性值就是自定义的组件名,template标签名内的内容是html标签组成的集合,script标签内是javascript代码定义动态效果,style标签内的内容是组件的css样式 -
编写语句引入vue组件:
这里的组件引入的语句是import HelloWorld from "@/components/HelloWorld";位于
-
在vue项目中引入自定义标签
<HelloWorld>: -
最后的运行效果:
I am Hello World Component
这里就是定义的组件内容