diff --git a/build/build.js b/build/build.js
index b3c9aad..6b8add1 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,36 +1,35 @@
-// https://github.com/shelljs/shelljs
require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
-var path = require('path')
-var config = require('../config')
+process.env.NODE_ENV = 'production'
+
var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
var webpack = require('webpack')
+var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
-console.log(
- ' Tip:\n' +
- ' Built files are meant to be served over an HTTP server.\n' +
- ' Opening index.html over file:// won\'t work.\n'
-)
-
var spinner = ora('building for production...')
spinner.start()
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
-
-webpack(webpackConfig, function (err, stats) {
- spinner.stop()
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
- process.stdout.write(stats.toString({
- colors: true,
- modules: false,
- children: false,
- chunks: false,
- chunkModules: false
- }) + '\n')
+ webpack(webpackConfig, function (err, stats) {
+ spinner.stop()
+ if (err) throw err
+ process.stdout.write(stats.toString({
+ colors: true,
+ modules: false,
+ children: false,
+ chunks: false,
+ chunkModules: false
+ }) + '\n\n')
+
+ console.log(chalk.cyan(' Build complete.\n'))
+ console.log(chalk.yellow(
+ ' Tip: built files are meant to be served over an HTTP server.\n' +
+ ' Opening index.html over file:// won\'t work.\n'
+ ))
+ })
})
diff --git a/build/check-versions.js b/build/check-versions.js
index e2b6cf7..100f3a0 100644
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -1,9 +1,9 @@
-var semver = require('semver')
var chalk = require('chalk')
+var semver = require('semver')
var packageConfig = require('../package.json')
-var exec = function (cmd) {
- return require('child_process')
- .execSync(cmd).toString().trim()
+var shell = require('shelljs')
+function exec (cmd) {
+ return require('child_process').execSync(cmd).toString().trim()
}
var versionRequirements = [
@@ -12,12 +12,15 @@ var versionRequirements = [
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
- {
+]
+
+if (shell.which('npm')) {
+ versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
- }
-]
+ })
+}
module.exports = function () {
var warnings = []
diff --git a/build/dev-server.js b/build/dev-server.js
index 3e096dc..782dc6f 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -1,15 +1,21 @@
require('./check-versions')()
+
var config = require('../config')
-if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
+if (!process.env.NODE_ENV) {
+ process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
-var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
@@ -19,13 +25,12 @@ var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
- stats: {
- colors: true,
- chunks: false
- }
+ quiet: true
})
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+ log: () => {}
+})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
@@ -40,7 +45,7 @@ Object.keys(proxyTable).forEach(function (context) {
if (typeof options === 'string') {
options = { target: options }
}
- app.use(proxyMiddleware(context, options))
+ app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
@@ -57,12 +62,28 @@ app.use(hotMiddleware)
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
-module.exports = app.listen(port, function (err) {
- if (err) {
- console.log(err)
- return
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+ _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+ console.log('> Listening at ' + uri + '\n')
+ // when env is testing, don't need open it
+ if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+ opn(uri)
}
- var uri = 'http://localhost:' + port
- console.log('Listening at ' + uri + '\n')
- opn(uri)
+ _resolve()
})
+
+var server = app.listen(port)
+
+module.exports = {
+ ready: readyPromise,
+ close: () => {
+ server.close()
+ }
+}
diff --git a/build/utils.js b/build/utils.js
index dc3cdd0..b1d54b4 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -11,38 +11,48 @@ exports.assetsPath = function (_path) {
exports.cssLoaders = function (options) {
options = options || {}
+
+ var cssLoader = {
+ loader: 'css-loader',
+ options: {
+ minimize: process.env.NODE_ENV === 'production',
+ sourceMap: options.sourceMap
+ }
+ }
+
// generate loader string to be used with extract text plugin
- function generateLoaders (loaders) {
- var sourceLoader = loaders.map(function (loader) {
- var extraParamChar
- if (/\?/.test(loader)) {
- loader = loader.replace(/\?/, '-loader?')
- extraParamChar = '&'
- } else {
- loader = loader + '-loader'
- extraParamChar = '?'
- }
- return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
- }).join('!')
+ function generateLoaders (loader, loaderOptions) {
+ var loaders = [cssLoader]
+ if (loader) {
+ loaders.push({
+ loader: loader + '-loader',
+ options: Object.assign({}, loaderOptions, {
+ sourceMap: options.sourceMap
+ })
+ })
+ }
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
- return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+ return ExtractTextPlugin.extract({
+ use: loaders,
+ fallback: 'vue-style-loader'
+ })
} else {
- return ['vue-style-loader', sourceLoader].join('!')
+ return ['vue-style-loader'].concat(loaders)
}
}
- // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+ // https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
- css: generateLoaders(['css']),
- postcss: generateLoaders(['css']),
- less: generateLoaders(['css', 'less']),
- sass: generateLoaders(['css', 'sass?indentedSyntax']),
- scss: generateLoaders(['css', 'sass']),
- stylus: generateLoaders(['css', 'stylus']),
- styl: generateLoaders(['css', 'stylus'])
+ css: generateLoaders(),
+ postcss: generateLoaders(),
+ less: generateLoaders('less'),
+ sass: generateLoaders('sass', { indentedSyntax: true }),
+ scss: generateLoaders('sass'),
+ stylus: generateLoaders('stylus'),
+ styl: generateLoaders('stylus')
}
}
@@ -54,7 +64,7 @@ exports.styleLoaders = function (options) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
- loader: loader
+ use: loader
})
}
return output
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
new file mode 100644
index 0000000..7aee79b
--- /dev/null
+++ b/build/vue-loader.conf.js
@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+ loaders: utils.cssLoaders({
+ sourceMap: isProduction
+ ? config.build.productionSourceMap
+ : config.dev.cssSourceMap,
+ extract: isProduction
+ })
+}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 6061be6..65c50a4 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,14 +1,11 @@
var path = require('path')
-var config = require('../config')
var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
-var env = process.env.NODE_ENV
-// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
-// various preprocessor loaders added to vue-loader at the end of this file
-var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
-var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
-var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
+function resolve(dir) {
+ return path.join(__dirname, '..', dir)
+}
module.exports = {
entry: {
@@ -16,63 +13,47 @@ module.exports = {
},
output: {
path: config.build.assetsRoot,
- publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
- filename: '[name].js'
+ filename: '[name].js',
+ publicPath: process.env.NODE_ENV === 'production'
+ ? config.build.assetsPublicPath
+ : config.dev.assetsPublicPath
},
resolve: {
- extensions: ['', '.js', '.vue', '.scss'],
- fallback: [path.join(__dirname, '../node_modules')],
+ extensions: ['.js', '.vue', '.json'],
alias: {
- 'vue$': 'vue/dist/vue',
- 'src': path.resolve(__dirname, '../src'),
- 'assets': path.resolve(__dirname, '../src/assets'),
- 'components': path.resolve(__dirname, '../src/components'),
- 'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss')
+ 'vue$': 'vue/dist/vue.esm.js',
+ '@': resolve('src'),
+ 'scss_vars': '@/styles/vars.scss'
}
},
- resolveLoader: {
- fallback: [path.join(__dirname, '../node_modules')]
- },
module: {
- loaders: [
+ rules: [
{
test: /\.vue$/,
- loader: 'vue'
+ loader: 'vue-loader',
+ options: vueLoaderConfig
},
{
test: /\.js$/,
- loader: 'babel',
- include: projectRoot,
- exclude: /node_modules/
- },
- {
- test: /\.json$/,
- loader: 'json'
+ loader: 'babel-loader',
+ include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url',
- query: {
+ loader: 'url-loader',
+ options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url',
- query: {
+ loader: 'url-loader',
+ options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
- },
- vue: {
- loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
- postcss: [
- require('autoprefixer')({
- browsers: ['last 2 versions']
- })
- ]
}
}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 7e1a104..5470402 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,9 +1,10 @@
-var config = require('../config')
+var utils = require('./utils')
var webpack = require('webpack')
+var config = require('../config')
var merge = require('webpack-merge')
-var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
@@ -12,23 +13,23 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
module.exports = merge(baseWebpackConfig, {
module: {
- loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+ rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
- // eval-source-map is faster for development
- devtool: '#eval-source-map',
+ // cheap-module-eval-source-map is faster for development
+ devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
- new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
- new webpack.NoErrorsPlugin(),
+ new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
- })
+ }),
+ new FriendlyErrorsPlugin()
]
})
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index 3449245..da44b65 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,16 +1,22 @@
var path = require('path')
-var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
+var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
- loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+ rules: utils.styleLoaders({
+ sourceMap: config.build.productionSourceMap,
+ extract: true
+ })
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
@@ -18,12 +24,6 @@ var webpackConfig = merge(baseWebpackConfig, {
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
- vue: {
- loaders: utils.cssLoaders({
- sourceMap: config.build.productionSourceMap,
- extract: true
- })
- },
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
@@ -32,11 +32,20 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
- }
+ },
+ sourceMap: true
}),
- new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
- new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+ new ExtractTextPlugin({
+ filename: utils.assetsPath('css/[name].[contenthash].css')
+ }),
+ // Compress extracted CSS. We are using this plugin so that possible
+ // duplicated CSS from different components can be deduped.
+ new OptimizeCSSPlugin({
+ cssProcessorOptions: {
+ safe: true
+ }
+ }),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
@@ -73,7 +82,15 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
- })
+ }),
+ // copy custom static assets
+ new CopyWebpackPlugin([
+ {
+ from: path.resolve(__dirname, '../static'),
+ to: config.build.assetsSubDirectory,
+ ignore: ['.*']
+ }
+ ])
]
})
@@ -95,4 +112,9 @@ if (config.build.productionGzip) {
)
}
+if (config.build.bundleAnalyzerReport) {
+ var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+ webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
module.exports = webpackConfig
diff --git a/config/index.js b/config/index.js
index 22b4e91..e740f6b 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,11 +14,17 @@ module.exports = {
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
- productionGzipExtensions: ['js', 'css']
+ productionGzipExtensions: ['js', 'css'],
+ // Run the build command with an extra argument to
+ // View the bundle analyzer report after build finishes:
+ // `npm run build --report`
+ // Set to `true` or `false` to always turn it on or off
+ bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
- port: 8081,
+ port: 8080,
+ autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
diff --git a/package.json b/package.json
index 165e569..eccb542 100644
--- a/package.json
+++ b/package.json
@@ -6,57 +6,69 @@
"license": "MIT",
"scripts": {
"dev": "node build/dev-server.js",
+ "start": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.15.3",
"echarts": "^3.3.2",
+ "element-ui": "^1.2.8",
+ "font-awesome": "^4.7.0",
"nprogress": "^0.2.0",
- "vue": "^2.1.10",
- "vuex": "^2.0.0-rc.6",
- "vue-router": "^2.1.2",
- "element-ui": "^1.1.6",
- "font-awesome": "^4.7.0"
+ "vue": "^2.2.2",
+ "vue-router": "^2.3.0",
+ "vuex": "^2.0.0-rc.6"
},
"devDependencies": {
- "autoprefixer": "^6.6.1",
+ "autoprefixer": "^6.7.2",
"axios-mock-adapter": "^1.7.1",
- "babel-core": "^6.21.0",
+ "babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
- "babel-plugin-transform-runtime": "^6.0.0",
+ "babel-plugin-transform-runtime": "^6.22.0",
+ "babel-preset-env": "^1.2.1",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
- "babel-preset-stage-2": "^6.0.0",
- "babel-register": "^6.0.0",
+ "babel-preset-stage-2": "^6.22.0",
+ "babel-register": "^6.22.0",
"chalk": "^1.1.3",
- "connect-history-api-fallback": "^1.1.0",
+ "connect-history-api-fallback": "^1.3.0",
+ "copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eventsource-polyfill": "^0.9.6",
- "express": "^4.13.3",
- "extract-text-webpack-plugin": "^1.0.1",
- "file-loader": "^0.9.0",
+ "express": "^4.14.1",
+ "extract-text-webpack-plugin": "^2.0.0",
+ "file-loader": "^0.10.0",
+ "friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.0.2",
- "html-webpack-plugin": "^2.26.0",
+ "html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
+ "webpack-bundle-analyzer": "^2.2.1",
"json-loader": "^0.5.4",
"mockjs": "^1.0.1-beta3",
"node-sass": "^4.5.0",
"opn": "^4.0.2",
+ "optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.0.0",
+ "rimraf": "^2.6.0",
"sass-loader": "^6.0.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
- "url-loader": "^0.5.7",
- "vue-loader": "^10.0.2",
- "vue-style-loader": "^1.0.0",
- "vue-template-compiler": "^2.1.10",
- "webpack": "^1.14.0",
- "webpack-dev-middleware": "^1.9.0",
- "webpack-hot-middleware": "^2.15.0",
- "webpack-merge": "^2.4.0"
+ "url-loader": "^0.5.8",
+ "vue-loader": "^11.1.4",
+ "vue-style-loader": "^2.0.0",
+ "vue-template-compiler": "^2.2.4",
+ "webpack": "^2.2.1",
+ "webpack-dev-middleware": "^1.10.0",
+ "webpack-hot-middleware": "^2.16.1",
+ "webpack-merge": "^2.6.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
- }
-}
\ No newline at end of file
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not ie <= 8"
+ ]
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5e2ce42..a0b7885 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -28,7 +28,7 @@
{{item.name}}
- {{child.name}}
+ {{child.name}}
{{item.children[0].name}}
@@ -39,7 +39,7 @@
@@ -55,7 +55,7 @@
{{$route.name}}
-
+
{{ item.name }}