Vue單文件組件基礎模板

背景

相信大家在使用Vue開發項目時，基本都是以單文件組件的形式開發組件的，這種方式好處多多：

1.代碼集中，便于開發、管理和維護

2.可復用性高，直接將vue文件拷貝到新項目中

我暫時就想到這兩點，童鞋們可以在評論里幫我補充；因為有這么多優點，所以決定有必要將vue組件的常用配置項提煉出來，形成一個組件模板，方便日后項目開發復用

 1 <template> 2   <div> 3     <h2>`title`</h2> 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 >= 034       }35     }36   }*/37   //計算屬性38   computed: {39     fullName () {40       return this.firstName + this.lastName41     }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     ChildComponents70   }71 }72 </script>73 <style lang="scss" scoped>74 /**使用scss編寫樣式，既可提高開發效率，也方便維護75 *  scoped省略后，該樣式片段會應用到頁面全局76 *  支持import語法引入css文件77 */78 @import "../base/reset.css";79 div {80   h2 {81     color: #c23a3f;82   }83 }84 85 </style>