github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'升级到webpack3,更新依赖版本'

pull/78/head
lin-xin 2018-04-10 15:35:18 +08:00
parent 07811bfaca
commit 54e932862f
24 changed files with 652 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.babelrc
View File

@ -1,13 +1,12 @@
{ {
"presets": [ "presets": [
["es2015", { "modules": false }], ["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2" "stage-2"
], ],
"plugins": ["transform-runtime"], "plugins": ["transform-vue-jsx", "transform-runtime"]
"comments": false,
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
} }

9
.postcssrc.js Normal file
View File

@ -0,0 +1,9 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {}
}
}

61
build/build.js
View File

@ -1,40 +1,41 @@
// https://github.com/shelljs/shelljs 'use strict'
require('./check-versions')() require('./check-versions')()
process.env.NODE_ENV = 'production' process.env.NODE_ENV = 'production'
var ora = require('ora') const ora = require('ora')
var path = require('path') const rm = require('rimraf')
var chalk = require('chalk') const path = require('path')
var shell = require('shelljs') const chalk = require('chalk')
var webpack = require('webpack') const webpack = require('webpack')
var config = require('../config') const config = require('../config')
var webpackConfig = require('./webpack.prod.conf') const webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...') const spinner = ora('building for production...')
spinner.start() spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
shell.rm('-rf', assetsPath)
shell.mkdir('-p', assetsPath)
shell.config.silent = true
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err if (err) throw err
process.stdout.write(stats.toString({ webpack(webpackConfig, (err, stats) => {
colors: true, spinner.stop()
modules: false, if (err) throw err
children: false, process.stdout.write(stats.toString({
chunks: false, colors: true,
chunkModules: false modules: false,
}) + '\n\n') children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n')) if (stats.hasErrors()) {
console.log(chalk.yellow( console.log(chalk.red(' Build failed with errors.\n'))
' Tip: built files are meant to be served over an HTTP server.\n' + process.exit(1)
' Opening index.html over file:// won\'t work.\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'
))
})
}) })

37
build/check-versions.js
View File

@ -1,28 +1,35 @@
var chalk = require('chalk') 'use strict'
var semver = require('semver') const chalk = require('chalk')
var packageConfig = require('../package.json') const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) { function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim() return require('child_process').execSync(cmd).toString().trim()
} }
var versionRequirements = [ const versionRequirements = [
{ {
name: 'node', name: 'node',
currentVersion: semver.clean(process.version), currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node versionRequirement: packageConfig.engines.node
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
} }
] ]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () { module.exports = function () {
var warnings = [] const warnings = []
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i] for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' + warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' + chalk.red(mod.currentVersion) + ' should be ' +
@ -35,10 +42,12 @@ module.exports = function () {
console.log('') console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log() console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i] for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning) console.log(' ' + warning)
} }
console.log() console.log()
process.exit(1) process.exit(1)
} }

9
build/dev-client.js
View File

@ -1,9 +0,0 @@
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})

81
build/dev-server.js
View File

@ -1,81 +0,0 @@
require('./check-versions')()
var config = require('../config')
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 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
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
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) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + '\n')
})
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})

BIN
build/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

99
build/utils.js
View File

