chenkie · fouding · Oct 23, 2016 · Oct 23, 2016 · Oct 24, 2016 · Oct 24, 2016
diff --git a/client/.babelrc b/client/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "presets": [
+    ["es2015", { "modules": false }]
+  ]
 }
diff --git a/client/index.html b/client/index.html
@@ -7,8 +7,8 @@
   </head>
   <body>
     <div id="app">
-      <app></app>
-      <!-- built files will be auto injected -->
-    </div>    
+        <app></app>
+    </div>
+    <script src="/dist/build.js"></script>
   </body>
 </html>
diff --git a/client/package.json b/client/package.json
@@ -1,74 +1,26 @@
 {
-  "name": "vue-time-test",
-  "version": "0.1.0",
-  "description": "A Vue.js project",
-  "author": "Ryan Chenkie <ryanchenkie@gmail.com>",
-  "scripts": {
-    "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
-    "unit": "karma start test/unit/karma.conf.js --single-run",
-    "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e"
-  },
-  "dependencies": {
-    "vue": "^1.0.18",
-    "babel-runtime": "^5.8.0",
-    "vue-resource": "^0.7.0",
-    "vue-router": "^0.7.12"
-  },
-  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
-    "chai": "^3.5.0",
-    "chromedriver": "^2.21.2",
-    "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^2.1.5",
-    "css-loader": "^0.23.0",
-    "eslint": "^2.0.0",
-    "eslint-config-standard": "^5.1.0",
-    "eslint-friendly-formatter": "^1.2.2",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^1.0.8",
-    "eslint-plugin-standard": "^1.3.2",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.4",
-    "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.12.0",
-    "inject-loader": "^2.0.1",
-    "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
-    "karma": "^0.13.15",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sinon-chai": "^1.2.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
-    "karma-webpack": "^1.7.0",
-    "lolex": "^1.4.0",
-    "mocha": "^2.4.5",
-    "nightwatch": "^0.8.18",
-    "ora": "^0.2.0",
-    "phantomjs-prebuilt": "^2.1.3",
-    "selenium-server": "2.53.0",
-    "shelljs": "^0.6.0",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.0.0",
-    "vue-loader": "^8.2.1",
-    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3"
-  }
-}
+    "name": "simple-vue-time-tracker",
+    "description": "a vue timetracker inited with vue cli's webpack-simple template.",
+    "author": "fzh@ajyj",
+    "private": true,
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    },
+    "dependencies": {
+        "vue": "^2.0.1",
+        "vue-resource": "^1.0.3",
+        "vue-router": "^2.0.1"
+    },
+    "devDependencies": {
+        "babel-core": "^6.0.0",
+        "babel-loader": "^6.0.0",
+        "babel-preset-es2015": "^6.0.0",
+        "cross-env": "^3.0.0",
+        "css-loader": "^0.25.0",
+        "file-loader": "^0.9.0",
+        "vue-loader": "^9.7.0",
+        "webpack": "^2.1.0-beta.25",
+        "webpack-dev-server": "^2.1.0-beta.0"
+    }
+}
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -7,8 +7,8 @@
           Vue Time Tracker
         </a>
         <ul class="nav navbar-nav">
-          <li><a v-link="'/home'">Home</a></li>
-          <li><a v-link="'/time-entries'">Time Entries</a></li>
+          <li><router-link to="/home">Home</router-link></li>
+          <li><router-link to="/time-entries">Time Entries</router-link></li>
         </ul>
       </div>
     </nav>
@@ -17,7 +17,7 @@
         <sidebar :time="totalTime"></sidebar>
       </div>
       <div class="col-sm-9">
-        <router-view></router-view>
+        <router-view @deleteTime="deleteTime" @timeUpdate="timeUpdate"></router-view>
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@
         totalTime: 1.5
       }
     },
