Permalink
Browse files

Upgrading to Vue 2.0

  • Loading branch information...
1 parent e2547c3 commit a1b7acb97ee2fd14862e9338d0edc07272aa8d13 @craigatk committed Oct 2, 2016
@@ -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)
})
@@ -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')
@@ -57,10 +58,6 @@ module.exports = {
loader: 'json'
},
{
- test: /\.html$/,
- loader: 'vue-html'
- },
- {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
@@ -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']
+ })
+ ]
}
}
View
@@ -5,7 +5,7 @@
<title>Daily Status</title>
</head>
<body>
- <app></app>
+ <div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
View
@@ -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"
}
}
View
@@ -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
}
}
@@ -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>
View
@@ -3,6 +3,6 @@ import App from './App'
/* eslint-disable no-new */
new Vue({
- el: 'body',
- components: { App }
+ el: '#app',
+ render: h => h(App)
})
@@ -1,4 +1,4 @@
-/*global fetch*/
+/* global fetch */
import { EventEmitter } from 'events'
import 'whatwg-fetch'
@@ -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)

0 comments on commit a1b7acb

Please sign in to comment.