diff options
| -rw-r--r-- | .editorconfig | 4 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | public/js/components/HelloWorld.vue | 21 | ||||
| -rw-r--r-- | public/js/cover.js | 6 | ||||
| -rw-r--r-- | public/js/views/Cover.vue | 15 | ||||
| -rw-r--r-- | public/views/index.ejs | 1 | ||||
| -rw-r--r-- | webpackBaseConfig.js | 8 |
7 files changed, 56 insertions, 1 deletions
diff --git a/.editorconfig b/.editorconfig index 619c178d..b3e30251 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,6 +7,10 @@ indent_size = 4 trim_trailing_whitespace = true insert_final_newline = true +[*.vue] +indent_style = space +indent_size = 2 + [*.md] trim_trailing_whitespace = false diff --git a/package.json b/package.json index 5ac7f554..d44313cd 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "visibilityjs": "^1.2.4", "viz.js": "^1.4.1", "vue": "^2.1.6", + "vue-loader": "^10.0.2", "winston": "^2.3.0", "xss": "^0.3.2" }, @@ -162,6 +163,7 @@ "script-loader": "^0.7.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", + "vue-template-compiler": "^2.1.6", "webpack": "^1.14.0" } } diff --git a/public/js/components/HelloWorld.vue b/public/js/components/HelloWorld.vue new file mode 100644 index 00000000..d8e3007f --- /dev/null +++ b/public/js/components/HelloWorld.vue @@ -0,0 +1,21 @@ +<template> + <h1>{{ message }}</h1> +</template> + +<script> +export default { + name: 'HelloWorld', + + data() { + return { + message: 'Hello Vue' + } + } +} +</script> + +<style scoped> +h1 { + color: blue; +} +</style> diff --git a/public/js/cover.js b/public/js/cover.js index 4696203e..b8886849 100644 --- a/public/js/cover.js +++ b/public/js/cover.js @@ -28,8 +28,14 @@ var saveAs = require('file-saver').saveAs; var List = require('list.js'); var S = require('string'); +import Cover from './views/Cover'; import Vue from 'vue'; +new Vue({ + el: '#cover-app', + render: (h) => h(Cover) +}) + var options = { valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'], item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\ diff --git a/public/js/views/Cover.vue b/public/js/views/Cover.vue new file mode 100644 index 00000000..767d087f --- /dev/null +++ b/public/js/views/Cover.vue @@ -0,0 +1,15 @@ +<template> + <hello-world /> +</template> + +<script> +import HelloWorld from '../components/HelloWorld'; + +export default { + name: 'Cover', + + components: { + HelloWorld + } +} +</script> diff --git a/public/views/index.ejs b/public/views/index.ejs index adcdd34d..5b84f4fc 100644 --- a/public/views/index.ejs +++ b/public/views/index.ejs @@ -30,6 +30,7 @@ <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> + <div id="cover-app"></div> <div class="masthead clearfix"> <div class="inner"> diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 5c715cc2..6c569c1e 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -338,7 +338,7 @@ module.exports = { path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules') ], - extensions: ["", ".js"], + extensions: ["", ".js", ".vue"], alias: { codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'), inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'), @@ -373,6 +373,12 @@ module.exports = { test: /\.json$/, loader: 'json-loader' }, { + test: /\.vue$/, + loader: 'vue', + options: { + // vue-loader options go here + } + }, { test: /\.js$/, loader: 'babel', exclude: [/node_modules/, /public\/vendor/] |