vue开发教程04：根组件App.vue简介

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

从vue项目的目录结构介绍中，我们了解到src目录是项目的核心文件目录，是我们开发vue项目所必须掌握的。所以，在后面的章节中，我们都是针对src目录来做介绍，如：组件、路由、数据绑定、请求数据、数据存储等等。本章，我们对App.vue根组件做一个简单介绍。

一般情况下，一个组件文件由3部分组成：template模板代码、script代码、style代码。App.vue代码如下：

<template>

<div>
<router-view></router-view>
</div>

</template>

<script>

export default {

       data(){     return{ }    }

}

</script>

<style >
</style>

一：template模板部分：

1、模板标签template内部只能有一个子标签（父节点），如上面代码中的<div>。如果有多个子标签，就会出错。

2、<router-view></router-view>是子路由视图，是一个路由标签。路由对应的页面内容会显示在这里。如：路由对应的是分类页，就显示分类页的内容；如对应的是文章页，就显示文章页的内容。这个在后面的路由章节中将会详细解说。

二：script代码部分：

因为vue项目通常是用ES6代码来写的，所以，vue组件的script部分，需要用export default来导出。script部分的代码可以包含：data()数据、生命周期（如：mounted加载完成后）、conponents（组件声明）、methods（自定义方法）等等，这些将在后面的章节中，我们会经常用到。

三：style代码部分：

style代码部分，顾名思义，就是CSS样式代码部分。这里，我们可以直接添加当前组件纯CSS样式代码，默认是影响全局的，所以，最好是给template模板父节点添加一个ID或CLASS属性，然后针对这个属性下的子孙元素添加CSS样式，这样就只是局部样式了。或者在style标签上加scoped，定义作用域只在该组件下起作用，<style scoped></style>

当然，这里也可以使用less、sass等CSS预处理语言，它们扩展了CSS，可以使用变量、函数等，使用CSS语言更加强大。不过，要想使用这些less或sass，需要安装 sass-loader依赖包，然后给<style>标签添加一个属性，如：<style lang="sass"></style>或<style lang="scss"></style>。sass与scss的区别：sass不能使用大括号和分号（使用缩进），而scss可以使用大括号和分号。