add vue2 demo

packages/artplayer-template/vue2.js/src/App.vue

@@ -0,0 +1,31 @@
+<template>
+    <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from './Artplayer.vue';
+
+export default {
+    data() {
+        return {
+            option: {
+                url: 'https://artplayer.org/assets/sample/video.mp4',
+                autoSize: true,
+            },
+            style: {
+                width: '600px',
+                height: '400px',
+                margin: '60px auto 0',
+            },
+        };
+    },
+    components: {
+        Artplayer,
+    },
+    methods: {
+        getInstance(art) {
+            console.log(art);
+        },
+    },
+};
+</script>

packages/artplayer-template/vue2.js/src/Artplayer.vue

@@ -0,0 +1,36 @@
+<template>
+    <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from 'artplayer';
+
+export default {
+    data() {
+        return {
+            instance: null,
+        };
+    },
+    props: {
+        option: {
+            type: Object,
+            required: true,
+        },
+    },
+    mounted() {
+        this.instance = new Artplayer({
+            ...this.option,
+            container: this.$refs.artRef,
+        });
+
+        this.$nextTick(() => {
+            this.$emit('get-instance', this.instance);
+        });
+    },
+    beforeUnmount() {
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy(false);
+        }
+    },
+};
+</script>

packages/artplayer-template/vue2.js/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

packages/artplayer-template/vue2.js/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')