vue 全局组件声明

counter.vue

<template>
 <div>
    <!-- class="iconfont icon-fenxiang1" v-if='isWxmp' -->
<button class='app-share' @click="$share" :style="comshare"></button>
 </div>
</template>
<script>
 export default {
   name:'shareIcon',
   data() {
    return {
      isWxmp: this.$util.isWxmp(),
      comshare: {
        backgroundImage: "url(" + require("@/assets/image/share.png") + ")",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
      },
    };
  },
   components: {

   }
 }
</script>
<style lang='scss' scoped>
@import "src/style/mixin";
 .app-share {
  width: rem(42);
  height: rem(42);
  top: rem(42);
  position: fixed;
  right: rem(42);
  font-size: rem(40);
  color: #525252;
  background-color: transparent;
  border: 0;
  z-index: 99;
}
</style>

//import counter from '"@/components/counter";' vue的单文件(html js css)
//手动创建
Vue.component("counter", {
  //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
  data() {
    return {
      comshare: {
        backgroundImage: "url(" + require("@/assets/image/share.png") + ")",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
      },
    };
  },

  template: `<button class='app-share'  @click="$share" :style="comshare"></button>`,
});

全局css
man.js 引入
app.vue 中写

.app-share {
  width: rem(42);
  height: rem(42);
  position: absolute;
  right: rem(36);
  font-size: rem(40);
  color: #525252;
  background-color: transparent;
  border: 0;
}