use vuex

Author: egoist

.eslintrc

@@ -11,11 +11,10 @@ If you want to build a Vue app really really fast, use nether [VuePack](https://
 - Vue
 - Webpack
 - Babel 6
-- Redux
+- Vuex
 - Vue-Router
 - Hot reloading
-- PostCSS
-- PreCSS
+- PostCSS & cssnext
 - Autoprefixer
 
 ## Cli tool

README.md

@@ -5,10 +5,9 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "NODE_ENV=development HOT=1 VUEPACK_PORT=3030 node scripts/devServer.js",
+    "dev": "cross-env NODE_ENV=development HOT=1 NODE_PORT=3030 node scripts/devServer.js",
     "build": "rm -rf ./build && webpack -p --config scripts/webpack.config.prod.js",
-    "publish:demo": "npm run build && surge -d vuepack.surge.sh -p build",
-    "dev:win": "set NODE_ENV=development && set HOT=1 && set VUEPACK_PORT=3030 && node scripts/devServer.js"
+    "publish:demo": "npm run build && surge -d vuepack.surge.sh -p build"
   },
   "repository": {
     "type": "git",
@@ -35,29 +34,24 @@
     "babel-plugin-transform-runtime": "^6.3.13",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
-    "babel-runtime": "^5.8.0",
+    "babel-runtime": "^5.8.38",
+    "cross-env": "^1.0.7",
     "css-loader": "^0.23.0",
-    "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.9.1",
     "html-webpack-plugin": "^1.7.0",
+    "postcss-cssnext": "^2.5.2",
     "postcss-loader": "^0.8.0",
     "style-loader": "^0.13.0",
     "vue-hot-reload-api": "^1.2.2",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^7.1.7",
+    "vue-loader": "^8.2.3",
     "vue-router": "^0.7.7",
-    "webpack": "^1.12.9",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.0",
+    "webpack-hot-server": "^0.3.6"
   },
   "dependencies": {
-    "moment": "^2.10.6",
-    "redux": "^3.0.4",
-    "redux-actions": "^0.9.0",
-    "redux-devtools": "^2.1.5",
-    "redux-thunk": "^1.0.0",
-    "revue": "^1.2.5",
-    "postcss-cssnext": "^2.5.2",
-    "vue": "latest"
+    "vue": "^1.0.21",
+    "vuex": "^0.6.3"
   }
 }

package.json

@@ -1,28 +1,13 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('./webpack.config.dev')
-
-var app = express()
-var compiler = webpack(config)
-if (process.env.HOT) {
-  // options for dev env
-}
-
-app.use(require('webpack-dev-middleware')(compiler, {
-  publicPath: config.output.publicPath,
-  stats: {
-    colors: true
-  }
-}))
-
-app.use(require('webpack-hot-middleware')(compiler))
-
-app.set('port', process.env.VUEPACK_PORT || 3000)
-app.listen(app.get('port'), 'localhost', function(err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + app.get('port'))
+'use strict'
+const path = require('path')
+const server = require('webpack-hot-server')
+const config = require('./webpack.config.dev')
+
+const port = process.env.NODE_PORT || 3030
+server({
+  port,
+  customIndex: path.join(process.cwd(), 'build'),
+  config
+}).then(() => {
+  console.log(`Running at http://localhost:${port}`)
 })

scripts/devServer.js

@@ -16,8 +16,5 @@
     {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
     <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
     {% } %}
-    {% if (o.webpackConfig.watch) { %}
-    <script src="https://npmcdn.com/redux-devtools-script"></script>
-    {% } %}
   </body>
 </html>

scripts/index.html

@@ -2,12 +2,8 @@ var webpack = require('webpack')
 var config = require('./webpack.config')
 var path = require('path')
 
-config.debug = true
-config.watch = true
-config.output.publicPath = '/'
-config.output.path= process.cwd()
 config.entry.push('webpack-hot-middleware/client')
-config.devtool = 'cheap-module-eval-source-map'
+config.devtool = 'inline-eval-cheap-source-map'
 config.plugins = [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoErrorsPlugin(),

scripts/webpack.config.dev.js

@@ -5,9 +5,9 @@ var HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
   entry: ['./src/main.js'],
   output: {
-    path: path.resolve('./build'),
+    path: path.join(process.cwd(), 'build/assets'),
     filename: 'bundle.js',
-    publicPath: '/build/'
+    publicPath: '/assets/'
   },
   resolve: {
     extensions: ['', '.js', '.vue', '.css']
@@ -32,7 +32,7 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-        filename: './index.html',
+        filename: path.join(process.cwd(), 'build/index.html'),
         title: 'VuePack',
         template: __dirname + '/index.html'
     })

scripts/webpack.config.js

@@ -5,7 +5,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 config.devtool = 'source-map'
 config.output.filename = 'bundle.[hash].js'
-config.output.publicPath = './'
+config.output.publicPath = './assets/'
 config.plugins = [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.DefinePlugin({
@@ -17,12 +17,16 @@ config.plugins = [
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       warnings: false
-    }
+    },
+    comments: false
   }),
   new ExtractTextPlugin('[name].[contenthash].css')
 ].concat(config.plugins)
 config.vue.loaders = {
-  css: ExtractTextPlugin.extract('style-loader', 'css-loader')
+  css: ExtractTextPlugin.extract(
+    'vue-style-loader',
+    'css-loader?sourceMap'
+  )
 }
 
 module.exports = config