Jesus fucking christ it takes this much bullshit to use webpack ES6 and Vue

7 years ago · a915c4eef5
parent 716f6946a7
commit a915c4eef5
8 changed files with 68 additions and 19 deletions
--- a/.bablerc
+++ b/.bablerc
@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "es2015",
+      {
+        "modules": false
+      }
+    ],
+    "stage-2"
+  ],
+  "ignore": [
+    "node_modules/*"
+  ]
+}
--- 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'
  },
--- 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/
        }
      ]
    }
--- a/index.html
+++ b/index.html
@ -6,9 +6,7 @@
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
  </head>
  <body>
-    <div id="app">
-      {{ message }}
-    </div>
+    <div id="app"></div>
    <script src="/assets/js/app.js"></script>
  </body>
 </html>
--- 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"
--- 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: '<div id="app">{{ message }}</div>'
+  // render is a Vuejs function that will return an elements
+  // This is equivalent to template: '<app></app>'
+  render: h => h(AppLayout)
 })

 export { app }
--- 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()
-}
--- a/src/theme/Layout.vue
+++ b/src/theme/Layout.vue
@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <nav class="nav has-shadow">
+      <div class="container">
+        <a href="/">
+          <img src="http://bit.ly/vue-img" alt="Vue SPA" />
+        </a>
+      </div>
+    </nav>
+    <section class="main-section section"></section>
+    <footer class="footer">
+      <div class="container">
+        <div class="content has-text-centered">
+          Follow us on
+          <a href="https://twitter.com/bstavroulakis" target="_blank">Twitter</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+<script>
+  export default {}
+</script>