:construction:🎨 Site > Improve structure/build and add example

site/src/components/application/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus"></style>

site/src/components/application/script.js

@@ -0,0 +1,29 @@
+import socketIoClient from 'socket.io-client'
+
+export default
+{
+    name: 'application',
+
+    data()
+    {
+        return {
+            counter: 0
+        }
+    },
+
+    mounted()
+    {
+        const socketUrl = `${process.env === 'production' ? '' : 'http://192.168.1.12:1571/projects'}`
+        const socket = socketIoClient(socketUrl)
+
+        socket.on('connect', () =>
+        {
+            console.log('connected')
+        })
+
+        window.setInterval(() =>
+        {
+            this.counter++
+        }, 1000)
+    }
+}

site/src/components/application/style.styl

@@ -0,0 +1,2 @@
+#application
+    background #f0f

site/src/components/application/template.html

@@ -0,0 +1,3 @@
+<div id="application">
+    {{ counter }}
+</div>

site/src/main.js

@@ -0,0 +1,13 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from '@/components/application/'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+    el: '#app',
+    template: '<App/>',
+    components: { App }
+})