taylor
8 years ago
38 changed files with 1277 additions and 0 deletions
-
5.babelrc
-
5.gitignore
-
36build/build.js
-
45build/check-versions.js
-
9build/dev-client.js
-
68build/dev-server.js
-
61build/utils.js
-
77build/webpack.base.conf.js
-
34build/webpack.dev.conf.js
-
98build/webpack.prod.conf.js
-
6config/dev.env.js
-
32config/index.js
-
3config/prod.env.js
-
13index.html
-
52package.json
-
69src/App.vue
-
BINsrc/assets/bg1.jpg
-
BINsrc/assets/logo.png
-
BINsrc/assets/logo1.png
-
BINsrc/assets/logo2.png
-
BINsrc/assets/logo3.png
-
BINsrc/assets/logo4.png
-
BINsrc/assets/logo5.png
-
BINsrc/assets/logout_16.png
-
BINsrc/assets/logout_24.png
-
BINsrc/assets/logout_36.png
-
174src/components/Home.vue
-
84src/components/Login.vue
-
14src/components/Main.vue
-
167src/components/nav1/Page1.vue
-
70src/components/nav1/Page2.vue
-
28src/components/nav1/Page3.vue
-
4src/components/nav2/Page4.vue
-
4src/components/nav2/Page5.vue
-
4src/components/nav3/page6.vue
-
91src/main.js
-
24src/store/config.js
-
0static/.gitkeep
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"presets": ["es2015", "stage-2"], |
||||
|
"plugins": ["transform-runtime"], |
||||
|
"comments": false |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
.DS_Store |
||||
|
node_modules/ |
||||
|
dist/ |
||||
|
npm-debug.log |
||||
|
.editorconfig |
||||
@ -0,0 +1,36 @@ |
|||||
|
// https://github.com/shelljs/shelljs
|
||||
|
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') |
||||
|
|
||||
|
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() |
||||
|
if (err) throw err |
||||
|
process.stdout.write(stats.toString({ |
||||
|
colors: true, |
||||
|
modules: false, |
||||
|
children: false, |
||||
|
chunks: false, |
||||
|
chunkModules: false |
||||
|
}) + '\n') |
||||
|
}) |
||||
@ -0,0 +1,45 @@ |
|||||
|
var semver = require('semver') |
||||
|
var chalk = require('chalk') |
||||
|
var packageConfig = require('../package.json') |
||||
|
var exec = function (cmd) { |
||||
|
return require('child_process') |
||||
|
.execSync(cmd).toString().trim() |
||||
|
} |
||||
|
|
||||
|
var versionRequirements = [ |
||||
|
{ |
||||
|
name: 'node', |
||||
|
currentVersion: semver.clean(process.version), |
||||
|
versionRequirement: packageConfig.engines.node |
||||
|
}, |
||||
|
{ |
||||
|
name: 'npm', |
||||
|
currentVersion: exec('npm --version'), |
||||
|
versionRequirement: packageConfig.engines.npm |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
module.exports = function () { |
||||
|
var warnings = [] |
||||
|
for (var i = 0; i < versionRequirements.length; i++) { |
||||
|
var 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 (var i = 0; i < warnings.length; i++) { |
||||
|
var warning = warnings[i] |
||||
|
console.log(' ' + warning) |
||||
|
} |
||||
|
console.log() |
||||
|
process.exit(1) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
/* 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() |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,68 @@ |
|||||
|
require('./check-versions')() |
||||
|
var config = require('../config') |
||||
|
if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env |
||||
|
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 |
||||
|
// 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, |
||||
|
stats: { |
||||
|
colors: true, |
||||
|
chunks: false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
var 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) { |
||||
|
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(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')) |
||||
|
|
||||
|
module.exports = app.listen(port, function (err) { |
||||
|
if (err) { |
||||
|
console.log(err) |
||||
|
return |
||||
|
} |
||||
|
var uri = 'http://localhost:' + port |
||||
|
console.log('Listening at ' + uri + '\n') |
||||
|
opn(uri) |
||||
|
}) |
||||
@ -0,0 +1,61 @@ |
|||||
|
var path = require('path') |
||||
|
var config = require('../config') |
||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin') |
||||
|
|
||||
|
exports.assetsPath = function (_path) { |
||||
|
var assetsSubDirectory = process.env.NODE_ENV === 'production' |
||||
|
? config.build.assetsSubDirectory |
||||
|
: config.dev.assetsSubDirectory |
||||
|
return path.posix.join(assetsSubDirectory, _path) |
||||
|
} |
||||
|
|
||||
|
exports.cssLoaders = function (options) { |
||||
|
options = options || {} |
||||
|
// 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('!') |
||||
|
|
||||
|
// Extract CSS when that option is specified
|
||||
|
// (which is the case during production build)
|
||||
|
if (options.extract) { |
||||
|
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) |
||||
|
} else { |
||||
|
return ['vue-style-loader', sourceLoader].join('!') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// http://vuejs.github.io/vue-loader/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']) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 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] |
||||
|
output.push({ |
||||
|
test: new RegExp('\\.' + extension + '$'), |
||||
|
loader: loader |
||||
|
}) |
||||
|
} |
||||
|
return output |
||||
|
} |
||||
@ -0,0 +1,77 @@ |
|||||
|
var path = require('path') |
||||
|
var config = require('../config') |
||||
|
var utils = require('./utils') |
||||
|
var projectRoot = path.resolve(__dirname, '../') |
||||
|
|
||||
|
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 |
||||
|
|
||||
|
module.exports = { |
||||
|
entry: { |
||||
|
app: './src/main.js' |
||||
|
}, |
||||
|
output: { |
||||
|
path: config.build.assetsRoot, |
||||
|
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, |
||||
|
filename: '[name].js' |
||||
|
}, |
||||
|
resolve: { |
||||
|
extensions: ['', '.js', '.vue'], |
||||
|
fallback: [path.join(__dirname, '../node_modules')], |
||||
|
alias: { |
||||
|
'vue$': 'vue/dist/vue', |
||||
|
'src': path.resolve(__dirname, '../src'), |
||||
|
'assets': path.resolve(__dirname, '../src/assets'), |
||||
|
'components': path.resolve(__dirname, '../src/components') |
||||
|
} |
||||
|
}, |
||||
|
resolveLoader: { |
||||
|
fallback: [path.join(__dirname, '../node_modules')] |
||||
|
}, |
||||
|
module: { |
||||
|
loaders: [ |
||||
|
{ |
||||
|
test: /\.vue$/, |
||||
|
loader: 'vue' |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.js$/, |
||||
|
loader: 'babel', |
||||
|
include: projectRoot, |
||||
|
exclude: /node_modules/ |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.json$/, |
||||
|
loader: 'json' |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, |
||||
|
loader: 'url', |
||||
|
query: { |
||||
|
limit: 10000, |
||||
|
name: utils.assetsPath('img/[name].[hash:7].[ext]') |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, |
||||
|
loader: 'url', |
||||
|
query: { |
||||
|
limit: 10000, |
||||
|
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
vue: { |
||||
|
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), |
||||
|
postcss: [ |
||||
|
require('autoprefixer')({ |
||||
|
browsers: ['last 2 versions'] |
||||
|
}) |
||||
|
] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
var config = require('../config') |
||||
|
var webpack = require('webpack') |
||||
|
var merge = require('webpack-merge') |
||||
|
var utils = require('./utils') |
||||
|
var baseWebpackConfig = require('./webpack.base.conf') |
||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
|
|
||||
|
// add hot-reload related code to entry chunks
|
||||
|
Object.keys(baseWebpackConfig.entry).forEach(function (name) { |
||||
|
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) |
||||
|
}) |
||||
|
|
||||
|
module.exports = merge(baseWebpackConfig, { |
||||
|
module: { |
||||
|
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) |
||||
|
}, |
||||
|
// eval-source-map is faster for development
|
||||
|
devtool: '#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(), |
||||
|
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
|
new HtmlWebpackPlugin({ |
||||
|
filename: 'index.html', |
||||
|
template: 'index.html', |
||||
|
inject: true |
||||
|
}) |
||||
|
] |
||||
|
}) |
||||
@ -0,0 +1,98 @@ |
|||||
|
var path = require('path') |
||||
|
var config = require('../config') |
||||
|
var utils = require('./utils') |
||||
|
var webpack = require('webpack') |
||||
|
var merge = require('webpack-merge') |
||||
|
var baseWebpackConfig = require('./webpack.base.conf') |
||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin') |
||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
|
var env = config.build.env |
||||
|
|
||||
|
var webpackConfig = merge(baseWebpackConfig, { |
||||
|
module: { |
||||
|
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) |
||||
|
}, |
||||
|
devtool: config.build.productionSourceMap ? '#source-map' : false, |
||||
|
output: { |
||||
|
path: config.build.assetsRoot, |
||||
|
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({ |
||||
|
'process.env': env |
||||
|
}), |
||||
|
new webpack.optimize.UglifyJsPlugin({ |
||||
|
compress: { |
||||
|
warnings: false |
||||
|
} |
||||
|
}), |
||||
|
new webpack.optimize.OccurenceOrderPlugin(), |
||||
|
// extract css into its own file
|
||||
|
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), |
||||
|
// 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
|
||||
|
new HtmlWebpackPlugin({ |
||||
|
filename: config.build.index, |
||||
|
template: 'index.html', |
||||
|
inject: true, |
||||
|
minify: { |
||||
|
removeComments: true, |
||||
|
collapseWhitespace: true, |
||||
|
removeAttributeQuotes: true |
||||
|
// more options:
|
||||
|
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
|
}, |
||||
|
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
|
chunksSortMode: 'dependency' |
||||
|
}), |
||||
|
// split vendor js into its own file
|
||||
|
new webpack.optimize.CommonsChunkPlugin({ |
||||
|
name: 'vendor', |
||||
|
minChunks: function (module, count) { |
||||
|
// any required modules inside node_modules are extracted to vendor
|
||||
|
return ( |
||||
|
module.resource && |
||||
|
/\.js$/.test(module.resource) && |
||||
|
module.resource.indexOf( |
||||
|
path.join(__dirname, '../node_modules') |
||||
|
) === 0 |
||||
|
) |
||||
|
} |
||||
|
}), |
||||
|
// extract webpack runtime and module manifest to its own file in order to
|
||||
|
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
|
new webpack.optimize.CommonsChunkPlugin({ |
||||
|
name: 'manifest', |
||||
|
chunks: ['vendor'] |
||||
|
}) |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
if (config.build.productionGzip) { |
||||
|
var CompressionWebpackPlugin = require('compression-webpack-plugin') |
||||
|
|
||||
|
webpackConfig.plugins.push( |
||||
|
new CompressionWebpackPlugin({ |
||||
|
asset: '[path].gz[query]', |
||||
|
algorithm: 'gzip', |
||||
|
test: new RegExp( |
||||
|
'\\.(' + |
||||
|
config.build.productionGzipExtensions.join('|') + |
||||
|
')$' |
||||
|
), |
||||
|
threshold: 10240, |
||||
|
minRatio: 0.8 |
||||
|
}) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
module.exports = webpackConfig |
||||
@ -0,0 +1,6 @@ |
|||||
|
var merge = require('webpack-merge') |
||||
|
var prodEnv = require('./prod.env') |
||||
|
|
||||
|
module.exports = merge(prodEnv, { |
||||
|
NODE_ENV: '"development"' |
||||
|
}) |
||||
@ -0,0 +1,32 @@ |
|||||
|
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
var path = require('path') |
||||
|
|
||||
|
module.exports = { |
||||
|
build: { |
||||
|
env: require('./prod.env'), |
||||
|
index: path.resolve(__dirname, '../dist/index.html'), |
||||
|
assetsRoot: path.resolve(__dirname, '../dist'), |
||||
|
assetsSubDirectory: 'static', |
||||
|
assetsPublicPath: '/admin/', |
||||
|
productionSourceMap: true, |
||||
|
// 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'] |
||||
|
}, |
||||
|
dev: { |
||||
|
env: require('./dev.env'), |
||||
|
port: 8080, |
||||
|
assetsSubDirectory: 'static', |
||||
|
assetsPublicPath: '/', |
||||
|
proxyTable: {}, |
||||
|
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
|
// with this option, according to the CSS-Loader README
|
||||
|
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
|
// In our experience, they generally work as expected,
|
||||
|
// just be aware of this issue when enabling this option.
|
||||
|
cssSourceMap: false |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
module.exports = { |
||||
|
NODE_ENV: '"production"' |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>vue element admin</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,52 @@ |
|||||
|
{ |
||||
|
"name": "vueadmin", |
||||
|
"version": "1.0.0", |
||||
|
"description": "vue admin project", |
||||
|
"author": "taylor <709161610@qq.com>", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "node build/dev-server.js", |
||||
|
"build": "node build/build.js" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"nprogress": "^0.2.0", |
||||
|
"vue": "^2.0.1" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"autoprefixer": "^6.4.0", |
||||
|
"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", |
||||
|
"babel-register": "^6.0.0", |
||||
|
"chalk": "^1.1.3", |
||||
|
"connect-history-api-fallback": "^1.1.0", |
||||
|
"css-loader": "^0.25.0", |
||||
|
"element-ui": "^1.0.0-rc.8", |
||||
|
"eventsource-polyfill": "^0.9.6", |
||||
|
"express": "^4.13.3", |
||||
|
"extract-text-webpack-plugin": "^1.0.1", |
||||
|
"file-loader": "^0.9.0", |
||||
|
"function-bind": "^1.0.2", |
||||
|
"html-webpack-plugin": "^2.8.1", |
||||
|
"http-proxy-middleware": "^0.17.2", |
||||
|
"json-loader": "^0.5.4", |
||||
|
"opn": "^4.0.2", |
||||
|
"ora": "^0.3.0", |
||||
|
"semver": "^5.3.0", |
||||
|
"shelljs": "^0.7.4", |
||||
|
"url-loader": "^0.5.7", |
||||
|
"vue-loader": "^9.4.0", |
||||
|
"vue-router": "^2.0.1", |
||||
|
"vue-style-loader": "^1.0.0", |
||||
|
"webpack": "^1.13.2", |
||||
|
"webpack-dev-middleware": "^1.8.3", |
||||
|
"webpack-hot-middleware": "^2.12.2", |
||||
|
"webpack-merge": "^0.14.1" |
||||
|
}, |
||||
|
"engines": { |
||||
|
"node": ">= 4.0.0", |
||||
|
"npm": ">= 3.0.0" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,69 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<transition name="bounce"> |
||||
|
<router-view></router-view> |
||||
|
</transition> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'app', |
||||
|
components: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.bounce-enter-active { |
||||
|
animation: bounce-in .5s; |
||||
|
} |
||||
|
|
||||
|
.bounce-leave-active { |
||||
|
animation: bounce-out .2s; |
||||
|
} |
||||
|
|
||||
|
@keyframes bounce-in { |
||||
|
0% { |
||||
|
transform: scale(0); |
||||
|
} |
||||
|
50% { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
100% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes bounce-out { |
||||
|
0% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
50% { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
100% { |
||||
|
transform: scale(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
/*background-color: #324057;*/ |
||||
|
margin: 0px; |
||||
|
padding: 0px; |
||||
|
/*background: url(assets/bg1.jpg) center !important; |
||||
|
background-size: cover;*/ |
||||
|
background: #1F2D3D; |
||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; |
||||
|
font-weight: 400; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
bottom: 0px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
Binary file not shown.
|
After Width: 2000 | Height: 1333 | Size: 193 KiB |
Binary file not shown.
|
After Width: 200 | Height: 200 | Size: 6.7 KiB |
Binary file not shown.
|
After Width: 64 | Height: 64 | Size: 3.9 KiB |
Binary file not shown.
|
After Width: 72 | Height: 72 | Size: 5.8 KiB |
Binary file not shown.
|
After Width: 64 | Height: 64 | Size: 4.4 KiB |
Binary file not shown.
|
After Width: 64 | Height: 64 | Size: 1.3 KiB |
Binary file not shown.
|
After Width: 64 | Height: 64 | Size: 2.1 KiB |
Binary file not shown.
|
After Width: 16 | Height: 16 | Size: 1.1 KiB |
Binary file not shown.
|
After Width: 24 | Height: 24 | Size: 1.3 KiB |
Binary file not shown.
|
After Width: 32 | Height: 32 | Size: 1.8 KiB |
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<el-row class="panel"> |
||||
|
<el-col :span="24" class="panel-top"> |
||||
|
<el-col :span="20" style="font-size:26px;"> |
||||
|
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i></span> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom"> |
||||
|
<i class="logout" v-on:click="logout"></i> |
||||
|
</el-tooltip> |
||||
|
</el-col> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="panel-center"> |
||||
|
<!--<el-col :span="4">--> |
||||
|
<aside style="width:230px;"> |
||||
|
<h5 class="admin">欢迎系统管理员：测试</h5> |
||||
|
<el-menu style="border-top: 1px solid #475669;" default-active="/page1" class="el-menu-vertical-demo" @open="handleopen" |
||||
|
@close="handleclose" @select="handleselect" theme="dark" unique-opened="true" router="true"> |
||||
|
<el-submenu index="1"> |
||||
|
<template slot="title"><i class="el-icon-message"></i>导航一</template> |
||||
|
<el-menu-item index="/page1">页面1</el-menu-item> |
||||
|
<el-menu-item index="/page2">页面2</el-menu-item> |
||||
|
<el-menu-item index="/page3">页面3</el-menu-item> |
||||
|
</el-submenu> |
||||
|
<el-submenu index="2"> |
||||
|
<template slot="title"><i class="el-icon-message"></i>导航二</template> |
||||
|
<el-menu-item index="/page4">选项4</el-menu-item> |
||||
|
<el-menu-item index="/page5">选项5</el-menu-item> |
||||
|
</el-submenu> |
||||
|
<el-menu-item index="/page6"><i class="el-icon-setting"></i>导航三</el-menu-item> |
||||
|
|
||||
|
</el-menu> |
||||
|
</aside> |
||||
|
<!--</el-col>--> |
||||
|
<!--<el-col :span="20" class="panel-c-c">--> |
||||
|
<section class="panel-c-c"> |
||||
|
<div class="grid-content bg-purple-light"> |
||||
|
<el-col :span="24" style="margin-bottom:15px;"> |
||||
|
<strong style="width:200px;float:left;color: #475669;">{{$store.state.currentPathName}}</strong> |
||||
|
<el-breadcrumb separator="/" style="float:right;"> |
||||
|
<el-breadcrumb-item :to="{ path: '/page1' }">首页</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>{{$store.state.currentPathNameParent}}</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>{{$store.state.currentPathName}}</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</el-col> |
||||
|
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;"> |
||||
|
<transition name="fade"> |
||||
|
<router-view></router-view> |
||||
|
</transition> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</section> |
||||
|
<!--</el-col>--> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
name: '', |
||||
|
region: '', |
||||
|
date1: '', |
||||
|
date2: '', |
||||
|
delivery: false, |
||||
|
type: [], |
||||
|
resource: '', |
||||
|
desc: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
console.log('submit!'); |
||||
|
}, |
||||
|
handleopen(){ |
||||
|
console.log('handleopen'); |
||||
|
}, |
||||
|
handleclose(){ |
||||
|
console.log('handleclose'); |
||||
|
}, |
||||
|
handleselect:function(a,b){ |
||||
|
console.log(a); |
||||
|
console.log(b); |
||||
|
}, |
||||
|
//退出登录 |
||||
|
logout:function(){ |
||||
|
var _this=this; |
||||
|
this.$confirm('确认退出吗?', '提示', { |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
_this.$router.replace('/login'); |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.fade-enter-active, |
||||
|
.fade-leave-active { |
||||
|
transition: opacity .5s |
||||
|
} |
||||
|
|
||||
|
.fade-enter, |
||||
|
.fade-leave-active { |
||||
|
opacity: 0 |
||||
|
} |
||||
|
|
||||
|
.panel { |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
bottom: 0px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.panel-top { |
||||
|
height: 60px; |
||||
|
line-height: 60px; |
||||
|
background: #1F2D3D; |
||||
|
color: #c0ccda; |
||||
|
} |
||||
|
|
||||
|
.panel-center { |
||||
|
background: #324057; |
||||
|
position: absolute; |
||||
|
top: 60px; |
||||
|
bottom: 0px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.panel-c-c { |
||||
|
background: #f1f2f7; |
||||
|
position: absolute; |
||||
|
right: 0px; |
||||
|
top: 0px; |
||||
|
bottom: 0px; |
||||
|
left: 230px; |
||||
|
overflow-y: scroll; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.logout { |
||||
|
background: url(../assets/logout_36.png); |
||||
|
background-size: contain; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 40px; |
||||
|
float: left; |
||||
|
margin: 10px 10px 10px 18px; |
||||
|
} |
||||
|
|
||||
|
.tip-logout { |
||||
|
float: right; |
||||
|
margin-right: 20px; |
||||
|
padding-top: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.admin { |
||||
|
color: #c0ccda; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform"> |
||||
|
<h3 class="title">系统登录</h3> |
||||
|
<el-form-item prop="account"> |
||||
|
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="checkPass"> |
||||
|
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox> |
||||
|
<el-form-item style="width:100%;"> |
||||
|
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button> |
||||
|
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>--> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
ruleForm2: { |
||||
|
account: '', |
||||
|
checkPass: '' |
||||
|
}, |
||||
|
rules2: { |
||||
|
account: [ |
||||
|
{ required: true, message: '请输入账号', trigger: 'blur' }, |
||||
|
//{ validator: validaePass } |
||||
|
], |
||||
|
checkPass: [ |
||||
|
{ required: true, message: '请输入密码', trigger: 'blur' }, |
||||
|
//{ validator: validaePass2 } |
||||
|
] |
||||
|
}, |
||||
|
checked: true |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleReset2() { |
||||
|
this.$refs.ruleForm2.resetFields(); |
||||
|
}, |
||||
|
handleSubmit2(ev) { |
||||
|
var _this=this; |
||||
|
this.$refs.ruleForm2.validate((valid) => { |
||||
|
if (valid) { |
||||
|
//_this.$router.push('/page1'); |
||||
|
_this.$router.replace('/page1'); |
||||
|
} else { |
||||
|
console.log('error submit!!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.card-box { |
||||
|
padding: 20px; |
||||
|
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/ |
||||
|
-webkit-border-radius: 5px; |
||||
|
border-radius: 5px; |
||||
|
-moz-border-radius: 5px; |
||||
|
background-clip: padding-box; |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #F9FAFC; |
||||
|
margin: 120px auto; |
||||
|
width: 400px; |
||||
|
border: 2px solid #8492A6; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
margin: 0px auto 40px auto; |
||||
|
text-align: center; |
||||
|
color: #505458; |
||||
|
} |
||||
|
|
||||
|
.loginform { |
||||
|
width: 350px; |
||||
|
padding: 35px 35px 15px 35px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<section> |
||||
|
main |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,167 @@ |
|||||
|
<template> |
||||
|
<section> |
||||
|
<el-col :span="24" class="toolbar"> |
||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
||||
|
<el-form-item> |
||||
|
<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-date-picker v-model="value1" type="date" placeholder="结束日期" :picker-options="pickerOptions0"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-input v-model="formInline.user" placeholder="姓名"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-col> |
||||
|
<el-table :data="tableData" style="width: 100%" border> |
||||
|
<el-table-column type="selection" width="50"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="姓名" width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="sex" label="性别" width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="age" label="年龄" width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" label="地址"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" label="日期" width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column inline-template label="操作" width="80"> |
||||
|
<el-button type="text" size="small">编辑</el-button> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-col :span="24" class="toolbar" style="padding-bottom:10px;"> |
||||
|
<el-button>删除</el-button> |
||||
|
<el-pagination :current-page="5" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="400" style="float:right"> |
||||
|
</el-pagination> |
||||
|
</el-col> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formInline: { |
||||
|
user: '' |
||||
|
}, |
||||
|
pickerOptions0: { |
||||
|
disabledDate(time) { |
||||
|
return time.getTime() < Date.now() - 8.64e7; |
||||
|
} |
||||
|
}, |
||||
|
value1:'', |
||||
|
tableData: [{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
},{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'CHEN', |
||||
|
age: '50', |
||||
|
sex: '男', |
||||
|
address: '1231321321321321' |
||||
|
}] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.toolbar .el-form-item { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.toolbar { |
||||
|
background: #fff; |
||||
|
padding: 10px 10px 0px 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;"> |
||||
|
<el-form-item label="活动名称"> |
||||
|
<el-input v-model="form.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动区域"> |
||||
|
<el-select v-model="form.region" placeholder="请选择活动区域"> |
||||
|
<el-option label="区域一" value="shanghai"></el-option> |
||||
|
<el-option label="区域二" value="beijing"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间"> |
||||
|
<el-col :span="11"> |
||||
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> |
||||
|
</el-col> |
||||
|
<el-col class="line" :span="2">-</el-col> |
||||
|
<el-col :span="11"> |
||||
|
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> |
||||
|
</el-col> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="即时配送"> |
||||
|
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动性质"> |
||||
|
<el-checkbox-group v-model="form.type"> |
||||
|
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="地推活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="线下主题活动" name="type"></el-checkbox> |
||||
|
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="特殊资源"> |
||||
|
<el-radio-group v-model="form.resource"> |
||||
|
<el-radio label="线上品牌商赞助"></el-radio> |
||||
|
<el-radio label="线下场地免费"></el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动形式"> |
||||
|
<el-input type="textarea" v-model="form.desc"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary">立即创建</el-button> |
||||
|
<el-button @click.native.prevent>取消</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
name: '', |
||||
|
region: '', |
||||
|
date1: '', |
||||
|
date2: '', |
||||
|
delivery: false, |
||||
|
type: [], |
||||
|
resource: '', |
||||
|
desc: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
console.log('submit!'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<el-tabs style="width:100%;" type="card" @tab-click="handleClick" @tab-remove="handleRemove"> |
||||
|
<el-tab-pane label="用户管理"> |
||||
|
<el-col :span="24" style="padding:10px;"> |
||||
|
<el-steps :space="100" direction="vertical" :active="1"> |
||||
|
<el-step title="步骤 1"></el-step> |
||||
|
<el-step title="步骤 2"></el-step> |
||||
|
<el-step title="步骤 3"></el-step> |
||||
|
</el-steps> |
||||
|
</el-col> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="配置管理">222</el-tab-pane> |
||||
|
<el-tab-pane label="角色管理">333</el-tab-pane> |
||||
|
<el-tab-pane label="定时任务补偿">444</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
handleRemove(tab) { |
||||
|
console.log(tab); |
||||
|
}, |
||||
|
handleClick(tab) { |
||||
|
console.log(tab); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,4 @@ |
|||||
|
<template> |
||||
|
<section>page4... |
||||
|
</section> |
||||
|
</template> |
||||
@ -0,0 +1,4 @@ |
|||||
|
<template> |
||||
|
<section>page5... |
||||
|
</section> |
||||
|
</template> |
||||
@ -0,0 +1,4 @@ |
|||||
|
<template> |
||||
|
<section>page6... |
||||
|
</section> |
||||
|
</template> |
||||
@ -0,0 +1,91 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App' |
||||
|
import ElementUI from 'element-ui' |
||||
|
import 'element-ui/lib/theme-default/index.css' |
||||
|
import VueRouter from 'vue-router' |
||||
|
import store from './store/config' |
||||
|
import Vuex from 'vuex' |
||||
|
import NProgress from 'nprogress'//页面顶部进度条
|
||||
|
import 'nprogress/nprogress.css' |
||||
|
|
||||
|
import Login from './components/Login.vue' |
||||
|
import Home from './components/Home.vue' |
||||
|
import Main from './components/Main.vue' |
||||
|
import Page1 from './components/nav1/Page1.vue' |
||||
|
import Page2 from './components/nav1/Page2.vue' |
||||
|
import Page3 from './components/nav1/Page3.vue' |
||||
|
import Page4 from './components/nav2/Page4.vue' |
||||
|
import Page5 from './components/nav2/Page5.vue' |
||||
|
import Page6 from './components/nav3/Page6.vue' |
||||
|
|
||||
|
Vue.use(ElementUI) |
||||
|
Vue.use(VueRouter) |
||||
|
Vue.use(Vuex) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ path: '/login', component: Login }, |
||||
|
//{ path: '/main', component: Main },
|
||||
|
{ |
||||
|
path: '/', |
||||
|
component: Home, |
||||
|
name: '导航一', |
||||
|
children: [ |
||||
|
{ path: '/main', component: Main }, |
||||
|
{ path: '/page1', component: Page1, name: '页面1' }, |
||||
|
{ path: '/page2', component: Page2, name: '页面2' }, |
||||
|
{ path: '/page3', component: Page3, name: '页面3' }, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
path: '/', |
||||
|
component: Home, |
||||
|
name: '导航二', |
||||
|
children: [ |
||||
|
{ path: '/page4', component: Page4, name: '页面4' }, |
||||
|
{ path: '/page5', component: Page5, name: '页面5' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
path: '/', |
||||
|
component: Home, |
||||
|
name: '导航三', |
||||
|
children: [ |
||||
|
{ path: '/page6', component: Page4, name: '' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
routes // （缩写）相当于 routes: routes
|
||||
|
}) |
||||
|
|
||||
|
router.beforeEach((to, from, next) => { |
||||
|
// to 和 from 都是 路由信息对象
|
||||
|
console.log(to); |
||||
|
console.log(from); |
||||
|
store.state.currentPathNameParent = to.matched[0].name; |
||||
|
store.state.currentPathName = to.name; |
||||
|
//store.commit('setCurrentPath',to.path);
|
||||
|
NProgress.start(); |
||||
|
next() |
||||
|
}) |
||||
|
|
||||
|
// router.beforeEach(transition => {
|
||||
|
// NProgress.done();
|
||||
|
// });
|
||||
|
|
||||
|
router.afterEach(transition => { |
||||
|
NProgress.done(); |
||||
|
}); |
||||
|
|
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
template: '<App/>', |
||||
|
router, |
||||
|
store, |
||||
|
components: { App } |
||||
|
}).$mount('#app') |
||||
|
|
||||
|
router.replace('/login') |
||||
|
|
||||
|
|
||||
@ -0,0 +1,24 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Vuex from 'vuex' |
||||
|
|
||||
|
Vue.use(Vuex) |
||||
|
|
||||
|
const config = new Vuex.Store({ |
||||
|
state: { |
||||
|
count: 0, |
||||
|
//currentPath: '/login',
|
||||
|
currentPathName: '登录', |
||||
|
currentPathNameParent: '导航一', |
||||
|
apiUrl: 'http://localhost:5683/WebForm1.aspx' |
||||
|
}, |
||||
|
mutations: { |
||||
|
increment(state) { |
||||
|
state.count++ |
||||
|
}, |
||||
|
setCurrentPath: function (state, path) { |
||||
|
state.currentPath = path |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
export default config |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue