vue自定义全局组件

1.首先搭建好vue-cli脚手架, 在components 文件夹下创建全局组件,分别为 waterMask.vue 与 waterMask.js

2.这里是components / waterMask / waterMask.vue文件里面内容:

<template>
    <div class="water_box">{{msg}}</div>
</template>
<script>
    export default{
        data(){
            return{
                msg:'water…'
            }
        }
    } 
</script>
<style scoped>
.water_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>

3.这里是components / waterMask / waterMask.js 文件里面内容

import WaterMaskComponent from './waterMask.vue';
const waterMask = {
        install:function (Vue){
            Vue.component('water',WaterMaskComponent)
        }
}
export default waterMask
//备注
js导出组件，里面需要install  

4.这里是main.js文件里面内容

import Vue from 'vue';
import App from './App.vue';

//默认情况下是index文件, 不是index.js, 请使用完整文件名引入
import waterMask from './components/waterMask/waterMask.js';   
Vue.use(waterMask); //必须有install

new Vue({
  el: '#app',
  render: h => h(App)
})

5.这个时候在App.vue里面直接使用组件

<template>
  <div id="app">
      <!--水印组件-->
    <water-mask></water-mask>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
}
</script>
//备注
这里面只是简单加了一个 <water-mask>组件,
优点: 不需要
1. 导入: import WaterMaskComponent from './waterMask.vue';
2. 注册: components:{
         waterMask
         }

6.这个时候npm run dev 跑起来就能看见了效果了