背景
相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多：
1.代码集中，便于开发、管理和维护
2.可复用性高，直接将vue文件拷贝到新项目中
我暂时就想到这两点，童鞋们可以在评论里帮我补充；因为有这么多优点，所以决定有必要将vue组件的常用配置项提炼出来，形成一个组件模板，方便日后项目开发复用
1 <template>
2 <div>
3 <h1>{{title}}</h1>
4 <ChildComponents></ChildComponents>
5 </div>
6 </template>
7 <script>
8 //子组件要提前引入，才可使用
9 import ChildComponents from './ChildComponents.vue'
10 //也可引入一些公共Js脚本或类库
11 import Cookie from '../lib/cookie.js'
12
13 //Js部分尽量采用ES6语法，webpack babel插件会转义兼容
14 export default {
15 //组件私有数据（必须是function，而且要return对象类型）
16 data () {
17 return {
18 title: '组件标题',
19 firstName: '',
20 lastName: '',
21 }
22 },
23 //父组件传递过来的数据（两种方式声明：1.数组 2.对象）
24 //数组方式
25 props: ['age'],
26 //对象方式
27 /*props: {
28 age: {
29 type: Number,
30 default: 0,
31 required: true,
32 validator: function (value) {
33 return value >= 0
34 }
35 }
36 }*/
37 //计算属性
38 computed: {
39 fullName () {
40 return this.firstName + this.lastName
41 }
42 },
43 //监听
44 watch: {
45 title (preVal, newVal) {
46 console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`)
47 }
48 },
49 //函数集，自己封装，便于开发使用
50 methods: {
51 getCurrentDate () {
52 return new Date().toLocaleDateString()
53 }
54 },
55 //生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
56 beforeCreated () {
57 console.log('component before created')
58 },
59 //生命周期钩子：组件实例完成创建之后调用
60 created () {
61 console.log('component created')
62 },
63 //生命周期钩子：组件实例渲染完成时调用
64 mounted () {
65 console.log('component mounted')
66 },
67 //要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
68 components: {
69 ChildComponents
70 }
71 }
72 </script>
73 <style lang="scss" scoped>
74 /**使用scss编写样式，既可提高开发效率，也方便维护
75 * scoped省略后，该样式片段会应用到页面全局
76 * 支持import语法引入css文件
77 */
78 @import "../base/reset.css";
79 div {
80 h1 {
81 color: #c23a3f;
82 }
83 }
84
85 </style>
结语
以上组件模板中的配置不是最全的，但都是最常用的，如有遗漏，欢迎大家补充！！
