Vue单文件组件基础模板

背景

相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多：

1.代码集中，便于开发、管理和维护

2.可复用性高，直接将vue文件拷贝到新项目中

我暂时就想到这两点，童鞋们可以在评论里帮我补充；因为有这么多优点，所以决定有必要将vue组件的常用配置项提炼出来，形成一个组件模板，方便日后项目开发复用

 <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插件会转义兼容
 export default {
   //组件私有数据（必须是function，而且要return对象类型）
   data () {
     return {
       title: '组件标题',
       firstName: '',
       lastName: '',
     }
   },
   //父组件传递过来的数据（两种方式声明：1.数组 2.对象）
   //数组方式
   props: ['age'],
   //对象方式
   /*props: {
     age: {
       type: Number,
       default: 0,
       required: true,
       validator: function (value) {
         return value >= 0
       }
     }
   }*/
   //计算属性
   computed: {
     fullName () {
       return this.firstName + this.lastName
     }
   },
   //监听
   watch: {
     title (preVal, newVal) {
         console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`)
     }
   },
   //函数集，自己封装，便于开发使用
   methods: {
     getCurrentDate () {
       return new Date().toLocaleDateString()
     }
   },
   //生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
   beforeCreated () {
     console.log('component before created')
   },
   //生命周期钩子：组件实例完成创建之后调用
   created () {
     console.log('component created')
   },
   //生命周期钩子：组件实例渲染完成时调用
   mounted () {
     console.log('component mounted')
   },
   //要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
   components: {
     ChildComponents
   }
 }
 </script>
 <style lang="scss" scoped>
 /**使用scss编写样式，既可提高开发效率，也方便维护
 *  scoped省略后，该样式片段会应用到页面全局
 *  支持import语法引入css文件
 */
 @import "../base/reset.css";
 div {
   h1 {
     color: #c23a3f;
   }
 }

 </style>

结语

以上组件模板中的配置不是最全的，但都是最常用的，如有遗漏，欢迎大家补充！！