@ -1,64 +1,101 @@
var path = require('path') 'use strict'
var config = require('../config') const path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin') const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) { exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production' const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory ? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory : config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path) return path.posix.join(assetsSubDirectory, _path)
} }
exports.cssLoaders = function (options) { exports.cssLoaders = function (options) {
options = options || {} options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin // generate loader string to be used with extract text plugin
function generateLoaders (loaders) { function generateLoaders (loader, loaderOptions) {
var sourceLoader = loaders.map(function (loader) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
var extraParamChar
if (/\?/.test(loader)) { if (loader) {
loader = loader.replace(/\?/, '-loader?') loaders.push({
extraParamChar = '&' loader: loader + '-loader',
} else { options: Object.assign({}, loaderOptions, {
loader = loader + '-loader' sourceMap: options.sourceMap
extraParamChar = '?' })
} })
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') }
}).join('!')
// Extract CSS when that option is specified // Extract CSS when that option is specified
// (which is the case during production build) // (which is the case during production build)
if (options.extract) { if (options.extract) {
return ExtractTextPlugin.extract({ return ExtractTextPlugin.extract({
use: sourceLoader, use: loaders,
fallback: 'vue-style-loader' fallback: 'vue-style-loader'
}) })
} else { } 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 { return {
css: generateLoaders(['css']), css: generateLoaders(),
postcss: generateLoaders(['css']), postcss: generateLoaders(),
less: generateLoaders(['css', 'less']), less: generateLoaders('less'),
sass: generateLoaders(['css', 'sass?indentedSyntax']), sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders(['css', 'sass']), scss: generateLoaders('sass'),
stylus: generateLoaders(['css', 'stylus']), stylus: generateLoaders('stylus'),
styl: generateLoaders(['css', 'stylus']) styl: generateLoaders('stylus')
} }
} }
// Generate loaders for standalone style files (outside of .vue) // Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) { exports.styleLoaders = function (options) {
var output = [] const output = []
var loaders = exports.cssLoaders(options) const loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension] for (const extension in loaders) {
const loader = loaders[extension]
output.push({ output.push({
test: new RegExp('\\.' + extension + '$'), test: new RegExp('\\.' + extension + '$'),
loader: loader use: loader
}) })
} }
return output return output
} }
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

1
build/vendor-manifest.json
View File

File diff suppressed because one or more lines are too long

27
build/vue-loader.conf.js
View File

@ -1,17 +1,22 @@
var utils = require('./utils') 'use strict'
var config = require('../config') const utils = require('./utils')
var isProduction = process.env.NODE_ENV === 'production' const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = { module.exports = {
loaders: utils.cssLoaders({ loaders: utils.cssLoaders({
sourceMap: isProduction sourceMap: sourceMapEnabled,
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction extract: isProduction
}), }),
postcss: [ cssSourceMap: sourceMapEnabled,
require('autoprefixer')({ cacheBusting: config.dev.cacheBusting,
browsers: ['last 2 versions'] transformToRequire: {
}) video: ['src', 'poster'],
] source: 'src',
img: 'src',
image: 'xlink:href'
}
} }

59
build/webpack.base.conf.js
View File

@ -1,16 +1,19 @@
var path = require('path') 'use strict'
var utils = require('./utils') const path = require('path')
var webpack = require('webpack') const utils = require('./utils')
var config = require('../config') const config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf') const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) { function resolve (dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
module.exports = { module.exports = {
context: path.resolve(__dirname, '../'),
entry: { entry: {
app: ['babel-polyfill','./src/main.js'] app: './src/main.js'
}, },
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
@ -21,22 +24,18 @@ module.exports = {
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: { alias: {
'vue$': 'vue/dist/vue.common.js', 'vue$': 'vue/dist/vue.esm.js',
'src': resolve('src'), '@': resolve('src'),
'assets': resolve('src/assets'), 'static': path.resolve(__dirname, '../static'),
'components': resolve('src/components')
} }
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader' loader: 'vue-loader',
options: vueLoaderConfig
}, },
{ {
test: /\.js$/, test: /\.js$/,
@ -46,25 +45,39 @@ module.exports = {
{ {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader', loader: 'url-loader',
query: { options: {
limit: 10000, limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]') name: utils.assetsPath('img/[name].[hash:7].[ext]')
} }
}, },
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{ {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader', loader: 'url-loader',
query: { options: {
limit: 10000, limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
} }
} }
] ]
}, },
// plugins: [ node: {
// new webpack.DllReferencePlugin({ // prevent webpack from injecting useless setImmediate polyfill because Vue
// context: path.resolve(__dirname, '..'), // source contains it (although only uses it if it's native).
// manifest: require('./vendor-manifest.json') setImmediate: false,
// }) // prevent webpack from injecting mocks to Node native modules
// ] // that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
} }

79
build/webpack.dev.conf.js
View File

