在一个vue项目中，我们想要进行开发，首先需要认识的便是带有.vue后缀的文件。本文记录.vue组件的相关内容。
开发组件要理解一个概念，那就是数据分离，例如：html中一些可变的数据通常都是在data(){}中定义并且赋值。

一个.vue后缀的组件所包含的常用信息.如下:

// 这里编写html相关内容
<template>
  <div class="test"></div>
</template>
// 这里编写js相关内容
<script>
export default {
    
    
  mixins: [], // 混入
  components: {
    
    }, // 局部组件注册，通过import导入
  props: {
    
    },//数据传递
  data() {
    
      // 本组件数据
    return {
    
    };
  },
  computed: {
    
    }, // 计算属性
  watch: {
    
    }, // 监听器
  methods: {
    
    }, // 方法
  filters:{
    
    }, // 局部过滤器(仅仅本组件使用)
  directives:{
    
    }, // 局部自定义指令(仅仅本组件使用)
  beforeCreate() {
    
    }, // 生命周期
  created() {
    
    },// 生命周期（常用）
  beforeMount() {
    
    },// 生命周期
  mounted() {
    
    },// 生命周期（常用）
  beforeUpdate() {
    
    },// 生命周期
  updated() {
    
    },// 生命周期（常用）
  beforeDestroy() {
    
    },// 生命周期
  destroyed() {
    
    }// 生命周期 （常用）
};
</script>
// 这里编写css样式相关内容 , <style lang='scss' scoped>
// lang是指加了sass或者less的引用,可以直接使用(注意先npm)
// scoped 表示本style中的样式只在本组件中生效。 对于一些需要修改的东西，如修改elmentUI的某些样式需要去掉scoped 或者 在下面在加个没有scoped的style，然后里面编写即可
<style>
.test{
    
    }
</style>

补充:

vue.extend和vue.component的区别
每一个.vue后缀的组件可以理解为都是通过Vue.extend来实现的.然后通过路由来实现导航注册.
Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器.(通俗来讲就是将.vue后缀名的组件内容,如:props,data之类的进行构造以便于注册)
Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。
全局注册组件

import Acomponent from './a.vue'
Vue.component('Acomponent',Acomponent)
// 然后就可以在任何需要的地方直接<Acomponent></Acomponent>即可

局部注册组件
在每一个.vue的后缀文件中直接

import Acomponent from './a.vue'
<script>
export default {
    
    
components:{
    
    
.Acomponent 
}
}
</script>