Vue Admin Panel Framework, - Live Demo + Live Demo
Made with ❤︎ by Fangdun Cai and - contributors + contributors
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Sponsors
+
+Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/vue-admin#sponsor)]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## [Development](doc/development.md)
@@ -47,25 +117,28 @@ Its ongoing development is made possible thanks to the support by these awesome
### Requirements
- * NPM v3
+ * Node >= v5
+
+ * NPM >= v3
* Webpack v2
## Notes
- If you want to use Vue Admin with Vue 1.0 version, please checkout the [vue-v1](https://github.com/fundon/vue-admin/tree/vue-v1) branch.
+ If you want to use Vue Admin with Vue 1.0 version, please checkout the [vue-v1](https://github.com/vue-bulma/vue-admin/tree/vue-v1) branch.
+ Launch Vue Admin as a desktop application! Please check [Run Project with Electron](https://github.com/vue-bulma/vue-admin/wiki/Guide#run-project-with-electron)
----
-> [fundon.me](https://fundon.me) ·
-> GitHub [@fundon](https://github.com/fundon) ·
-> Twitter [@_fundon](https://twitter.com/_fundon)
+## Maintainers
++ [fundon](https://github.com/fundon) · [fundon.me](https://fundon.me) · [Twitter@fundon](https://twitter.com/_fundon)
++ [luventa](https://github.com/luventa)
-[Live Demo]: https://vue-admin.fundon.me/
+[Live Demo]: https://admin.vuebulma.com/
[Fangdun Cai]: https://twitter.com/_fundon
[Vue]: http://vuejs.org
[Bulma]: http://bulma.io
[Vue-bulma]: https://github.com/vue-bulma
+
diff --git a/backers.md b/backers.md
index e69de29b..02a9d55f 100644
--- a/backers.md
+++ b/backers.md
@@ -0,0 +1,15 @@
+# Backers
+
+Thank you for your supports!
+
+* [WerGimity](https://www.patreon.com/user/creators?u=5268464)
+
+* [Thomas_Leong](https://www.patreon.com/user/creators?u=5244543)
+
+* [wen](https://www.patreon.com/user/creators?u=5239734)
+
+* [Joris Vanhecke](https://www.patreon.com/user/creators?u=5145359)
+
+* [datastream](https://www.patreon.com/user/creators?u=4315833)
+
+* [Lê Chương](https://www.patreon.com/user/creators?u=3495305)
diff --git a/build/build.js b/build/build.js
index 0c104e4f..e9624269 100755
--- a/build/build.js
+++ b/build/build.js
@@ -1,32 +1,31 @@
// https://github.com/shelljs/shelljs
+'use strict'
+
+require('./check-versions')()
require('shelljs/global')
-env.NODE_ENV = 'production'
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
+env.NODE_ENV = 'production'
-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'
-)
+const ora = require('ora')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
-var spinner = ora('building for production...')
+const spinner = ora('building for production...')
spinner.start()
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+const assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
-cp('-R', 'assets/', assetsPath)
+cp('-R', 'assets/*', assetsPath)
const compiler = webpack(webpackConfig)
-var ProgressPlugin = require('webpack/lib/ProgressPlugin')
+const ProgressPlugin = require('webpack/lib/ProgressPlugin')
compiler.apply(new ProgressPlugin())
-compiler.run(function (err, stats) {
+compiler.run((err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
@@ -35,5 +34,11 @@ compiler.run(function (err, stats) {
children: false,
chunks: false,
chunkModules: false
- }) + '\n')
+ }) + '\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
new file mode 100644
index 00000000..348d8b72
--- /dev/null
+++ b/build/check-versions.js
@@ -0,0 +1,47 @@
+'use strict'
+
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+
+const exec = (cmd) => {
+ return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+ {
+ name: 'node',
+ currentVersion: semver.clean(process.version),
+ versionRequirement: packageConfig.engines.node
+ },
+ {
+ name: 'npm',
+ currentVersion: exec('npm --version'),
+ versionRequirement: packageConfig.engines.npm
+ }
+]
+
+module.exports = () => {
+ const warnings = []
+ for (let i = 0; i < versionRequirements.length; i++) {
+ const mod = versionRequirements[i]
+ if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+ warnings.push(mod.name + ': ' +
+ chalk.red(mod.currentVersion) + ' should be ' +
+ chalk.green(mod.versionRequirement)
+ )
+ }
+ }
+
+ if (warnings.length) {
+ console.log('')
+ console.log(chalk.yellow('To use this template, you must update following to modules:'))
+ console.log()
+ for (let i = 0; i < warnings.length; i++) {
+ const warning = warnings[i]
+ console.log(' ' + warning)
+ }
+ console.log()
+ process.exit(1)
+ }
+}
diff --git a/build/dev-client.js b/build/dev-client.js
index 18aa1e21..cdc79471 100755
--- a/build/dev-client.js
+++ b/build/dev-client.js
@@ -1,8 +1,10 @@
+'use strict'
+
/* eslint-disable */
require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-hotClient.subscribe(function (event) {
+hotClient.subscribe(event => {
if (event.action === 'reload') {
window.location.reload()
}
diff --git a/build/dev-server.js b/build/dev-server.js
index ba4a50f9..cf2ab592 100755
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -1,22 +1,29 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
+'use strict'
+
+require('./check-versions')()
+
+const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const opn = require('opn')
+const config = require('../config')
+const proxyMiddleware = require('http-proxy-middleware')
+const webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
+const port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+const autoOpenBrowser = Boolean(config.dev.autoOpenBrowser)
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
+const proxyTable = config.dev.proxyTable
-var app = express()
-var compiler = webpack(webpackConfig)
+const app = express()
+const compiler = webpack(webpackConfig)
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
+const devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
@@ -24,22 +31,22 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
}
})
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
+const hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
- compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+compiler.plugin('compilation', compilation => {
+ compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
- var options = proxyTable[context]
+Object.keys(proxyTable).forEach(context => {
+ let options = proxyTable[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
@@ -53,13 +60,23 @@ app.use(devMiddleware)
app.use(hotMiddleware)
// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./assets'))
-module.exports = app.listen(port, function (err) {
+const uri = 'http://localhost:' + port
+
+devMiddleware.waitUntilValid(() => {
+ console.log('> Listening at ' + uri + '\n')
+})
+
+module.exports = app.listen(port, err => {
if (err) {
console.log(err)
return
}
- console.log('Listening at http://localhost:' + port + '\n')
+
+ // when env is testing, don't need open it
+ if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+ opn(uri)
+ }
})
diff --git a/build/utils.js b/build/utils.js
index 93c70bc4..5afbde6a 100755
--- a/build/utils.js
+++ b/build/utils.js
@@ -1,20 +1,22 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+'use strict'
-exports.assetsPath = function (_path) {
- var assetsSubDirectory = process.env.NODE_ENV === 'production'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = _path => {
+ const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
-exports.cssLoaders = function (options) {
+exports.cssLoaders = options => {
options = options || {}
// generate loader string to be used with extract text plugin
- function generateLoaders (loaders) {
- var sourceLoader = loaders.map(function (loader) {
- var extraParamChar
+ const generateLoaders = loaders => {
+ const sourceLoader = loaders.map(loader => {
+ let extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/, '-loader?')
extraParamChar = '&'
@@ -25,10 +27,12 @@ exports.cssLoaders = function (options) {
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
+ // Extract CSS when that option is specified
+ // (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
- fallbackLoader: 'style-loader',
- loader: sourceLoader
+ use: sourceLoader,
+ fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader', sourceLoader].join('!')
@@ -48,11 +52,11 @@ exports.cssLoaders = function (options) {
}
// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
- var output = []
- var loaders = exports.cssLoaders(options)
- for (var extension in loaders) {
- var loader = loaders[extension]
+exports.styleLoaders = options => {
+ const output = []
+ const loaders = exports.cssLoaders(options)
+ for (const extension of Object.keys(loaders)) {
+ const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
loader: loader
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
new file mode 100644
index 00000000..d52eafc9
--- /dev/null
+++ b/build/vue-loader.conf.js
@@ -0,0 +1,18 @@
+'use strict'
+
+const utils = require('./utils')
+const config = require('../config')
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+ loaders: utils.cssLoaders({
+ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap,
+ extract: isProduction
+ }),
+ postcss: [
+ require('autoprefixer')({
+ browsers: ['last 3 versions']
+ })
+ ]
+}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index a730e847..c3ea97fc 100755
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,68 +1,72 @@
+'use strict'
+
const path = require('path')
-const webpack = require('webpack')
const config = require('../config')
const utils = require('./utils')
const projectRoot = path.resolve(__dirname, '../')
-const isProduction = process.env.NODE_ENV === 'production'
-
module.exports = {
entry: {
- app: './client/index.js',
- vendor: ['vue', 'vue-router', 'vuex']
+ app: ['./client/index.js'],
+ // If you want to support IE < 11, should add `babel-polyfill` to vendor.
+ // e.g. ['babel-polyfill', 'vue', 'vue-router', 'vuex']
+ vendor: [
+ 'vue',
+ 'vue-router',
+ 'vuex',
+ 'vuex-router-sync'
+ ]
},
output: {
path: config.build.assetsRoot,
- publicPath: isProduction ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+ publicPath: process.env.NODE_ENV === 'production'
+ ? config.build.assetsPublicPath
+ : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.vue', '.css', '.json'],
alias: {
// https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources
- // 'vue': 'vue/dist/vue',
- 'src': path.resolve(__dirname, '../client'),
- 'assets': path.resolve(__dirname, '../client/assets'),
- 'components': path.resolve(__dirname, '../client/components'),
- 'views': path.resolve(__dirname, '../client/views'),
+ // vue: 'vue/dist/vue',
+ package: path.resolve(__dirname, '../package.json'),
+ src: path.resolve(__dirname, '../client'),
+ assets: path.resolve(__dirname, '../client/assets'),
+ components: path.resolve(__dirname, '../client/components'),
+ views: path.resolve(__dirname, '../client/views'),
// third-party
- 'plotly.js': 'plotly.js/dist/plotly'
+ 'plotly.js': 'plotly.js/dist/plotly',
+ // vue-addon
+ 'vuex-store': path.resolve(__dirname, '../client/store')
}
},
module: {
loaders: [
{
- test: /\.vue$/,
- loader: ['eslint'],
- include: projectRoot,
- exclude: /node_modules/,
- enforce: 'pre'
- },
- {
- test: /\.js/,
- loader: ['eslint'],
+ test: /\.(js|vue)$/,
+ loader: 'eslint-loader',
include: projectRoot,
exclude: /node_modules/,
- enforce: 'pre'
+ enforce: 'pre',
+ options: {
+ formatter: require('eslint-friendly-formatter')
+ }
},
{
test: /\.vue$/,
- loader: ['vue']
+ loader: 'vue-loader',
+ options: require('./vue-loader.conf')
},
{
test: /\.js$/,
- loader: ['babel'],
+ loader: 'babel-loader',
include: projectRoot,
// /node_modules\/(?!vue-bulma-.*)/
- exclude: [new RegExp(`node_modules\\${path.sep}\(\?\!vue-bulma-.*\)`)]
- },
- {
- test: /\.json$/,
- loader: 'json'
+ exclude: [new RegExp(`node_modules\\${path.sep}(?!vue-bulma-.*)`)]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url',
+ loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
@@ -70,7 +74,7 @@ module.exports = {
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url',
+ loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
@@ -78,19 +82,8 @@ module.exports = {
}
]
},
- plugins: [
- new webpack.LoaderOptionsPlugin({
- vue: {
- loaders: utils.cssLoaders({
- sourceMap: isProduction,
- extract: isProduction
- }),
- postcss: [
- require('autoprefixer')({
- browsers: ['last 3 versions']
- })
- ]
- }
- })
- ]
+ // See https://github.com/webpack/webpack/issues/3486
+ performance: {
+ hints: false
+ }
}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 60f465ed..65019c2b 100755
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,3 +1,5 @@
+'use strict'
+
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -6,7 +8,7 @@ const config = require('../config')
const utils = require('./utils')
// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+Object.keys(baseWebpackConfig.entry).forEach(name => {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
@@ -21,9 +23,8 @@ module.exports = merge(baseWebpackConfig, {
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
- new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
- new webpack.NoErrorsPlugin(),
+ new webpack.NoEmitOnErrorsPlugin(),
// extract vendor chunks for better caching
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index e2b77cba..ea265af6 100755
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,3 +1,5 @@
+'use strict'
+
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
@@ -9,6 +11,7 @@ const utils = require('./utils')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
+const isELECTRON = process.env.NODE_ELECTRON === 'true'
const webpackConfig = merge(baseWebpackConfig, {
module: {
@@ -20,6 +23,7 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
+ publicPath: isELECTRON ? path.join(__dirname, '../dist/') : config.build.assetsPublicPath,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
@@ -32,6 +36,7 @@ const webpackConfig = merge(baseWebpackConfig, {
minimize: true
}),
new webpack.optimize.UglifyJsPlugin({
+ 'screw-ie8': true,
sourceMap: true,
compress: {
warnings: false
@@ -40,7 +45,6 @@ const webpackConfig = merge(baseWebpackConfig, {
comments: false
}
}),
- new webpack.optimize.OccurrenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
// generate dist index.html with correct asset hash for caching.
@@ -67,7 +71,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
- minChunks: function (module, count) {
+ minChunks (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
@@ -88,7 +92,7 @@ const webpackConfig = merge(baseWebpackConfig, {
})
if (config.build.productionGzip) {
- var CompressionWebpackPlugin = require('compression-webpack-plugin')
+ const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
diff --git a/client/App.vue b/client/App.vue
index d555409e..2bf466ae 100755
--- a/client/App.vue
+++ b/client/App.vue
@@ -2,7 +2,7 @@
+ Price History of {{params.symbol}} + + This demo only works under Development env + +
+Request Params
+ Markit On Demand - Market Data APIs +
-
-
-
-
+
-
-
-
-
-
-
@@ -101,10 +120,8 @@
-
{{ item.name }}
-http://en.wikipedia.org/wiki/One_Ring
Three Rings for the Elven-kings under the sky,
-Seven for the Dwarf-lords in halls of stone,
+Seven for the Dwarf-lords in halls of stone,
Nine for Mortal Men, doomed to die,
One for the Dark Lord on his dark throne.
In the Land of Mordor where the Shadows lie.
+In the Land of Mordor where the Shadows lie.
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them.
In the Land of Mordor where the Shadows lie.
diff --git a/client/views/components/Switch.vue b/client/views/components/Switch.vue index ae67049d..1fad156c 100644 --- a/client/views/components/Switch.vue +++ b/client/views/components/Switch.vue @@ -52,10 +52,10 @@
-
- {{ value }} + {{ switchStat }}
+ + Search +
++ + + + + + Transfer + +
++ + + + + + Transfer + +
++ + + + + + Transfer + +
++ + Search + +
+