From d6ae7a36aeef3b5c261bb521f5e3f48898b65ede Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Sat, 24 Dec 2016 11:09:07 +0800 Subject: [PATCH 1/3] Fix module variable require --- public/js/cover.js | 1 + public/js/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/public/js/cover.js b/public/js/cover.js index 2f35bd28..ee7d75e4 100644 --- a/public/js/cover.js +++ b/public/js/cover.js @@ -9,6 +9,7 @@ var urlpath = common.urlpath; var resetCheckAuth = common.resetCheckAuth; var getLoginState = common.getLoginState; var clearLoginState = common.clearLoginState; +var loginStateChangeEvent = common.loginStateChangeEvent; var historyModule = require('./history'); var parseStorageToHistory = historyModule.parseStorageToHistory; diff --git a/public/js/index.js b/public/js/index.js index 96580fe3..4a466245 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -29,6 +29,7 @@ var DROPBOX_APP_KEY = common.DROPBOX_APP_KEY; var noteurl = common.noteurl; var checkLoginStateChanged = common.checkLoginStateChanged; +var loginStateChangeEvent = common.loginStateChangeEvent; var extra = require('./extra'); var md = extra.md; From a06fad974e66c8c5854985fe12fbadbb43cc9c7e Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Sat, 24 Dec 2016 11:10:18 +0800 Subject: [PATCH 2/3] Install vue and babel dependency --- .babelrc | 8 ++++++++ package.json | 7 +++++++ public/js/cover.js | 2 ++ webpackBaseConfig.js | 4 ++++ 4 files changed, 21 insertions(+) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..cbd3ac60 --- /dev/null +++ b/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "es2015" + ], + "plugins": [ + "transform-runtime" + ] +} diff --git a/package.json b/package.json index 7c2441b9..5ac7f554 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "velocity-animate": "^1.4.0", "visibilityjs": "^1.2.4", "viz.js": "^1.4.1", + "vue": "^2.1.6", "winston": "^2.3.0", "xss": "^0.3.2" }, @@ -139,6 +140,12 @@ "url": "https://github.com/hackmdio/hackmd.git" }, "devDependencies": { + "babel-cli": "^6.18.0", + "babel-core": "^6.21.0", + "babel-loader": "^6.2.10", + "babel-plugin-transform-runtime": "^6.15.0", + "babel-preset-es2015": "^6.18.0", + "babel-runtime": "^6.20.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.26.1", "ejs-loader": "^0.3.0", diff --git a/public/js/cover.js b/public/js/cover.js index ee7d75e4..4696203e 100644 --- a/public/js/cover.js +++ b/public/js/cover.js @@ -28,6 +28,8 @@ var saveAs = require('file-saver').saveAs; var List = require('list.js'); var S = require('string'); +import Vue from 'vue'; + var options = { valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'], item: '
  • \ diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 400db14b..5c715cc2 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -372,6 +372,10 @@ module.exports = { loaders: [{ test: /\.json$/, loader: 'json-loader' + }, { + test: /\.js$/, + loader: 'babel', + exclude: [/node_modules/, /public\/vendor/] }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') From 99dd10772422b66b7f98f1483b5fa3225e3e86e0 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Sat, 24 Dec 2016 11:50:57 +0800 Subject: [PATCH 3/3] Basic setup for Vue app --- .editorconfig | 4 ++++ package.json | 2 ++ public/js/components/HelloWorld.vue | 21 +++++++++++++++++++++ public/js/cover.js | 6 ++++++ public/js/views/Cover.vue | 15 +++++++++++++++ public/views/index.ejs | 1 + webpackBaseConfig.js | 8 +++++++- 7 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 public/js/components/HelloWorld.vue create mode 100644 public/js/views/Cover.vue 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 @@ + + + + + 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: '
  • \ 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 @@ + + + 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 @@
    +
    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'), @@ -372,6 +372,12 @@ module.exports = { loaders: [{ test: /\.json$/, loader: 'json-loader' + }, { + test: /\.vue$/, + loader: 'vue', + options: { + // vue-loader options go here + } }, { test: /\.js$/, loader: 'babel',