本教程操作环境：windows7系统、vue3、Dell G3电脑。

vue结尾的是什么文件?

立即学习“前端免费学习笔记（深入）”；

单文件组件 ：

1、以.vue结尾的文件，是vue.js自定义的一种文件格式，称为单文件组件

2、一个.vue文件就是一个单独的组件，在文件内封装了该组件相关的html、css和js，实现了对一个组件的封装。

3、.vue文件由三部分组成

emplate><ｓｃｒｉｐｔ>//js，组件的功能配置

自己定义一个组件：

CompA.vue

 <ｓｃｒｉｐｔ>export default{data(){return{name:"huit"}},methods:{change(){this.name="juju"}}} 

App.vue

 <ｓｃｒｉｐｔ>// import HelloWorld from './components/HelloWorld.vue'import CompA from './components/CompA'  //可以省略后缀名 export default {  name: 'App',  components: {    // HelloWorld// 'comp-a':CompA// CompA:CompA //驼峰式写法CompA  //帕斯卡式，首字母大写，ES6的简写  }  } 

浏览器输入：http://localhost:8080/

推荐学习：《vue.js视频教程》