@ -1,28 +1,48 @@
var utils = require('./utils') 'use strict'
var webpack = require('webpack') const utils = require('./utils')
var config = require('../config') const webpack = require('webpack')
var merge = require('webpack-merge') const config = require('../config')
var baseWebpackConfig = require('./webpack.base.conf') const merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin') const baseWebpackConfig = require('./webpack.base.conf')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
// add hot-reload related code to entry chunks const HOST = process.env.HOST
Object.keys(baseWebpackConfig.entry).forEach(function (name) { const PORT = process.env.PORT && Number(process.env.PORT)
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, { const devWebpackConfig = merge(baseWebpackConfig, {
module: { module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
}, },
// cheap-module-eval-source-map is faster for development // cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map', devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': config.dev.env 'process.env': require('../config/dev.env')
}), }),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(), new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin // https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
@ -30,6 +50,31 @@ module.exports = merge(baseWebpackConfig, {
template: 'index.html', template: 'index.html',
inject: true inject: true
}), }),
new FriendlyErrorsPlugin()
] ]
}) })
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

87
build/webpack.prod.conf.js
View File

@ -1,21 +1,27 @@
var path = require('path') 'use strict'
var utils = require('./utils') const path = require('path')
var webpack = require('webpack') const utils = require('./utils')
var config = require('../config') const webpack = require('webpack')
var merge = require('webpack-merge') const config = require('../config')
var baseWebpackConfig = require('./webpack.base.conf') const merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin') const baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin')
var env = config.build.env const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var webpackConfig = merge(baseWebpackConfig, { const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: { module: {
rules: utils.styleLoaders({ rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap, sourceMap: config.build.productionSourceMap,
extract: true extract: true,
usePostCSS: true
}) })
}, },
devtool: config.build.productionSourceMap ? '#source-map' : false, devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath('js/[name].[chunkhash].js'),
@ -26,15 +32,30 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': env 'process.env': env
}), }),
new webpack.optimize.UglifyJsPlugin({ new UglifyJsPlugin({
compress: { uglifyOptions: {
warnings: false compress: {
warnings: false
}
}, },
sourceMap: true sourceMap: config.build.productionSourceMap,
parallel: true
}), }),
// extract css into its own file // extract css into its own file
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css') filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}), }),
// generate dist index.html with correct asset hash for caching. // generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html // you can customize output by editing /index.html
@ -53,10 +74,14 @@ var webpackConfig = merge(baseWebpackConfig, {
// necessary to consistently work with multiple chunks via CommonsChunkPlugin // necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency' chunksSortMode: 'dependency'
}), }),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file // split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', name: 'vendor',
minChunks: function (module, count) { minChunks (module) {
// any required modules inside node_modules are extracted to vendor // any required modules inside node_modules are extracted to vendor
return ( return (
module.resource && module.resource &&
@ -71,13 +96,31 @@ var webpackConfig = merge(baseWebpackConfig, {
// prevent vendor hash from being updated whenever app bundle is updated // prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'manifest', name: 'manifest',
chunks: ['vendor'] minChunks: Infinity
}) }),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
] ]
}) })
if (config.build.productionGzip) { if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin') const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push( webpackConfig.plugins.push(
new CompressionWebpackPlugin({ new CompressionWebpackPlugin({
@ -95,7 +138,7 @@ if (config.build.productionGzip) {
} }
if (config.build.bundleAnalyzerReport) { if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) webpackConfig.plugins.push(new BundleAnalyzerPlugin())
} }

5
config/dev.env.js
View File

@ -1,5 +1,6 @@
var merge = require('webpack-merge') 'use strict'
var prodEnv = require('./prod.env') const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, { module.exports = merge(prodEnv, {
NODE_ENV: '"development"' NODE_ENV: '"development"'

125
config/index.js
View File

@ -1,50 +1,85 @@
'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation. // see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
const path = require('path')
module.exports = { module.exports = {
build: { dev: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static',
assetsSubDirectory: 'static', assetsPublicPath: '/',
assetsPublicPath: './', proxyTable: {
productionSourceMap: false, '/api':{
// Gzip off by default as many popular static hosts such as target:'http://jsonplaceholder.typicode.com',
// Surge or Netlify already gzip all static assets for you. changeOrigin:true,
// Before setting to `true`, make sure to: pathRewrite:{
// npm install --save-dev compression-webpack-plugin '/api':''
productionGzip: false, }
productionGzipExtensions: ['js', 'css'], },
// Run the build command with an extra argument to '/ms':{
// View the bundle analyzer report after build finishes: target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
// `npm run build --report` changeOrigin: true
// Set to `true` or `false` to always turn it on or off }
bundleAnalyzerReport: process.env.npm_config_report
}, },
dev: { // Various Dev Server settings
env: require('./dev.env'), host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true, autoOpenBrowser: false,
assetsSubDirectory: 'static', errorOverlay: true,
assetsPublicPath: '/', notifyOnErrors: true,
proxyTable: { poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
'/api':{
target:'http://jsonplaceholder.typicode.com',
changeOrigin:true, /**
pathRewrite:{ * Source Maps
'/api':'' */
}
}, // https://webpack.js.org/configuration/devtool/#development
'/ms':{ devtool: 'eval-source-map',
target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
changeOrigin: true // If you have problems debugging vue-files in devtools,
} // set this to false - it *may* help
}, // https://vue-loader.vuejs.org/en/options.html#cachebusting
// CSS Sourcemaps off by default because relative paths are "buggy" cacheBusting: true,
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps) // CSS Sourcemaps off by default because relative paths are "buggy"
// In our experience, they generally work as expected, // with this option, according to the CSS-Loader README
// just be aware of this issue when enabling this option. // (https://github.com/webpack/css-loader#sourcemaps)
cssSourceMap: false // In our experience, they generally work as expected,
} // just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
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
}
} }

1
config/prod.env.js
View File

@ -1,3 +1,4 @@
'use strict'
module.exports = { module.exports = {
NODE_ENV: '"production"' NODE_ENV: '"production"'
} }

67
package.json
View File

@ -1,57 +1,60 @@
{ {
"name": "manage-system", "name": "vue-manage-system",
"version": "2.1.0", "version": "3.0.0",
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案", "description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
"author": "lin-xin <2981207131@qq.com>", "author": "lin-xin <2981207131@qq.com>",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "node build/dev-server.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js", "build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js" "build:dll": "webpack --config build/webpack.dll.conf.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.15.3", "axios": "^0.15.3",
"babel-polyfill": "^6.23.0", "babel-polyfill": "^6.23.0",
"element-ui": "1.3.1", "element-ui": "2.3.3",
"vue": "^2.3.2", "vue": "^2.5.16",
"vue-core-image-upload": "2.1.11", "vue-core-image-upload": "2.1.11",
"vue-datasource": "1.0.9", "vue-datasource": "1.0.12",
"vue-quill-editor": "2.1.6", "vue-quill-editor": "3.0.6",
"vue-router": "^2.3.1", "vue-router": "^3.0.1",
"vue-schart": "^0.1.2", "vue-schart": "^0.1.4"
"vue-simplemde": "0.3.8"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.7.2", "autoprefixer": "^7.1.2",
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-loader": "^6.2.10", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0", "babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0", "chalk": "^2.0.1",
"chalk": "^1.1.3", "copy-webpack-plugin": "^4.0.1",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6", "extract-text-webpack-plugin": "^3.0.0",
"express": "^4.14.1", "file-loader": "^1.1.4",
"extract-text-webpack-plugin": "^2.0.0", "friendly-errors-webpack-plugin": "^1.6.1",
"file-loader": "^0.11.1", "html-webpack-plugin": "^2.30.1",
"friendly-errors-webpack-plugin": "^1.1.3", "node-notifier": "^5.1.2",
"function-bind": "^1.1.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"opn": "^4.0.2",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-loader": "^11.3.4", "vue-loader": "^13.3.0",
"vue-style-loader": "^2.0.5", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.2.6", "vue-template-compiler": "^2.5.2",
"webpack": "^2.3.3", "webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.2.1", "webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0" "webpack-merge": "^4.1.0"
}, },
"engines": { "engines": {

21
src/components/common/Sidebar.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router> <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<template v-for="item in items"> <template v-for="item in items">
<template v-if="item.subs"> <template v-if="item.subs">
<el-submenu :index="item.index"> <el-submenu :index="item.index" :key="item.index">
<template slot="title"><i :class="item.icon"></i>{{ item.title }}</template> <template slot="title">
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }} <i :class="item.icon"></i>{{ item.title }}
</template>
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
{{ subItem.title }}
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</template> </template>
<template v-else> <template v-else>
<el-menu-item :index="item.index"> <el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>{{ item.title }} <i :class="item.icon"></i>{{ item.title }}
</el-menu-item> </el-menu-item>
</template> </template>
@ -73,9 +77,14 @@
title: '图表' title: '图表'
}, },
{ {
icon: 'el-icon-upload2', icon: 'el-icon-edit',
index: 'drag', index: 'drag',
title: '拖拽' title: '拖拽'
},
{
icon: 'el-icon-edit',
index: 'permission',
title: '权限'
} }
] ]
} }

