单文件组件

一个文件中只包含1个组件，例：school.vue；

一、export（暴露接口）

需要使用ES6模块化的知识，将vue文件暴露一个接口可供其他文件调用；

三种暴露方式：

（1）分别暴露：export const school = Vue extend({ ... })

（2）统一暴露：const school = Vue extend({ .... }) export {school}

（3）默认暴露（常用）：

        const school = Vue extend({ ... }) export default school，可简写为：

        export default{ ... }

二、组件三大模块

1、template

编写html代码，用于展示在页面；

2、script

编写js代码

3、style

编写样式，相当于css

注意：要给组件设置name，保证多次引用本vue文件的名称都是统一的，而不是使用每次引用自己定义的文件名；

样例代码：

<template>
    <div class="demo">
        <h2>学生姓名：{
  {name}}</h2>
        <h2>年龄：{
  {age}}</h2>
    </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            age:18
        }
    },
}
</script>

<style>
    .demo{
        background-color: orange;
    }
</style>

三、脚手架（Vue CLI）

用于编写vue代码，全称为：command line interface，命令行接口工具；

1、vue create 项目名称

使用win+R弹出命令行工具，输入cmd进入，跳转到要创建项目的根目录，使用该命令创建新的vue项目；

注意：项目名要避免与关键字重名：例：vue等都是不可以的

2、npm run serve

进入到项目文件目录下，输入该命令，运行项目；

四、render配置项

1、vue.js 和 vue.runtime.xxx.js的区别：

（1）vue.js是完整版的vue，包含vue核心+模板解