#!/usr/bin/env sh
# 確保腳本拋出遇到的錯(cuò)誤
set -e
# 生成靜態(tài)文件
npm run docs:build
# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist
# 如果是發(fā)布到自定義域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果發(fā)布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
# 如果發(fā)布到 https://<USERNAME>.github.io/<REPO>
/**這個(gè)地方換成自己的github地址和倉(cāng)庫(kù)地址**/
git push -f git@github.com:FightingN/vue-common-vuepress.git master:gh-pages
cd -

base: '/vue-common-vuepress/',

 mounted(){
          import("my-component").then(myComponent=>{
              console.log("myComponent", myComponent)
              this.dynamicComponent = myComponent.Tree
          })
      },

<template>
	<my-tree/>
</template>
<script>
import Vue from "vue"
	export default {
		mounted(){
		 import("my-component").then(myComponent=>{
              console.log("myComponent", myComponent)
              Vue.component("myTree",myComponent.Tree)
          })
		}
	}
</script>

import { VNode } from "vue"
import { Component, Prop, Vue, Watch } from "vue-property-decorator"
import { dialogConfig } from "./type"
export default class Dialog extends Vue {
  created() {
    this.dialogInit()
    this.getWindowSize()
  }
  /**
   * 彈窗初始化
   * @private
   */
  private dialogInit():void {
       this.id = "lc-dialog" + (Math.random() * 1000000 + new Date().getTime()).toString(16).split(".")[0]
    this.$nextTick(() => {
      const dialogDom:any = document.getElementById(that.id)
      if (!dialogDom) {
        return
      }
      this.dialogDom = dialogDom
      this.headerDom = dialogDom.querySelector(".ant-modal-header")
      this.footerDom = dialogDom.querySelector(".ant-modal-footer")
    })
  }
  /**
   * 獲取窗口尺寸
   * @private
   */
  private getWindowSize():void {
    const that = this as any
    this.windowSize = {
      windowWidth: document.documentElement.clientWidth,
      windowHeight: document.documentElement.clientHeight
    }
    // // console.log(that.dialogScreen)
    // // console.log(that.isScreen)
      window.onresize = () => {
      if (this.dialogScreen && this.isScreen) {
        clearTimeout(this.debounceTimeOut)
        this.debounceTimeOut = setTimeout(() => {
          this.windowSize = {
            windowWidth: document.documentElement.clientWidth,
            windowHeight: document.documentElement.clientHeight
          }
        }, 300)
      }
    }
  }
  render (h:any):VNode {
        ...
     }
}

<!--圖片裁剪-->
<template>
  <lc-dialog
    :title="title"
    :visible.sync="visible"
    :width="800"
    :footer="null"
    ref="cropperModal"
    :before-close="beforeClose"
    :z-index="zIndex"
  >
      <vue-cropper
            ref="cropper"
            :img="img"
            :info="true"
            :auto-crop="options.autoCrop"
            :output-type="config.outputType || (config.originFile ? config.originFile.type : '')"
            :auto-crop-width="options.autoCropWidth"
            :auto-crop-height="options.autoCropHeight"
            :fixed-box="options.fixedBox"
            @real-time="realTime"
          >
          </vue-cropper>
  </lc-dialog>
</template>
<script>
import Vue from "vue"
import VueCropper from "vue-cropper"
import { getZIndexByDiv } from "../../utils/lc-methods"
Vue.use(VueCropper)
export default {
  name: "CropperImg",
  ...
}
</script>

<!--圖片裁剪-->
<template>
  <lc-dialog
      :title="title"
      :visible.sync="visible"
      :width="800"
      :footer="null"
      ref="cropperModal"
      :before-close="beforeClose"
      :z-index="zIndex"
  >
        <component
              v-if="component"
              :is="component"
              ref="cropper"
              :img="img"
              :info="true"
              :auto-crop="options.autoCrop"
              :output-type="config.outputType || (config.originFile ? config.originFile.type : '')"
              :auto-crop-width="options.autoCropWidth"
              :auto-crop-height="options.autoCropHeight"
              :fixed-box="options.fixedBox"
              @real-time="realTime"
          />
  </lc-dialog>
</template>
<script>
import { getZIndexByDiv } from "../../utils/lc-methods"
export default {
  name: "CropperImg",
  mounted() {
  import("vue-cropper").then(VueCropperModule => {
	this.component = VueCropperModule.VueCropper
	} 
 },
 ...
}
</script>

<!--圖片裁剪-->
<template>
  <lc-dialog
      :title="title"
      :visible.sync="visible"
      :width="800"
      :footer="null"
      ref="cropperModal"
      :before-close="beforeClose"
      :z-index="zIndex"
  >
        <component
              v-if="component"
              :is="component"
              ref="cropper"
              :img="img"
              :info="true"
              :auto-crop="options.autoCrop"
              :output-type="config.outputType || (config.originFile ? config.originFile.type : '')"
              :auto-crop-width="options.autoCropWidth"
              :auto-crop-height="options.autoCropHeight"
              :fixed-box="options.fixedBox"
              @real-time="realTime"
          />
  </lc-dialog>
</template>
<script>
import { getZIndexByDiv } from "../../utils/lc-methods"
export default {
  name: "CropperImg",
  mounted() {
    const VueCropperModule = require("vue-cropper")
    // console.log("VueCropperModule", VueCropperModule)
    this.component = VueCropperModule.VueCropper
  },
 ...
}
</script>

import { compressImageFun } from "../../utils/img-method"

export default {
  name: "UploadAvatar",
  data () {
    return ｛
      compressImageFun: null, // 壓縮函數(shù)    注意這里因?yàn)闊o(wú)法直接使用compressImageFun,所以需要存在data中使用
    }
  },
  mounted() {
    const imgMethod = require("../../utils/img-method")
    this.compressImageFun = imgMethod.compressImageFun
  },
  methods: {
   
    /**
     * 上傳之前
     * @param file
     * @returns {boolean}
     */
    async beforeUpload (file) {
      return new Promise(async (resolve, reject) => {
      ...省略若干代碼
        if (!this.noCompress) {
          newCompressFile = await this.compressImageFun({ file: cropperFile || file })
          cropperFile = newCompressFile.data
        }
     ...
      })
    },
}