-    events: {
+        methods: {
       // Increment the totalTime value based on the new
       // time entry that is dispatched up
       timeUpdate (timeEntry) {

diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
@@ -3,7 +3,7 @@
     <h1>Vue Time Tracker</h1>
     <p>
       <strong>
-        Get started by <a v-link="'/time-entries'">creating a time entry</a>.
+        Get started by <router-link to="/time-entries">creating a time entry</router-link>.
       </strong>
     </p>  
   </div>

diff --git a/client/src/components/LogTime.vue b/client/src/components/LogTime.vue
@@ -32,10 +32,10 @@
       </div>        
     </div>    
     <button class="btn btn-primary" @click="save()">Save</button>
-    <button v-link="'/time-entries'" class="btn btn-danger">Cancel</button>    
+    <button class="btn btn-danger"><router-link to="/time-entries">Cancel</router-link></button>    
     <hr>
   </div>
-  
+
 </template>
 
 <script>
@@ -59,9 +59,18 @@
         let timeEntry = this.timeEntry
         // We dispatch the timeEntry so it can be pushed
         // onto the timeEntries array in the parent component
-        this.$dispatch('timeUpdate', timeEntry)
-        this.timeEntry = {}
+        // this.$dispatch('timeUpdate', timeEntry)
+        this.$emit('timeUpdate', timeEntry)
+        this.$parent.$emit('timeUpdate', timeEntry)
+        this.timeEntry = {
+			user: {
+				firstName: 'Ryan',
+				lastName: 'Chenkie',
+				email: 'ryanchenkie@gmail.com',
+				image: 'https://1.gravatar.com/avatar/7f4ec37467f2f7db6fffc7b4d2cc8dc2?s=250&d=retro&r=g'
+			}
+		}
       }
     }
   }
-</script>
+</script>
diff --git a/client/src/components/TimeEntries.vue b/client/src/components/TimeEntries.vue
@@ -1,19 +1,16 @@
 <template>
-  <div>
-    <button
-      v-if="$route.path !== '/time-entries/log-time'"
-      v-link="'/time-entries/log-time'"
-      class="btn btn-primary">
-      Log Time
-    </button>
+	<div>
+		<button v-if="$route.path !== '/time-entries/log-time'" class="btn btn-primary">
+            <router-link to="/time-entries/log-time">Log Time</router-link>
+        </button>
 
     <div v-if="$route.path === '/time-entries/log-time'">
       <h3>Log Time</h3>     
     </div>
 
     <hr>
 
-    <router-view></router-view>
+		<router-view @timeUpdate="timeUpdate"></router-view>
 
     <div class="time-entries">
       <p v-if="!timeEntries.length"><strong>No time entries yet</strong></p>
@@ -91,11 +88,10 @@
         let index = this.timeEntries.indexOf(timeEntry)
         if (window.confirm('Are you sure you want to delete this time entry?')) {
           this.timeEntries.splice(index, 1)
-          this.$dispatch('deleteTime', timeEntry)
-        }
+          // this.$dispatch('deleteTime', timeEntry)
+          this.$emit('deleteTime', timeEntry)
       }
     },
-    events: {
       timeUpdate (timeEntry) {
         this.timeEntries.push(timeEntry)
         return true

diff --git a/client/src/main.js b/client/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue'
 import Home from './components/Home.vue'
 import TimeEntries from './components/TimeEntries.vue'
 import LogTime from './components/LogTime.vue'
+
 import VueRouter from 'vue-router'
 import VueResource from 'vue-resource'
 
@@ -11,26 +12,26 @@ import VueResource from 'vue-resource'
 Vue.use(VueResource)
 Vue.use(VueRouter)
 
-const router = new VueRouter()
-
-// Pointing routes to the components they should use
-router.map({
-  '/home': {
+const routes = [{
+    path: '/home',
     component: Home
-  },
-  '/time-entries': {
+}, {
+    path: '/time-entries',
     component: TimeEntries,
-    subRoutes: {
-      '/log-time': {
-        component: LogTime
-      }
-    }
-  }
-})
+    children: [
+        { path: 'log-time', component: LogTime },
+    ]
+}, {
+    path: '/time-entries/log-time2',
+    component: { template: '<div>root component</div>' }
+}]
 
-// Any invalid route will redirect to home
-router.redirect({
-  '*': '/home'
-})
+const router = new VueRouter({ routes })
+
+const app = new Vue({
+    router,
+    components: {
+        App
+    }
 
-router.start(App, '#app')
+}).$mount('#app')
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -0,0 +1,65 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+    entry: './src/main.js',
+    output: {
+        path: path.resolve(__dirname, './dist'),
+        publicPath: '/dist/',
+        filename: 'build.js'
+    },
+    module: {
+        rules: [{
+                test: /\.vue$/,
+                loader: 'vue',
+                options: {
+                    // vue-loader options go here
+                }
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'file',
+                options: {
+                    name: '[name].[ext]?[hash]'
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue'
+        }
+    },
+    devServer: {
+        historyApiFallback: true,
+        noInfo: true,
+        port: 10010 //z http://stackoverflow.com/questions/33272967/how-to-make-the-webpack-dev-server-run-on-port-80-and-on-0-0-0-0-to-make-it-publ
+    },
+    // devtool: '#eval-source-map'
+    devtool: '#inline-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports.devtool = '#source-map'
+        // http://vue-loader.vuejs.org/en/workflow/production.html
+    module.exports.plugins = (module.exports.plugins || []).concat([
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            minimize: true
+        })
+    ])
+}