vue-cli添加组件

本文最后更新于:2020年12月1日 下午

一、流程结构

在添加组件前呢,先了解一下vue项目的运行流程。

  • 整个项目的入口是main.js,在开头就引入了vue源码和主页面App.vue。
  • 之后是生成一个Vue实例,把App.vue的内容渲染到浏览器上
    在这里插入图片描述
    在这里插入图片描述

    二、新建组件

    为新建的vue项目添加组件,一般是放在文件夹components下,然后在App.vue(或者其他你想引入组件的地方)导入组件

       (1)新建组件list

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<ul>
<li v-for="item in items" :key="item.msg">
{{item.msg}}
</li>
</ul>
</template>
<script>
export default {
data () {
return {
items: [
{msg: 'liao'},
{msg: 'yue'},
{msg: 'qiang'}
]
}
}
}
</script>

       (2)引入App.vue并使用组件

在这里插入图片描述

事实上,新建的项目里已经有一个组件了,就是components下的HelloWorld.vue。

在这里插入图片描述

 (3)之后在浏览器就可以看到自己的list组件的效果了

在这里插入图片描述


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!