vue 创建组件、组件选项、require.context全局自动注册组件-蒲公英云

vue 创建组件、组件选项、require.context全局自动注册组件

非脚手架环境：
    根实例:
        new Vue({
          el: '#app',
          router,
          data: {
            name:'jeff'
          },
          components: { App },
          template: '<App :name="name" />'
        })
    组件:
        Vue.component('App',{
            data(){        组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
                return{
                }
            },
            ...
        })
组件选项:
export default{
    delimiters:["{
   {", "}}"],  改变纯文本插入解析分隔符{
   {}},只在完整构建版本中的浏览器内编译时可用。
    functional:true,    使组件无状态(没有data)和无实例(没有this上下文),他们用一个简单的render 函数返回虚拟节点使它们渲染的代价更小。
        搭配函数式组件使用
    model:{prop:string, event: string }    自定义v-model使用
    inheritAttrs:false,    搭配给属性绑定自定义位置使用
    comments:true,     会保留且渲染模板中的HTML注释,默认行为是舍弃它们。
        这个选项只在完整构建版本中的浏览器内编译时可用。
}    
脚手架环境:
    1、在src的components下创建xx.vue文件
        <template lang='html'>
            <div>
                template内只能存在一个根容器
            </div>
        </template>
        <script>
        export default{
            name:'xxx',
            data(){
                return{
                    xx
                }
            }
        }
        </script>
        <style lang='css' scoped>    lang:使用的预编译器语言,scoped:表示样式只作用于当前组件
        </style>
    2、在App.vue主入口文件的引入
        (1)script中引入该组件地址
        (2)在components中引入该组件名
        (3)在template中<组件名/>使用
            首字母大写命名定义一个组件时MyComponentName
             <my-component-name> 和 <MyComponentName> 都是可接受的。
             直接在DOM(即非字符串的模板)中使用时只有 kebab-case 是有效的。
    3、可以把JavaScript、CSS分离成独立的文件然后做到热重载和预编译
        <template>
          ...
        </template>
        <script src="./my-component.js"></script>
        <style src="./my-component.css"></style>
全局自动注册组件
    import Vue from 'vue'
    import upperFirst from 'lodash/upperFirst'
    import camelCase from 'lodash/camelCase'
    const requireComponent = require.context(
      './components',            其组件目录的相对路径
      false,                     是否查询其子目录
      /Base[A-Z]\w+\.(vue|js)$/    匹配基础组件文件名的正则表达式
    )
    遍历文件路径
    requireComponent.keys().forEach(fileName => {
      获取组件配置,和导入文件相同
          文件中的export 导出结果为{x:xx,...}
        文件中的export default 导出结果为{default:xx}
      const componentConfig = requireComponent(fileName)    
      获取组件的 PascalCase(驼峰写法)命名,
      const componentName = upperFirst(  转化为首字母大写
        camelCase(    转换为驼峰写法
           获取和目录深度无关的文件名,即只获取文件名用来注册组件
          fileName    
            .split('/')
            .pop()
            .replace(/\.\w+$/, '')    去掉文件后缀
        )
      )
      全局注册组件
      Vue.component(
        componentName,
        如果这个组件选项是通过 `export default` 导出的，
        那么就会优先使用 `.default`，
        否则回退到使用模块的根。
        componentConfig.default || componentConfig    每个组件中export default导出的配置
      )
    })