form-generator地址：https://gitee.com/mrhj/form-generator
1.在html中使用環(huán)境變量

<script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>

2.vue等包通過cdn引入，在打包時去掉

  <script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
  <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>

  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT'
    }
  },

3.使用與vue-vue-element-admin同樣的方式處理svg
使用svg-sprite-loader

  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }

4.在處理拖拽事件時，在App.vue中添加

    // fix: firefox 下 拖拽 會新打卡一個選項卡
    // https://github.com/JakHuang/form-generator/issues/15
    document.body.ondrop = event => {
      event.preventDefault()
      event.stopPropagation()
    }

5.使用el-scrollbar，里面放滾動內(nèi)容
6.使用vuedraggable處理拖拽
7.使用輸?shù)膄ind方法，返回第一個符合條件的項

let target = inputComponents.find(item => item.__config__.tagIcon === tagIcon)

8.每一個表單項要生成唯一的字段名
idGlobal是自增的

item.__vModel__ = `field${this.idGlobal}`

9.首字母大寫

export function titleCase(str) {
  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}

10.短杠轉(zhuǎn)駝峰

export function camelCase(str) {
  return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}

9.在瀏覽器中代碼格式化
https://www.npmjs.com/package/js-beautify
10.在瀏覽器中編輯代碼
https://www.npmjs.com/package/monaco-editor
11.加載一個遠程script

const callbacks = {}

/**
 * 加載一個遠程腳本
 * @param {String} src 一個遠程腳本
 * @param {Function} callback 回調(diào)
 */
function loadScript(src, callback) {
  const existingScript = document.getElementById(src)
  const cb = callback || (() => {})
  if (!existingScript) {
    callbacks[src] = []
    const $script = document.createElement('script')
    $script.src = src
    $script.id = src
    $script.async = 1
    document.body.appendChild($script)
    const onEnd = 'onload' in $script ? stdOnEnd.bind($script) : ieOnEnd.bind($script)
    onEnd($script)
  }

  callbacks[src].push(cb)

  function stdOnEnd(script) {
    script.onload = () => {
      this.onerror = this.onload = null
      callbacks[src].forEach(item => {
        item(null, script)
      })
      delete callbacks[src]
    }
    script.onerror = () => {
      this.onerror = this.onload = null
      cb(new Error(`Failed to load ${src}`), script)
    }
  }

  function ieOnEnd(script) {
    script.onreadystatechange = () => {
      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
      this.onreadystatechange = null
      callbacks[src].forEach(item => {
        item(null, script)
      })
      delete callbacks[src]
    }
  }
}

/**
 * 順序加載一組遠程腳本
 * @param {Array} list 一組遠程腳本
 * @param {Function} cb 回調(diào)
 */
export function loadScriptQueue(list, cb) {
  const first = list.shift()
  list.length ? loadScript(first, () => loadScriptQueue(list, cb)) : loadScript(first, cb)
}

export default loadScript

12.http-vue-loader直接加載.vue文件
https://www.npmjs.com/package/http-vue-loader
13.保存文件到本地file-saver
https://www.npmjs.com/package/file-saver