add project

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+.editorconfig

build/build.js

@@ -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')
+})

build/check-versions.js

@@ -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)
+  }
+}

build/dev-client.js

@@ -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()
+  }
+})

build/dev-server.js

@@ -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)
+})

build/utils.js

@@ -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
+}

build/webpack.base.conf.js

@@ -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']
+      })
+    ]
+  }
+}

build/webpack.dev.conf.js

@@ -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
+    })
+  ]
+})

build/webpack.prod.conf.js

@@ -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

config/dev.env.js

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

config/index.js

@@ -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
+  }
+}

config/prod.env.js

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

index.html

@@ -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>

package.json

@@ -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"
+  }
+}

src/App.vue

@@ -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>

src/components/Home.vue

@@ -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>

src/components/Login.vue

@@ -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>

src/components/Main.vue

@@ -0,0 +1,14 @@
+<template>
+	<section>
+		main
+	</section>
+</template>
+
+<script>
+  export default {
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/nav1/Page1.vue

@@ -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>

src/components/nav1/Page2.vue

@@ -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>

src/components/nav1/Page3.vue

@@ -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>

src/components/nav2/Page4.vue

@@ -0,0 +1,4 @@
+<template>
+	<section>page4...
+	</section>
+</template>

src/components/nav2/Page5.vue

@@ -0,0 +1,4 @@
+<template>
+	<section>page5...
+	</section>
+</template>

src/components/nav3/page6.vue

@@ -0,0 +1,4 @@
+<template>
+	<section>page6...
+	</section>
+</template>

src/main.js

@@ -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')
+
+

src/store/config.js

@@ -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