35
src/components/page/BaseTable.vue
View File

@ -24,7 +24,7 @@
<el-table-column prop="address" label="地址" :formatter="formatter"> <el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template scope="scope"> <template slot-scope="scope">
<el-button size="small" <el-button size="small"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button> @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" <el-button size="small" type="danger"
@ -61,19 +61,18 @@
}, },
computed: { computed: {
data(){ data(){
const self = this; return this.tableData.filter((d) => {
return self.tableData.filter(function(d){
let is_del = false; let is_del = false;
for (let i = 0; i < self.del_list.length; i++) { for (let i = 0; i < this.del_list.length; i++) {
if(d.name === self.del_list[i].name){ if(d.name === this.del_list[i].name){
is_del = true; is_del = true;
break; break;
} }
} }
if(!is_del){ if(!is_del){
if(d.address.indexOf(self.select_cate) > -1 && if(d.address.indexOf(this.select_cate) > -1 &&
(d.name.indexOf(self.select_word) > -1 || (d.name.indexOf(this.select_word) > -1 ||
d.address.indexOf(self.select_word) > -1) d.address.indexOf(this.select_word) > -1)
){ ){
return d; return d;
} }
@ -82,17 +81,18 @@
} }
}, },
methods: { methods: {
// 分页导航
handleCurrentChange(val){ handleCurrentChange(val){
this.cur_page = val; this.cur_page = val;
this.getData(); this.getData();
}, },
// 获取 easy-mock 的模拟数据
getData(){ getData(){
let self = this;
if(process.env.NODE_ENV === 'development'){ if(process.env.NODE_ENV === 'development'){
self.url = '/ms/table/list'; this.url = '/ms/table/list';
}; };
self.$axios.post(self.url, {page:self.cur_page}).then((res) => { this.$axios.post(this.url, {page:this.cur_page}).then((res) => {
self.tableData = res.data.list; this.tableData = res.data.list;
}) })
}, },
search(){ search(){
@ -111,15 +111,14 @@
this.$message.error('删除第'+(index+1)+'行'); this.$message.error('删除第'+(index+1)+'行');
}, },
delAll(){ delAll(){
const self = this, const length = this.multipleSelection.length;
length = self.multipleSelection.length;
let str = ''; let str = '';
self.del_list = self.del_list.concat(self.multipleSelection); this.del_list = this.del_list.concat(this.multipleSelection);
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
str += self.multipleSelection[i].name + ' '; str += this.multipleSelection[i].name + ' ';
} }
self.$message.error('删除了'+str); this.$message.error('删除了'+str);
self.multipleSelection = []; this.multipleSelection = [];
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;

1
src/components/page/DragList.vue
View File

@ -15,6 +15,7 @@
@dragenter="dragenterEvent" @dragenter="dragenterEvent"
@dragleave="dragleaveEvent" @dragleave="dragleaveEvent"
@dragover="dragoverEvent" @dragover="dragoverEvent"
:key="list.id"
>{{list.title}}</div> >{{list.title}}</div>
</div> </div>
</section> </section>

4
src/components/page/Login.vue
View File

@ -23,8 +23,8 @@
data: function(){ data: function(){
return { return {
ruleForm: { ruleForm: {
username: '', username: 'admin',
password: '' password: '123123'
}, },
rules: { rules: {
username: [ username: [

96
src/components/page/Permission.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="ms-doc">
<h3>README.md</h3>
<article>
<h1>manage-system</h1>
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
<h2>前言</h2>
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
<h2>功能</h2>
<el-checkbox disabled checked>Element UI</el-checkbox>
<br>
<el-checkbox disabled checked>登录/注销</el-checkbox>
<br>
<el-checkbox disabled checked>表格</el-checkbox>
<br>
<el-checkbox disabled checked>表单</el-checkbox>
<br>
<el-checkbox disabled checked>图表</el-checkbox>
<br>
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
<br>
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
<br>
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
<br>
<el-checkbox disabled checked>支持切换主题色</el-checkbox>
<br>
<el-checkbox disabled checked>列表拖拽排序</el-checkbox>
<br>
</article>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {}
}
}
</script>
<style scoped>
.ms-doc{
width:100%;
max-width: 980px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ms-doc h3{
padding: 9px 10px 10px;
margin: 0;
font-size: 14px;
line-height: 17px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
border-bottom: 0;
border-radius: 3px 3px 0 0;
}
.ms-doc article{
padding: 45px;
word-wrap: break-word;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.ms-doc article h1{
font-size:32px;
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.ms-doc article h2 {
margin: 24px 0 16px;
font-weight: 600;
line-height: 1.25;
padding-bottom: 7px;
font-size: 24px;
border-bottom: 1px solid #eee;
}
.ms-doc article p{
margin-bottom: 15px;
line-height: 1.5;
}
.ms-doc article .el-checkbox{
margin-bottom: 5px;
}
</style>

16
src/main.js
View File

@ -3,12 +3,24 @@ import App from './App';
import router from './router'; import router from './router';
import axios from 'axios'; import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css'; // 默认主题 import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题 // import '../static/css/theme-green/index.css'; // 浅绿色主题
import "babel-polyfill"; import "babel-polyfill";
Vue.use(ElementUI); Vue.use(ElementUI, { size: 'small' });
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
if(to.meta.permission){
const role = localStorage.getItem('ms_username');
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/login');
}else{
next();
}
})
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)

130
src/router/index.js
View File

@ -1,59 +1,71 @@
import Vue from 'vue'; import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
redirect: '/login' redirect: '/login'
}, },
{ {
path: '/readme', path: '/readme',
component: resolve => require(['../components/common/Home.vue'], resolve), component: resolve => require(['../components/common/Home.vue'], resolve),
children:[ children:[
{ {
path: '/', path: '/',
component: resolve => require(['../components/page/Readme.vue'], resolve) component: resolve => require(['../components/page/Readme.vue'], resolve)
}, },
{ {
path: '/basetable', path: '/basetable',
component: resolve => require(['../components/page/BaseTable.vue'], resolve) component: resolve => require(['../components/page/BaseTable.vue'], resolve)
}, },
{ {
path: '/vuetable', // vue-datasource组件
component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件 path: '/vuetable',
}, component: resolve => require(['../components/page/VueTable.vue'], resolve)
{ },
path: '/baseform', {
component: resolve => require(['../components/page/BaseForm.vue'], resolve) path: '/baseform',
}, component: resolve => require(['../components/page/BaseForm.vue'], resolve)
{ },
path: '/vueeditor', {
component: resolve => require(['../components/page/VueEditor.vue'], resolve) // Vue-Quill-Editor组件 // Vue-Quill-Editor组件
}, path: '/vueeditor',
{ component: resolve => require(['../components/page/VueEditor.vue'], resolve)
path: '/markdown', },
component: resolve => require(['../components/page/Markdown.vue'], resolve) // Vue-Quill-Editor组件 {
}, // markdown组件
{ path: '/markdown',
path: '/upload', component: resolve => require(['../components/page/VueEditor.vue'], resolve)
component: resolve => require(['../components/page/Upload.vue'], resolve) // Vue-Core-Image-Upload组件 },
}, {
{ // Vue-Core-Image-Upload组件
path: '/basecharts', path: '/upload',
component: resolve => require(['../components/page/BaseCharts.vue'], resolve) // vue-schart组件 component: resolve => require(['../components/page/Upload.vue'], resolve)
}, },
{ {
path: '/drag', // vue-schart组件
component: resolve => require(['../components/page/DragList.vue'], resolve) // 拖拽列表组件 path: '/basecharts',
} component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
] },
}, {
{ // 拖拽列表组件
path: '/login', path: '/drag',
component: resolve => require(['../components/page/Login.vue'], resolve) component: resolve => require(['../components/page/DragList.vue'], resolve)
}, },
] {
}) // 权限页面
path: '/permission',
component: resolve => require(['../components/page/Permission.vue'], resolve),
meta: {permission: true}
}
]
},
{
path: '/login',
component: resolve => require(['../components/page/Login.vue'], resolve)
},
]
})