Upgrading to Vue 2.0

craigatk · Oct 2, 2016 · a1b7acb · a1b7acb
1 parent e2547c3
commit a1b7acb
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 58 deletions.
diff --git a/src/app/build/dev-server.js b/src/app/build/dev-server.js
@@ -2,6 +2,7 @@ var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
 var config = require('../config')
+var opn = require('opn')
 var proxyMiddleware = require('http-proxy-middleware')
 var webpackConfig = process.env.NODE_ENV === 'testing'
   ? require('./webpack.prod.conf')
@@ -61,5 +62,7 @@ module.exports = app.listen(port, function (err) {
     console.log(err)
     return
   }
-  console.log('Listening at http://localhost:' + port + '\n')
+  var uri = 'http://localhost:' + port
+  console.log('Listening at ' + uri + '\n')
+  opn(uri)
 })
diff --git a/src/app/build/webpack.base.conf.js b/src/app/build/webpack.base.conf.js
@@ -17,6 +17,7 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
+      'vue': 'vue/dist/vue.common.js',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components')
@@ -56,10 +57,6 @@ module.exports = {
         test: /\.json$/,
         loader: 'json'
       },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url',
@@ -88,6 +85,11 @@ module.exports = {
     formatter: require('eslint-friendly-formatter')
   },
   vue: {
-    loaders: utils.cssLoaders()
+    loaders: utils.cssLoaders(),
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['last 2 versions']
+      })
+    ]
   }
 }
diff --git a/src/app/index.html b/src/app/index.html
@@ -5,7 +5,7 @@
     <title>Daily Status</title>
   </head>
   <body>
-    <app></app>
+    <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/app/package.json b/src/app/package.json
@@ -15,10 +15,11 @@
     "babel-polyfill": "6.13.0",
     "babel-runtime": "6.11.6",
     "jquery": "3.1.0",
-    "vue": "1.0.28",
+    "vue": "2.0.1",
     "whatwg-fetch": "1.0.0"
   },
   "devDependencies": {
+    "autoprefixer": "6.4.0",
     "babel-core": "6.16.0",
     "babel-eslint": "6.1.2",
     "babel-loader": "6.2.5",
@@ -30,28 +31,28 @@
     "bootswatch": "3.3.7",
     "chai": "3.5.0",
     "connect-history-api-fallback": "1.1.0",
-    "css-loader": "0.23.1",
-    "eslint": "2.10.2",
-    "eslint-config-standard": "5.1.0",
+    "css-loader": "0.25.0",
+    "eslint": "3.6.1",
+    "eslint-config-standard": "6.1.0",
     "eslint-friendly-formatter": "2.0.5",
-    "eslint-loader": "1.3.0",
+    "eslint-loader": "1.5.0",
     "eslint-plugin-html": "1.3.0",
-    "eslint-plugin-promise": "1.0.8",
-    "eslint-plugin-standard": "1.3.2",
+    "eslint-plugin-promise": "2.0.1",
+    "eslint-plugin-standard": "2.0.1",
     "eventsource-polyfill": "0.9.6",
     "express": "4.13.3",
     "extract-text-webpack-plugin": "1.0.1",
     "fetch-mock": "5.1.2",
     "fetchmock": "1.0.1",
-    "file-loader": "0.8.4",
+    "file-loader": "0.9.0",
     "function-bind": "1.0.2",
     "html-webpack-plugin": "2.22.0",
-    "http-proxy-middleware": "0.12.0",
+    "http-proxy-middleware": "0.17.2",
     "inject-loader": "2.0.1",
     "isparta-loader": "2.0.0",
     "jasmine-core": "2.5.1",
     "json-loader": "0.5.4",
-    "karma": "0.13.19",
+    "karma": "1.3.0",
     "karma-jasmine": "1.0.2",
     "karma-junit-reporter": "^1.1.0",
     "karma-phantomjs-launcher": "1.0.0",
@@ -61,20 +62,19 @@
     "karma-webpack": "1.7.0",
     "lolex": "1.4.0",
     "node-sass": "3.10.1",
+    "opn": "4.0.2",
     "ora": "0.2.0",
     "phantomjs-prebuilt": "2.1.3",
     "sass-loader": "4.0.2",
-    "shelljs": "0.6.0",
+    "shelljs": "0.7.4",
     "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
     "url-loader": "0.5.7",
-    "vue-hot-reload-api": "1.3.3",
-    "vue-html-loader": "1.2.3",
-    "vue-loader": "8.5.4",
+    "vue-loader": "9.5.1",
     "vue-style-loader": "1.0.0",
     "webpack": "1.13.2",
-    "webpack-dev-middleware": "1.4.0",
-    "webpack-hot-middleware": "2.6.0",
-    "webpack-merge": "0.8.3"
+    "webpack-dev-middleware": "1.8.3",
+    "webpack-hot-middleware": "2.12.2",
+    "webpack-merge": "0.14.1"
   }
 }
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
@@ -1,48 +1,33 @@
 <template>
-  <nav class="navbar navbar-default">
+  <div>
+    <navBar></navBar>
     <div class="container">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">Status</a>
+      <div class="row">
+        <div class="col-md-6 col-md-offset-3">
+          <h1>Your Status</h1>
+        </div>
       </div>
+      <submit></submit>
 
-      <div class="collapse navbar-collapse" id="navbar-collapse">
-        <ul class="nav navbar-nav">
-
-        </ul>
-      </div>
-    </div>
-  </nav>
-
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <h1>Your Status</h1>
-      </div>
-    </div>
-    <submit></submit>
-
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <h1>Team Status</h1>
+      <div class="row">
+        <div class="col-md-6 col-md-offset-3">
+          <h1>Team Status</h1>
+        </div>
       </div>
+      <list></list>
     </div>
-    <list></list>
   </div>
 </template>
 
 <script>
 import List from './components/List'
+import NavBar from './components/NavBar'
 import Submit from './components/Submit'
 
 export default {
   components: {
     List,
+    NavBar,
     Submit
   }
 }

diff --git a/src/app/src/components/NavBar.vue b/src/app/src/components/NavBar.vue
@@ -0,0 +1,21 @@
+<template>
+  <nav class="navbar navbar-default">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#">Status</a>
+      </div>
+
+      <div class="collapse navbar-collapse" id="navbar-collapse">
+        <ul class="nav navbar-nav">
+
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/src/app/src/main.js b/src/app/src/main.js
@@ -3,6 +3,6 @@ import App from './App'
 
 /* eslint-disable no-new */
 new Vue({
-  el: 'body',
-  components: { App }
+  el: '#app',
+  render: h => h(App)
 })
diff --git a/src/app/src/store/index.js b/src/app/src/store/index.js
@@ -1,4 +1,4 @@
-/*global fetch*/
+/* global fetch */
 
 import { EventEmitter } from 'events'
 import 'whatwg-fetch'

diff --git a/src/app/test/unit/index.js b/src/app/test/unit/index.js
@@ -3,11 +3,11 @@
 Function.prototype.bind = require('function-bind')
 
 // require all test files (files that ends with .spec.js)
-var testsContext = require.context('./specs', true, /\.spec$/)
+const testsContext = require.context('./specs', true, /\.spec$/)
 testsContext.keys().forEach(testsContext)
 
 // require all src files except main.js for coverage.
 // you can also change this to match only the subset of files that
 // you want coverage for.
-var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
+const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
 srcContext.keys().forEach(srcContext)