temp: Integrate VueJS 2.

tommyip · Jan 25, 2017 · 97cf122 · 97cf122
1 parent 747f66b
commit 97cf122
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "jquery-validation": "1.15.1",
     "plotly.js": "1.19.2",
     "webpack": "1.12.2",
-    "zxcvbn": "4.4.1"
+    "zxcvbn": "4.4.1",
+    "vue": "2.1.10"
   },
   "devDependencies": {
     "casperjs": "1.1.3",
@@ -27,7 +28,12 @@
     "nwmatcher": "1.3.6",
     "phantomjs-prebuilt": "2.1.14",
     "webpack-dev-server": "1.12.1",
-    "xmlhttprequest": "1.5.0"
+    "xmlhttprequest": "1.5.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.0"
   },
   "scripts": {
     "lint": "eslint --quiet",

diff --git a/static/js/components/sidebar.vue b/static/js/components/sidebar.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        {{ msg }}
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'sidebar',
+    data: function () {
+        msg: 'Testing string from Vue.js'
+    }
+}
+</script>
diff --git a/static/js/src/main.js b/static/js/src/main.js
@@ -1,4 +1,6 @@
 // commonjs code goes here
+var Vue = require('vue');
+var sidebar = require('../components/sidebar.vue');
 
 (function () {
     var i18n = window.i18n = require('i18next');
@@ -52,4 +54,9 @@
         }
     };
 
+    new Vue({
+        el: '#sidebar',
+        render: function(h) { h(sidebar); }
+    });
+
 }());
diff --git a/templates/zerver/index.html b/templates/zerver/index.html
@@ -70,6 +70,7 @@ <h3>{{ _('Loading...') }}</h3>
   </div>
 </div>
 
+<div id="sidebar"></div>
 <div class="app">
 <div class="app-main">
     <div class="column-left">

diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -1,3 +1,5 @@
+var webpack = require('webpack')
+
 module.exports = {
     entry: [
         'webpack-dev-server/client?http://0.0.0.0:9991/socket.io',
@@ -17,4 +19,19 @@ module.exports = {
             poll: 1000,
         },
     },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'file-loader',
+                options: {
+                    name: '[name].[ext]?[hash]'
+                }
+            }
+        ]
+    }
 };