diff --git a/.bablerc b/.bablerc new file mode 100644 index 0000000..41f3bd5 --- /dev/null +++ b/.bablerc @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "es2015", + { + "modules": false + } + ], + "stage-2" + ], + "ignore": [ + "node_modules/*" + ] +} diff --git a/.eslintrc.js b/.eslintrc.js index 7415487..20fef22 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,6 @@ module.exports = { - root: true, //sets this file as the parent scope for the rules + root: true, //sets this file as the parent scope for the rules, + parser: 'babel-eslint', parserOptions:{ sourceType: 'module' }, diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js index 0218f9d..253e9bd 100644 --- a/build/webpack.base.config.js +++ b/build/webpack.base.config.js @@ -15,19 +15,29 @@ //We do not want to use this in production because it //instead we whatnt o make sure that all components are defined in *.vuejs //files, because they are pre-compiled - resolve: { // What the hell does resolve do? - alias:{ - vue: 'vue/dist/vue.js' - } - }, + // this is only needed if you are not using the vue-template-compiler + //resolve: { // What the hell does resolve do? + // alias:{ + // vue: 'vue/dist/vue.js' + // } + //}, module: { rules: [ { enforce: 'pre', //check source files before they are loader by other loaders - test: /(\.js$)/, + test: /(\.js$)|(\.vue$)/, //linting for both js and vue files loader: 'eslint-loader', exclude: /node_modules/ + }, + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.js$/, // This rule applies after the .vue files are transpiled to .js files through the vue loader + loader: 'babel-loader', + exclude: /node_modules/ } ] } diff --git a/index.html b/index.html index f0b30a8..16e6d6a 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,7 @@ -
- {{ message }} -
+
diff --git a/package.json b/package.json index cf719dc..e209be1 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,14 @@ "license": "MIT", "dependencies": { "express": "^4.16.2", - "vue": "^2.5.5" + "vue": "^2.5.6" }, "devDependencies": { + "babel-core": "^6.26.0", + "babel-eslint": "^7.2.3", + "babel-loader": "^7.1.2", + "babel-preset-es2015": "^6.24.1", + "babel-preset-stage-2": "^6.24.1", "eslint": "^4.5.0", "eslint-config-standard": "^10.2.1", "eslint-loader": "^1.9.0", @@ -22,6 +27,8 @@ "eslint-plugin-node": "^5.1.1", "eslint-plugin-promise": "^3.5.0", "eslint-plugin-standard": "^3.0.1", + "vue-loader": "^13.5.0", + "vue-template-compiler": "^2.5.6", "webpack": "^3.8.1", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.20.0" diff --git a/src/app.js b/src/app.js index 07bdae5..2b039c2 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,10 @@ import Vue from 'vue' +import AppLayout from './theme/Layout.vue' const app = new Vue({ - data: { - message: 'Hello Vue' - }, - template: '
{{ message }}
' + // render is a Vuejs function that will return an elements + // This is equivalent to template: '' + render: h => h(AppLayout) }) export { app } diff --git a/src/client-entry.js b/src/client-entry.js index 16f7ac2..c4aa5c1 100644 --- a/src/client-entry.js +++ b/src/client-entry.js @@ -2,7 +2,3 @@ import { app } from './app' // We can use the $mount when we didn't specify the el property name app.$mount('#app') - -if (module.hot) { - module.hot.accept() -} diff --git a/src/theme/Layout.vue b/src/theme/Layout.vue new file mode 100644 index 0000000..3bae9ed --- /dev/null +++ b/src/theme/Layout.vue @@ -0,0 +1,23 @@ + +