背景

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

1.代碼集中，便于開發(fā)、管理和維護(hù)

2.可復(fù)用性高，直接將vue文件拷貝到新項(xiàng)目中

我暫時就想到這兩點(diǎn)，童鞋們可以在評論里幫我補(bǔ)充；因?yàn)橛羞@么多優(yōu)點(diǎn)，所以決定有必要將vue組件的常用配置項(xiàng)提煉出來，形成一個組件模板，方便日后項(xiàng)目開發(fā)復(fù)用

 <template> <div>  <h1>{{title}}</h1>  <ChildComponents></ChildComponents> </div></template><script>//子組件要提前引入，才可使用import ChildComponents from './ChildComponents.vue'//也可引入一些公共Js腳本或類庫import Cookie from '../lib/cookie.js'//Js部分盡量采用ES6語法，webpack babel插件會轉(zhuǎn)義兼容export default { //組件私有數(shù)據(jù)（必須是function，而且要return對象類型） data () {  return {   title: '組件標(biāo)題',   firstName: '',   lastName: '',  } }, //父組件傳遞過來的數(shù)據(jù)（兩種方式聲明：1.數(shù)組 2.對象） //數(shù)組方式 props: ['age'], //對象方式 /*props: {  age: {   type: Number,   default: 0,   required: true,   validator: function (value) {    return value >= 0   }  } }*/ //計算屬性 computed: {  fullName () {   return this.firstName + this.lastName  } }, //監(jiān)聽 watch: {  title (preVal, newVal) {    console.log(`改變之前的值：${preVal}；改變之后的值：${newVal}`)  } }, //函數(shù)集，自己封裝，便于開發(fā)使用 methods: {  getCurrentDate () {   return new Date().toLocaleDateString()  } }, //生命周期鉤子：實(shí)例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用 beforeCreated () {  console.log('component before created') }, //生命周期鉤子：組件實(shí)例完成創(chuàng)建之后調(diào)用 created () {  console.log('component created') }, //生命周期鉤子：組件實(shí)例渲染完成時調(diào)用 mounted () {  console.log('component mounted') }, //要用到哪些子組件（如果組件已是最小粒度，那么可省略該屬性） components: {  ChildComponents }}</script><style lang="scss" scoped>/**使用scss編寫樣式，既可提高開發(fā)效率，也方便維護(hù)* scoped省略后，該樣式片段會應(yīng)用到頁面全局* 支持import語法引入css文件*/@import "../base/reset.css";div { h1 {  color: #c23a3f; }}</style>

結(jié)語

以上組件模板中的配置不是最全的，但都是最常用的，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。