vue 统一管理组件

vue 主界面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input placeholder="请输入" v-focus/>
    <msg></msg>
   
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

vue组件

<template>
  <div class="msg" ref="msg" :class="{active:msgStatus}">
      <div class="msg-warpper">
          {{text}}
      </div>
  </div>
</template>

<script>
export default {
  name: 'msg',
  props: {
    msg: String
  },
  data(){
      return{
          msgStatus:false,
          text:'1213123123'
      }
  },
  methods:{
      msgPlugin(msg){
          this.text=msg
          this.msgStatus=true
          setTimeout(function() {
               this.msgStatus=false
          }, 1000);
      }
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

统一管理组件的js代码

// 入口文件  插件入口  统一管理组件
// 动态引入文件
const requireComponent = require.context('./', true, /\.vue$/)

// 插件
const install = (Vue) => {
    if (install.installed) return install.installed
    
    requireComponent.keys().forEach(fileName => {
        // 第i个组件
        const config = requireComponent(fileName)
        // 组件名称
        console.log('requireComponent:',config)
        const componentName = config.default.name
        // 注册组件
        Vue.component(componentName, config.default || config)
    })
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus()
        }
    })
}
// 环境检测
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

main.js引入

import Vue from 'vue'
import App from './App.vue'
import vueMsg from '../src/plugins/index.js'
Vue.config.productionTip = false
Vue.use(vueMsg)
new Vue({
  render: h => h(App),
}).$mount('#app')