我们把通过vue-cli生成的项目跑起来（npm start）之后，可以在浏览器里（localhost:8080）看到一个包含 Vue logo 的页面，这个页面写在哪里了呢？

用编辑器打开项目，进入到src/components目录

可以看到这里有一个以.vue为后缀的文件，叫作 HelloWorld.vue

打开这个文件，里面的内容分为三部分，被放在不同的标签内：

• template
• script
• style

一看这三个标签的名字，这不就对应着前端的 html js css 嘛

没错，一个.vue文件（单文件组件）就是这三者的结合

我们把针对某一组件的模版、逻辑、样式都写到同一个文件里，使得开发者能够快速找到与当前组件相关的内容。而在组件内部，三者又是分散于不同标签下的，实现了关注点的分离。

template

1
2
3

<template>
  <p>{{ greeting }} World!</p>
</template>

template标签里是这个组件的模版内容

template 要求只有一个根元素

我们可以通过模版语法把数据渲染到模版里

script

1
2
3
4
5
6
7
8
9
10

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

script标签下，是组件的逻辑部分

最重要的内容是 export 一个对象，这代表着这个组件的 vue 实例

在这个被 export 的对象（vue 实例）内部有着具有不同功能的属性：name、data ，还可能会有 methods、compouted、filters等

style

1
2
3
4
5
6

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

style部分负责组件的样式

scoped表示样式只对当前组件起作用

你也可以使用 css 预处理器：

1

npm install sass-loader node-sass --save-dev

1
2
3

<style lang="scss">
  /* write sass here */
</style>

.vue文件最终会由vue-loader转换为 JavaScript 模块