Html網頁中驅動Vue組件

Html網頁中驅動Vue組件

通常Vue組件的使用辦法，是通過vue-cli創建一個應用骨架，然後import相應組件，在應用中調用createApp創建app根結點，然後初始化整個頁面、應用。

這樣得到的應用，是需要進行編譯、打包轉換後的js/css等文件。

我希望是在手工弄一個原始純淨的HTML，將vue組件的js文件引入，然後初始化起來。

這樣的做法類似於webpack的dll組件思想，組件應該是方便加載、適配、運行的，而不是必須編譯、打包後才能正常支行。

1.前提

首先，能夠這麼做的vue組件，必須打包成umd之類的組件包。

2.目標組件

選定 X-Flowchart-Vue組件，gitee鏈接：https://gitee.com/tangafa/X-Flowchart-Vue

選定他的原因在於，這個組件的示例、初始加載代碼不復雜。

如下即爲組件使用示例App.vue的代碼。

<style lang="less">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>

<template>
  <div id="app">
    <div id="xfc"></div>
  </div>
</template>

<script>
  import xfc from '../dist/xfc.umd.min.js'
  import '../dist/xfc.css'

  export default {
    name: 'app',
    mounted () {
      const system = {
        version: '1.0.0',
        name: 'xfcDemo',
        author: 'OXOYO',
        description: 'xfcDemo',
        title: 'xfcDemo',
        logo: require('@/assets/images/logo.png'),
        github: 'https://github.com/OXOYO/X-Flowchart-Vue',
        githubPages: 'http://oxoyo.co/X-Flowchart-Vue/',
        feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',
        copyright: '©2019 - 2020 OXOYO All Rights Reserved.'
      }

      // 初始化
      const xfcEditor = xfc({
        el: '#xfc',
        props: {
          system
        }
      })
      console.log('xfcEditor', xfcEditor)
      xfcEditor.$nextTick(() => {
        // FIXME API調用示例
        // 初始化數據
        xfcEditor.read({"nodes":[{"id":"g2","draggable":true,"type":"hexagon","label":"","labelCfg":{"position":"center","style":{"fontSize":16,"stroke":"#000000"}},"width":80,"height":40,"minWidth":20,"minHeight":20,"anchorPoints":[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]],"shapeControl":{"controllers":[[0,0,"nwse-resize"],[0,0.5,"ew-resize"],[0,1,"nesw-resize"],[0.5,0,"ns-resize"],[0.5,1,"ns-resize"],[1,0,"nesw-resize"],[1,0.5,"ew-resize"],[1,1,"nwse-resize"]],"rotate":true},"name":"XFC_NODE_Hexagon","x":279,"y":99,"size":[80,40],"style":{"fill":"#FFFFFF","fillOpacity":1,"stroke":"#000000","strokeOpacity":1,"lineWidth":1,"lineDash":[]},"groupId":""},{"id":"g4","draggable":true,"type":"circle","label":"","labelCfg":{"position":"center","style":{"fontSize":16,"stroke":"#000000"}},"width":80,"height":80,"minWidth":20,"minHeight":20,"anchorPoints":[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]],"shapeControl":{"controllers":[[0,0,"nwse-resize"],[0,0.5,"ew-resize"],[0,1,"nesw-resize"],[0.5,0,"ns-resize"],[0.5,1,"ns-resize"],[1,0,"nesw-resize"],[1,0.5,"ew-resize"],[1,1,"nwse-resize"]],"rotate":true},"name":"XFC_NODE_Circle","x":462,"y":92,"size":[80,80],"style":{"fill":"#FFFFFF","fillOpacity":1,"stroke":"#000000","strokeOpacity":1,"lineWidth":1,"lineDash":[]},"groupId":""}],"edges":[{"id":"g5","source":"g2","sourceAnchor":7,"target":"g4","label":"","labelCfg":{"position":"center","style":{"autoRotate":true,"fontSize":16,"stroke":"#000000"}},"attrs":{"start":"g2","end":"g4"},"style":{"lineAppendWidth":10,"stroke":"#000000","lineWidth":1,"strokeOpacity":1,"lineDash":[],"endArrow":{"path":"M0,0 L20,-10 L20,10 Z","d":0,"fill":"#000000","stroke":"#000000"}},"type":"x-line","startArrow":false,"endArrow":false,"startPoint":{"x":319.70710678118655,"y":99,"index":7},"endPoint":{"x":421.5,"y":92,"index":15},"targetAnchor":15}],"combos":[],"groups":[]})
        // 保存圖片
        // xfcEditor.downloadImage()
      })
    }
  }
</script>

3.轉化css

示例App.vue包含了SCSS樣式代碼，轉化成標準CSS，並不困難

如下：

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.頁面初始化腳本

頁面初始化腳本，對應vue組件的mounted ()函數內的代碼，轉化並簡化後，如下：

<script>
    //console.log(xfc)
    const system = {
        version: '1.0.0',
        name: 'xfcDemo',
        author: 'OXOYO',
        description: 'xfcDemo',
        title: 'xfcDemo',
        logo:  '/assets/x-flowchart/logo.png',
        github: 'https://github.com/OXOYO/X-Flowchart-Vue',
        githubPages: 'http://oxoyo.co/X-Flowchart-Vue/',
        feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',
        copyright: '©2019 - 2020 OXOYO All Rights Reserved.'
      }

      // 初始化
      const xfcEditor = xfc.default({
        el: '#xfc',
        props: {
          system
        }
      })
      xfcEditor.$nextTick(() => {
        // 初始化數據
        xfcEditor.read({})
        // 保存圖片
        // xfcEditor.downloadImage()
      })
</script>

5.拼裝

完整的HTML需要引入依賴的vue.runtime.min.js，組件的js與css等，如下：

<meta charset="utf-8">
<meta name="referrer" content="origin">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>xfc demo</title>
<style>
//.....
</style>
<script src="/assets/vue/v2.6.10/vue.runtime.min.js"></script>
<script src="/assets/x-flowchart/xfc.umd.js"></script>
<link rel="stylesheet" href="/assets/x-flowchart/xfc.css">

<div id="app">
<div id="xfc"></div>
</div>
<script>
    //....
</script>

HTML中的/assets等目錄即爲網站部署的資源文件路徑。

6.總結

vue組件的質量也是差別很大，這個組件封裝得較好，外部使用的依賴等問題就少很多，也能基本展現在HTML中如何加載並使用vue組件了。