init

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"]
+}

.eslintignore

@@ -0,0 +1,3 @@
+build/*.js
+config/*.js
+src/assets

.eslintrc.js

@@ -0,0 +1,318 @@
+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module'
+    },
+    env: {
+        browser: true,
+        node: true
+    },
+    extends: 'eslint:recommended',
+    // required to lint *.vue files
+    plugins: [
+        'html'
+    ],
+    // check if imports actually resolve
+    'settings': {
+        'import/resolver': {
+            'webpack': {
+                'config': 'build/webpack.base.conf.js'
+            }
+        }
+    },
+    // add your custom rules here
+    'rules': {
+        // don't require .vue extension when importing
+        // 'import/extensions': ['error', 'always', {
+        //     'js': 'never',
+        //     'vue': 'never'
+        // }],
+        // allow debugger during development
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+        /*
+         * Possible Errors
+         */
+
+        // disallow unnecessary parentheses
+        'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
+
+        // disallow negating the left operand of relational operators
+        'no-unsafe-negation': 'error',
+
+        // enforce valid JSDoc comments
+        'valid-jsdoc': 'off',
+
+        /*
+         * Best Practices
+         */
+
+        // enforce return statements in callbacks of array methods
+        'array-callback-return': 'error',
+
+        // enforce consistent brace style for all control statements
+        curly: ['error', 'multi-line'],
+
+        // enforce consistent newlines before and after dots
+        'dot-location': ['error', 'property'],
+
+        // enforce dot notation whenever possible
+        'dot-notation': 'error',
+
+        // require the use of === and !==
+        'eqeqeq': ['error', 'smart'],
+
+        // disallow the use of arguments.caller or arguments.callee
+        'no-caller': 'error',
+
+        // disallow empty functions
+        'no-empty-function': 'error',
+
+        // disallow unnecessary calls to .bind()
+        'no-extra-bind': 'error',
+
+        // disallow unnecessary labels
+        'no-extra-label': 'error',
+
+        // disallow leading or trailing decimal points in numeric literals
+        'no-floating-decimal': 'error',
+
+        // disallow assignments to native objects or read-only global variables
+        'no-global-assign': 'error',
+
+        // disallow the use of eval()-like methods
+        'no-implied-eval': 'error',
+
+        // disallow the use of the __iterator__ property
+        'no-iterator': 'error',
+
+        // disallow unnecessary nested blocks
+        'no-lone-blocks': 'error',
+
+        // disallow multiple spaces
+        'no-multi-spaces': 'error',
+
+        // disallow new operators with the String, Number, and Boolean objects
+        'no-new-wrappers': 'error',
+
+        // disallow octal escape sequences in string literals
+        'no-octal-escape': 'error',
+
+        // disallow the use of the __proto__ property
+        'no-proto': 'error',
+
+        // disallow comparisons where both sides are exactly the same
+        'no-self-compare': 'error',
+
+        // disallow throwing literals as exceptions
+        'no-throw-literal': 'error',
+
+        // disallow unused expressions
+        'no-unused-expressions': 'error',
+
+        // disallow unnecessary calls to .call() and .apply()
+        'no-useless-call': 'error',
+
+        // disallow unnecessary concatenation of literals or template literals
+        'no-useless-concat': 'error',
+
+        // disallow unnecessary escape characters
+        'no-useless-escape': 'error',
+
+        // disallow void operators
+        'no-void': 'error',
+
+        // require parentheses around immediate function invocations
+        'wrap-iife': 'error',
+
+        // require or disallow “Yoda” conditions
+        yoda: 'error',
+
+        /*
+         * Variables
+         */
+
+        // disallow labels that share a name with a variable
+        'no-label-var': 'error',
+
+        // disallow initializing variables to undefined
+        'no-undef-init': 'error',
+        'no-undef': 'off',
+        // disallow the use of variables before they are defined
+        'no-use-before-define': 'error',
+
+        /*
+         * Node.js and CommonJS
+         */
+
+        // disallow new operators with calls to require
+        'no-new-require': 'error',
+
+        /*
+         * Stylistic Issues
+         */
+
+        // enforce consistent spacing inside array brackets
+        'array-bracket-spacing': 'error',
+
+        // enforce consistent spacing inside single-line blocks
+        'block-spacing': 'error',
+
+        // enforce consistent brace style for blocks
+        'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
+
+        // require or disallow trailing commas
+        'comma-dangle': 'error',
+
+        // enforce consistent spacing before and after commas
+        'comma-spacing': 'error',
+
+        // enforce consistent comma style
+        'comma-style': 'error',
+
+        // enforce consistent spacing inside computed property brackets
+        'computed-property-spacing': 'error',
+
+        // require or disallow spacing between function identifiers and their invocations
+        'func-call-spacing': 'error',
+
+        // enforce consistent indentation
+        indent: ['error', 2, {SwitchCase: 1}],
+
+        // enforce the consistent use of either double or single quotes in JSX attributes
+        'jsx-quotes': 'error',
+
+        // enforce consistent spacing between keys and values in object literal properties
+        'key-spacing': 'error',
+
+        // enforce consistent spacing before and after keywords
+        'keyword-spacing': 'error',
+
+        // enforce consistent linebreak style
+        'linebreak-style': 'error',
+
+        // require or disallow newlines around directives
+        'lines-around-directive': 'error',
+
+        // require constructor names to begin with a capital letter
+        'new-cap': 'off',
+
+        // require parentheses when invoking a constructor with no arguments
+        'new-parens': 'error',
+
+        // disallow Array constructors
+        'no-array-constructor': 'error',
+
+        // disallow Object constructors
+        'no-new-object': 'error',
+
+        // disallow trailing whitespace at the end of lines
+        'no-trailing-spaces': 'error',
+
+        // disallow ternary operators when simpler alternatives exist
+        'no-unneeded-ternary': 'error',
+
+        // disallow whitespace before properties
+        'no-whitespace-before-property': 'error',
+
+        // enforce consistent spacing inside braces
+        'object-curly-spacing': ['error', 'always'],
+
+        // require or disallow padding within blocks
+        'padded-blocks': ['error', 'never'],
+
+        // require quotes around object literal property names
+        'quote-props': ['error', 'as-needed'],
+
+        // enforce the consistent use of either backticks, double, or single quotes
+        quotes: ['error', 'single'],
+
+        // enforce consistent spacing before and after semicolons
+        'semi-spacing': 'error',
+
+        // require or disallow semicolons instead of ASI
+        // semi: ['error', 'never'],
+
+        // enforce consistent spacing before blocks
+        'space-before-blocks': 'error',
+
+        'no-console': 'off',
+
+        // enforce consistent spacing before function definition opening parenthesis
+        'space-before-function-paren': ['error', 'never'],
+
+        // enforce consistent spacing inside parentheses
+        'space-in-parens': 'error',
+
+        // require spacing around infix operators
+        'space-infix-ops': 'error',
+
+        // enforce consistent spacing before or after unary operators
+        'space-unary-ops': 'error',
+
+        // enforce consistent spacing after the // or /* in a comment
+        'spaced-comment': 'error',
+
+        // require or disallow Unicode byte order mark (BOM)
+        'unicode-bom': 'error',
+
+
+        /*
+         * ECMAScript 6
+         */
+
+        // require braces around arrow function bodies
+        'arrow-body-style': 'error',
+
+        // require parentheses around arrow function arguments
+        'arrow-parens': ['error', 'as-needed'],
+
+        // enforce consistent spacing before and after the arrow in arrow functions
+        'arrow-spacing': 'error',
+
+        // enforce consistent spacing around * operators in generator functions
+        'generator-star-spacing': ['error', 'after'],
+
+        // disallow duplicate module imports
+        'no-duplicate-imports': 'error',
+
+        // disallow unnecessary computed property keys in object literals
+        'no-useless-computed-key': 'error',
+
+        // disallow unnecessary constructors
+        'no-useless-constructor': 'error',
+
+        // disallow renaming import, export, and destructured assignments to the same name
+        'no-useless-rename': 'error',
+
+        // require let or const instead of var
+        'no-var': 'error',
+
+        // require or disallow method and property shorthand syntax for object literals
+        'object-shorthand': 'error',
+
+        // require arrow functions as callbacks
+        'prefer-arrow-callback': 'error',
+
+        // require const declarations for variables that are never reassigned after declared
+        'prefer-const': 'error',
+
+        // disallow parseInt() in favor of binary, octal, and hexadecimal literals
+        'prefer-numeric-literals': 'error',
+
+        // require rest parameters instead of arguments
+        'prefer-rest-params': 'error',
+
+        // require spread operators instead of .apply()
+        'prefer-spread': 'error',
+
+        // enforce spacing between rest and spread operators and their expressions
+        'rest-spread-spacing': 'error',
+
+        // require or disallow spacing around embedded expressions of template strings
+        'template-curly-spacing': 'error',
+
+        // require or disallow spacing around the * in yield* expressions
+        'yield-star-spacing': 'error'
+    }
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.postcssrc.js

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

README.md

@@ -0,0 +1,21 @@
+# vue-admin
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  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,89 @@
+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
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}

build/utils.js

@@ -0,0 +1,71 @@
+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 || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('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 + '$'),
+      use: loader
+    })
+  }
+  return output
+}

build/vue-loader.conf.js

@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}

build/webpack.base.conf.js

@@ -0,0 +1,67 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      // {
+      //   test: /\.(js|vue)$/,
+      //   loader: 'eslint-loader',
+      //   enforce: 'pre',
+      //   include: [resolve('src'), resolve('test')],
+      //   options: {
+      //     formatter: require('eslint-friendly-formatter')
+      //   }
+      // },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,120 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: 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')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    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']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+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
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+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,38 @@
+// 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: '/',
+    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'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 9528,
+    autoOpenBrowser: true,
+    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,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "vue-admin",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "Pan <panfree23@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "start": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "axios": "0.16.2",
+    "element-ui": "1.3.7",
+    "js-cookie": "^2.1.4",
+    "normalize.css": "3.0.2",
+    "nprogress": "^0.2.0",
+    "vue": "2.3.3",
+    "vue-router": "2.5.3",
+    "vuex": "2.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "6.7.2",
+    "babel-core": "6.22.1",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "6.2.10",
+    "babel-plugin-transform-runtime": "6.22.0",
+    "babel-preset-env": "1.3.2",
+    "babel-preset-stage-2": "6.22.0",
+    "babel-register": "6.22.0",
+    "chalk": "1.1.3",
+    "connect-history-api-fallback": "1.3.0",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.28.0",
+    "eslint": "3.19.0",
+    "eslint-friendly-formatter": "2.0.7",
+    "eslint-loader": "1.7.1",
+    "eslint-plugin-html": "2.0.0",
+    "eventsource-polyfill": "0.9.6",
+    "express": "4.14.1",
+    "extract-text-webpack-plugin": "2.0.0",
+    "file-loader": "0.11.1",
+    "friendly-errors-webpack-plugin": "1.1.3",
+    "html-webpack-plugin": "2.28.0",
+    "http-proxy-middleware": "0.17.3",
+    "webpack-bundle-analyzer": "2.2.1",
+    "semver": "5.3.0",
+    "shelljs": "0.7.6",
+    "opn": "4.0.2",
+    "optimize-css-assets-webpack-plugin": "1.3.0",
+    "ora": "1.2.0",
+    "rimraf": "2.6.0",
+    "node-sass": "^4.5.0",
+    "sass-loader": "6.0.5",
+    "url-loader": "0.5.8",
+    "vue-loader": "12.1.0",
+    "vue-style-loader": "3.0.1",
+    "vue-template-compiler": "2.3.3",
+    "webpack": "2.6.1",
+    "webpack-dev-middleware": "1.10.0",
+    "webpack-hot-middleware": "2.18.0",
+    "webpack-merge": "4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,12 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+

src/api/login.js

@@ -0,0 +1,29 @@
+import fetch from '@/utils/fetch';
+
+export function loginByEmail(email, password) {
+  const data = {
+    email,
+    password
+  };
+  return fetch({
+    url: '/login/loginbyemail',
+    method: 'post',
+    data
+  });
+}
+
+export function logout() {
+  return fetch({
+    url: '/login/logout',
+    method: 'post'
+  });
+}
+
+export function getInfo(token) {
+  return fetch({
+    url: '/user/info',
+    method: 'get',
+    params: { token }
+  });
+}
+

src/components/Hamburger/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: 'hamburger',
+      props: {
+        isActive: {
+          type: Boolean,
+          default: false
+        },
+        toggleClick: {
+          type: Function,
+          default: null
+        }
+      }
+    }
+</script>
+
+<style scoped>
+    .hamburger {
+        display: inline-block;
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        transform: rotate(0deg);
+        transition: .38s;
+        transform-origin: 50% 50%;
+    }
+    .hamburger.is-active {
+        transform: rotate(90deg);
+    }
+</style>

src/components/Icon-svg/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+function registerAllComponents(requireContext) {
+  return requireContext.keys().forEach(comp => {
+    const vueComp = requireContext(comp)
+    const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
+    Vue.component(compName, vueComp)
+  })
+}
+
+registerAllComponents(require.context('./', false, /\.vue$/))

src/components/Icon-svg/wscn-icon-stack.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="icon-container" :style="containerStyle">
+    <slot class="icon"></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wscn-icon-stack',
+    props: {
+      width: {
+        type: Number,
+        default: 20
+      },
+      shape: {
+        type: String,
+        default: 'circle',
+        validator: val => {
+          const validShapes = ['circle', 'square']
+          return validShapes.indexOf(val) > -1
+        }
+      }
+    },
+    computed: {
+      containerStyle() {
+        return {
+          width: `${this.width}px`,
+          height: `${this.width}px`,
+          fontSize: `${this.width * 0.6}px`,
+          borderRadius: `${this.shape === 'circle' && '50%'}`
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .icon-container {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background: #1482F0;
+
+    .icon {
+      position: absolute;
+      color: #ffffff;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>

src/components/Icon-svg/wscn-icon-svg.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg class="wscn-icon" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'wscn-icon-svg',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      iconName() {
+        return `#icon-${this.iconClass}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/main.js

@@ -0,0 +1,66 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-default/index.css'
+import NProgress from 'nprogress'
+import 'normalize.css/normalize.css';// normalize.css 样式格式化
+import '@/styles/index.scss'; // 全局自定义的css样式
+import '@/components/Icon-svg/index'; // 封装的svg组件
+
+Vue.config.productionTip = false
+
+Vue.use(ElementUI);
+
+router.afterEach(() => {
+  NProgress.done(); // 结束Progress
+});
+
+
+// const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
+// router.beforeEach((to, from, next) => {
+//   NProgress.start(); // 开启Progress
+//   if (store.getters.token) { // 判断是否有token
+//     if (to.path === '/login') {
+//       next({ path: '/' });
+//     } else {
+//       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
+//         store.dispatch('GetInfo').then(res => { // 拉取user_info
+//           const roles = res.data.role;
+//           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
+//             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
+//             next(to.path); // hack方法 确保addRoutes已完成
+//           })
+//         }).catch(err => {
+//           console.log(err);
+//         });
+//       } else {
+//         // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
+//         if (hasPermission(store.getters.roles, to.meta.role)) {
+//           next();//
+//         } else {
+//           next({ path: '/401', query: { noGoBack: true } });
+//         }
+//         // 可删 ↑
+//       }
+//     }
+//   } else {
+//     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+//       next()
+//     } else {
+//       next('/login'); // 否则全部重定向到登录页
+//       NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+//     }
+//   }
+// });
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  template: '<App/>',
+  components: { App }
+})

src/router/_import_development.js

@@ -0,0 +1 @@
+module.exports = file => require('@/views/' + file + '.vue')

src/router/_import_production.js

@@ -0,0 +1 @@
+module.exports = file => () => import('@/views/' + file + '.vue')

src/router/index.js

@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+const _import = require('./_import_' + process.env.NODE_ENV);
+// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow
+// so only in production use Lazy Loading
+
+/* layout */
+import Layout from '../views/layout/Layout';
+
+/* login */
+const Login = _import('login/index');
+
+/* dashboard */
+const dashboard = _import('dashboard/index');
+
+/* error page */
+const Err404 = _import('404');
+
+const Page = _import('page/index');
+
+Vue.use(Router);
+
+ /**
+  * icon : the icon show in the sidebar
+  * hidden : if hidden:true will not show in the sidebar
+  * redirect : if redirect:noredirect will not redirct in the levelbar
+  * noDropdown : if noDropdown:true will not has submenu
+  * meta : { role: ['admin'] }  will control the page role
+  **/
+export const constantRouterMap = [
+  { path: '/404', component: Err404, hidden: true },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    name: '首页',
+    hidden: true,
+    children: [{ path: 'dashboard', component: dashboard }]
+  }
+]
+
+export default new Router({
+  // mode: 'history', //后端支持可开
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
+});
+
+export const asyncRouterMap = [
+  {
+    path: '/example',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'page',
+    icon: 'zonghe',
+    children: [
+      { path: 'index', component: Page, name: 'page' }
+    ]
+  },
+  { path: '*', redirect: '/404', hidden: true }
+];

src/store/getters.js

@@ -0,0 +1,14 @@
+const getters = {
+  sidebar: state => state.app.sidebar,
+  visitedViews: state => state.app.visitedViews,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  uid: state => state.user.uid,
+  email: state => state.user.email,
+  introduction: state => state.user.introduction,
+  roles: state => state.user.roles,
+  permission_routers: state => state.permission.routers,
+  addRouters: state => state.permission.addRouters
+};
+export default getters

src/store/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import app from './modules/app';
+import user from './modules/user';
+import permission from './modules/permission';
+import getters from './getters';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    user,
+    permission
+  },
+  getters
+});
+
+export default store

src/store/modules/app.js

@@ -0,0 +1,26 @@
+import Cookies from 'js-cookie';
+
+const app = {
+  state: {
+    sidebar: {
+      opened: !+Cookies.get('sidebarStatus')
+    }
+  },
+  mutations: {
+    TOGGLE_SIDEBAR: state => {
+      if (state.sidebar.opened) {
+        Cookies.set('sidebarStatus', 1);
+      } else {
+        Cookies.set('sidebarStatus', 0);
+      }
+      state.sidebar.opened = !state.sidebar.opened;
+    }
+  },
+  actions: {
+    ToggleSideBar: ({ commit }) => {
+      commit('TOGGLE_SIDEBAR')
+    }
+  }
+};
+
+export default app;

src/store/modules/permission.js

@@ -0,0 +1,62 @@
+import { asyncRouterMap, constantRouterMap } from '@/router/index';
+
+/**
+ * 通过meta.role判断是否与当前用户权限匹配
+ * @param roles
+ * @param route
+ */
+function hasPermission(roles, route) {
+  if (route.meta && route.meta.role) {
+    return roles.some(role => route.meta.role.indexOf(role) >= 0)
+  } else {
+    return true
+  }
+}
+
+/**
+ * 递归过滤异步路由表，返回符合用户角色权限的路由表
+ * @param asyncRouterMap
+ * @param roles
+ */
+function filterAsyncRouter(asyncRouterMap, roles) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    if (hasPermission(roles, route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, roles)
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers;
+      state.routers = constantRouterMap.concat(routers);
+    }
+  },
+  actions: {
+    GenerateRoutes({ commit }, data) {
+      return new Promise(resolve => {
+        const { roles } = data
+        let accessedRouters
+        if (roles.indexOf('admin') >= 0) {
+          accessedRouters = asyncRouterMap
+        } else {
+          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+        }
+        commit('SET_ROUTERS', accessedRouters);
+        resolve();
+      })
+    }
+  }
+};
+
+export default permission;

src/store/modules/user.js

@@ -0,0 +1,149 @@
+import { loginByEmail, logout, getInfo } from '@/api/login';
+import Cookies from 'js-cookie';
+
+const user = {
+  state: {
+    user: '',
+    status: '',
+    email: '',
+    code: '',
+    uid: undefined,
+    auth_type: '',
+    token: Cookies.get('Admin-Token'),
+    name: '',
+    avatar: '',
+    introduction: '',
+    roles: [],
+    setting: {
+      articlePlatform: []
+    }
+  },
+
+  mutations: {
+    SET_AUTH_TYPE: (state, type) => {
+      state.auth_type = type;
+    },
+    SET_CODE: (state, code) => {
+      state.code = code;
+    },
+    SET_TOKEN: (state, token) => {
+      state.token = token;
+    },
+    SET_UID: (state, uid) => {
+      state.uid = uid;
+    },
+    SET_EMAIL: (state, email) => {
+      state.email = email;
+    },
+    SET_INTRODUCTION: (state, introduction) => {
+      state.introduction = introduction;
+    },
+    SET_SETTING: (state, setting) => {
+      state.setting = setting;
+    },
+    SET_STATUS: (state, status) => {
+      state.status = status;
+    },
+    SET_NAME: (state, name) => {
+      state.name = name;
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar;
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles;
+    },
+    LOGIN_SUCCESS: () => {
+      console.log('login success')
+    },
+    LOGOUT_USER: state => {
+      state.user = '';
+    }
+  },
+
+  actions: {
+    // 邮箱登录
+    LoginByEmail({ commit }, userInfo) {
+      const email = userInfo.email.trim();
+      return new Promise((resolve, reject) => {
+        loginByEmail(email, userInfo.password).then(response => {
+          const data = response.data;
+          Cookies.set('Admin-Token', response.data.token);
+          commit('SET_TOKEN', data.token);
+          commit('SET_EMAIL', email);
+          resolve();
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    },
+
+
+    // 获取用户信息
+    GetInfo({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo(state.token).then(response => {
+          const data = response.data;
+          commit('SET_ROLES', data.role);
+          commit('SET_NAME', data.name);
+          commit('SET_AVATAR', data.avatar);
+          commit('SET_UID', data.uid);
+          commit('SET_INTRODUCTION', data.introduction);
+          resolve(response);
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    },
+
+    // 第三方验证登录
+    LoginByThirdparty({ commit, state }, code) {
+      return new Promise((resolve, reject) => {
+        commit('SET_CODE', code);
+        loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => {
+          commit('SET_TOKEN', response.data.token);
+          Cookies.set('Admin-Token', response.data.token);
+          resolve();
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    },
+
+
+    // 登出
+    LogOut({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('SET_TOKEN', '');
+          commit('SET_ROLES', []);
+          Cookies.remove('Admin-Token');
+          resolve();
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    },
+
+    // 前端 登出
+    FedLogOut({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '');
+        Cookies.remove('Admin-Token');
+        resolve();
+      });
+    },
+
+    // 动态修改权限
+    ChangeRole({ commit }, role) {
+      return new Promise(resolve => {
+        commit('SET_ROLES', [role]);
+        commit('SET_TOKEN', role);
+        Cookies.set('Admin-Token', role);
+        resolve();
+      })
+    }
+  }
+};
+
+export default user;

src/styles/btn.scss

@@ -0,0 +1,103 @@
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+
+$panGreen: #30B08F;
+
+@mixin colorBtn($color) {
+  background: $color;
+  &:hover {
+    color: $color;
+    &:before, &:after {
+      background: $color;
+    }
+  }
+}
+
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn{
+  @include colorBtn($light-blue)
+}
+
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  margin-right: 25px;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+  &:hover {
+    background: #fff;
+    &:before, &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.custom-button{
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    color: #fff;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: 0;
+    margin: 0;
+    padding: 10px 15px;
+    font-size: 14px;
+    border-radius: 4px;
+}

src/styles/element-ui.scss

@@ -0,0 +1,83 @@
+ //覆盖一些element-ui样式
+.block-checkbox {
+  display: block;
+}
+
+.operation-container {
+  .cell {
+    padding: 10px !important;
+  }
+  .el-button {
+    &:nth-child(3) {
+      margin-top: 10px;
+      margin-left: 0px;
+    }
+    &:nth-child(4) {
+      margin-top: 10px;
+    }
+  }
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 8px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+
+//文章页textarea修改样式
+.article-textarea {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}

src/styles/index.scss

@@ -0,0 +1,266 @@
+@import './btn.scss';
+@import './element-ui.scss';
+@import "./mixin.scss";
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+code {
+  background: #eef1f6;
+  padding: 15px 10px;
+  margin-bottom: 20px;
+  display: block;
+  line-height: 36px;
+  a {
+    color: #337ab7;
+    cursor: pointer;
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all .2s ease
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+}
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+.pagination-container {
+  margin-top: 30px;
+}
+
+
+.editor-container .CodeMirror {
+  height: 100%!important;
+}
+
+.wscn-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+  &.draft {
+    background: #d0d0d0;
+  }
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.publishedTag,
+.draftTag,
+.deletedTag {
+  color: #fff;
+  background-color: $panGreen;
+  line-height: 1;
+  text-align: center;
+  margin: 0;
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 4px;
+  position: absolute;
+  left: 20px;
+  top: 10px;
+}
+
+.draftTag {
+  background-color: $yellow;
+}
+
+.deletedTag {
+  background-color: $red;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #48576a;
+  line-height: 1;
+  padding: 11px 5px 11px 0;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.no-marginLeft {
+  .el-checkbox {
+    margin: 0 20px 15px 0;
+  }
+  .el-checkbox+.el-checkbox {
+    margin-left: 0px;
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+
+//refine simplemde
+.simplemde-container{
+  .editor-toolbar.fullscreen,.CodeMirror-fullscreen{
+    z-index: 1003;
+  }
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+//github-corner
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}

src/styles/mixin.scss

@@ -0,0 +1,60 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}

src/utils/createUniqueString.js

@@ -0,0 +1,8 @@
+/**
+ * Created by jiachenpan on 17/3/8.
+ */
+export default function createUniqueString() {
+  const timestamp = +new Date() + '';
+  const randomNum = parseInt((1 + Math.random()) * 65536) + '';
+  return (+(randomNum + timestamp)).toString(32);
+}

src/utils/fetch.js

@@ -0,0 +1,66 @@
+import axios from 'axios';
+import { Message } from 'element-ui';
+import store from '../store';
+// import router from '../router';
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.BASE_API, // api的base_url
+  timeout: 5000                  // 请求超时时间
+});
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // Do something before request is sent
+  if (store.getters.token) {
+    config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+  }
+  return config;
+}, error => {
+  // Do something with request error
+  console.log(error); // for debug
+  Promise.reject(error);
+})
+
+// respone拦截器
+service.interceptors.response.use(
+  response => response,
+  /**
+  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+  */
+//  const res = response.data;
+//     if (res.code !== 20000) {
+//       Message({
+//         message: res.message,
+//         type: 'error',
+//         duration: 5 * 1000
+//       });
+//       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+//         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+//           confirmButtonText: '重新登录',
+//           cancelButtonText: '取消',
+//           type: 'warning'
+//         }).then(() => {
+//           store.dispatch('FedLogOut').then(() => {
+//             location.reload();// 为了重新实例化vue-router对象 避免bug
+//           });
+//         })
+//       }
+//       return Promise.reject(error);
+//     } else {
+//       return response.data;
+//     }
+  error => {
+    console.log('err' + error);// for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    });
+    return Promise.reject(error);
+  }
+)
+
+export default service;

src/utils/index.js

@@ -0,0 +1,214 @@
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+ export function parseTime(time, cFormat) {
+   if (arguments.length === 0) {
+     return null;
+   }
+   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+   let date;
+   if (typeof time == 'object') {
+     date = time;
+   } else {
+     if (('' + time).length === 10) time = parseInt(time) * 1000;
+     date = new Date(time);
+   }
+   const formatObj = {
+     y: date.getFullYear(),
+     m: date.getMonth() + 1,
+     d: date.getDate(),
+     h: date.getHours(),
+     i: date.getMinutes(),
+     s: date.getSeconds(),
+     a: date.getDay()
+   };
+   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+     let value = formatObj[key];
+     if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
+     if (result.length > 0 && value < 10) {
+       value = '0' + value;
+     }
+     return value || 0;
+   });
+   return time_str;
+ }
+
+ export function formatTime(time, option) {
+   time = +time * 1000;
+   const d = new Date(time);
+   const now = Date.now();
+
+   const diff = (now - d) / 1000;
+
+   if (diff < 30) {
+     return '刚刚'
+   } else if (diff < 3600) { // less 1 hour
+     return Math.ceil(diff / 60) + '分钟前'
+   } else if (diff < 3600 * 24) {
+     return Math.ceil(diff / 3600) + '小时前'
+   } else if (diff < 3600 * 24 * 2) {
+     return '1天前'
+   }
+   if (option) {
+     return parseTime(time, option)
+   } else {
+     return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+   }
+ }
+
+// 格式化时间
+ export function getQueryObject(url) {
+   url = url == null ? window.location.href : url;
+   const search = url.substring(url.lastIndexOf('?') + 1);
+   const obj = {};
+   const reg = /([^?&=]+)=([^?&=]*)/g;
+   search.replace(reg, (rs, $1, $2) => {
+     const name = decodeURIComponent($1);
+     let val = decodeURIComponent($2);
+     val = String(val);
+     obj[name] = val;
+     return rs;
+   });
+   return obj;
+ }
+
+
+/**
+ *get getByteLen
+ * @param {Sting} val input value
+ * @returns {number} output value
+ */
+ export function getByteLen(val) {
+   let len = 0;
+   for (let i = 0; i < val.length; i++) {
+     if (val[i].match(/[^\x00-\xff]/ig) != null) {
+       len += 1;
+     } else { len += 0.5; }
+   }
+   return Math.floor(len);
+ }
+
+ export function cleanArray(actual) {
+   const newArray = [];
+   for (let i = 0; i < actual.length; i++) {
+     if (actual[i]) {
+       newArray.push(actual[i]);
+     }
+   }
+   return newArray;
+ }
+
+ export function param(json) {
+   if (!json) return '';
+   return cleanArray(Object.keys(json).map(key => {
+     if (json[key] === undefined) return '';
+     return encodeURIComponent(key) + '=' +
+            encodeURIComponent(json[key]);
+   })).join('&');
+ }
+
+ export function param2Obj(url) {
+   const search = url.split('?')[1];
+   return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
+ }
+
+ export function html2Text(val) {
+   const div = document.createElement('div');
+   div.innerHTML = val;
+   return div.textContent || div.innerText;
+ }
+
+ export function objectMerge(target, source) {
+    /* Merges two  objects,
+     giving the last one precedence */
+
+   if (typeof target !== 'object') {
+     target = {};
+   }
+   if (Array.isArray(source)) {
+     return source.slice();
+   }
+   for (const property in source) {
+     if (source.hasOwnProperty(property)) {
+       const sourceProperty = source[property];
+       if (typeof sourceProperty === 'object') {
+         target[property] = objectMerge(target[property], sourceProperty);
+         continue;
+       }
+       target[property] = sourceProperty;
+     }
+   }
+   return target;
+ }
+
+
+ export function scrollTo(element, to, duration) {
+   if (duration <= 0) return;
+   const difference = to - element.scrollTop;
+   const perTick = difference / duration * 10;
+   setTimeout(() => {
+     console.log(new Date())
+     element.scrollTop = element.scrollTop + perTick;
+     if (element.scrollTop === to) return;
+     scrollTo(element, to, duration - 10);
+   }, 10);
+ }
+
+ export function toggleClass(element, className) {
+   if (!element || !className) {
+     return;
+   }
+   let classString = element.className;
+   const nameIndex = classString.indexOf(className);
+   if (nameIndex === -1) {
+     classString += '' + className;
+   } else {
+     classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
+   }
+   element.className = classString;
+ }
+
+ export const pickerOptions = [
+   {
+     text: '今天',
+     onClick(picker) {
+       const end = new Date();
+       const start = new Date(new Date().toDateString());
+       end.setTime(start.getTime());
+       picker.$emit('pick', [start, end]);
+     }
+   }, {
+     text: '最近一周',
+     onClick(picker) {
+       const end = new Date(new Date().toDateString());
+       const start = new Date();
+       start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
+       picker.$emit('pick', [start, end]);
+     }
+   }, {
+     text: '最近一个月',
+     onClick(picker) {
+       const end = new Date(new Date().toDateString());
+       const start = new Date();
+       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+       picker.$emit('pick', [start, end]);
+     }
+   }, {
+     text: '最近三个月',
+     onClick(picker) {
+       const end = new Date(new Date().toDateString());
+       const start = new Date();
+       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+       picker.$emit('pick', [start, end]);
+     }
+   }]
+
+ export function getTime(type) {
+   if (type === 'start') {
+     return new Date().getTime() - 3600 * 1000 * 24 * 90
+   } else {
+     return new Date(new Date().toDateString())
+   }
+ }
+

src/utils/openWindow.js

@@ -0,0 +1,27 @@
+/**
+ *Created by jiachenpan on 16/11/29.
+ * @param {Sting} url
+ * @param {Sting} title
+ * @param {Number} w
+ * @param {Number} h
+ */
+
+export default function openWindow(url, title, w, h) {
+      // Fixes dual-screen position                         Most browsers      Firefox
+  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
+  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
+
+  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
+  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
+
+  const left = ((width / 2) - (w / 2)) + dualScreenLeft;
+  const top = ((height / 2) - (h / 2)) + dualScreenTop;
+  const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
+
+  // Puts focus on the newWindow
+  if (window.focus) {
+    newWindow.focus();
+  }
+}
+
+

src/utils/validate.js

@@ -0,0 +1,41 @@
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+/* 是否是公司邮箱*/
+export function isWscnEmail(str) {
+  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
+  return reg.test(str.trim());
+}
+
+/* 合法uri*/
+export function validateURL(textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return urlregex.test(textval);
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
+}
+
+/* 验证key*/
+// export function validateKey(str) {
+//     var reg = /^[a-z_\-:]+$/;
+//     return reg.test(str);
+// }
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str) {
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
+}
+
+

src/views/404.vue

@@ -0,0 +1,228 @@
+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="/" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import img_404 from '@/assets/404_images/404.png'
+ import img_404_cloud from '@/assets/404_images/404_cloud.png'
+
+ export default {
+   data: {
+     return: {
+       img_404,
+       img_404_cloud
+     }
+   },
+   computed: {
+     message() {
+       return '特朗普说这个页面你不能进......'
+     }
+   }
+ }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .wscn-http404 {
+    position: relative;
+    width: 1200px;
+    margin: 20px auto 60px;
+    padding: 0 100px;
+    overflow: hidden;
+    .pic-404 {
+      position: relative;
+      float: left;
+      width: 600px;
+      padding: 150px 0;
+      overflow: hidden;
+      &__parent {
+        width: 100%;
+      }
+      &__child {
+        position: absolute;
+        &.left {
+          width: 80px;
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+        &.mid {
+          width: 46px;
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+          animation-name: cloudMid;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1.2s;
+        }
+        &.right {
+          width: 62px;
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+          animation-name: cloudRight;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudMid {
+          0% {
+            top: 10px;
+            left: 420px;
+            opacity: 0;
+          }
+          20% {
+            top: 40px;
+            left: 360px;
+            opacity: 1;
+          }
+          70% {
+            top: 130px;
+            left: 180px;
+            opacity: 1;
+          }
+          100% {
+            top: 160px;
+            left: 120px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudRight {
+          0% {
+            top: 100px;
+            left: 500px;
+            opacity: 0;
+          }
+          20% {
+            top: 120px;
+            left: 460px;
+            opacity: 1;
+          }
+          80% {
+            top: 180px;
+            left: 340px;
+            opacity: 1;
+          }
+          100% {
+            top: 200px;
+            left: 300px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 150px 0;
+      overflow: hidden;
+      &__oops {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 20px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      &__headline {
+        font-size: 20px;
+        line-height: 24px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 10px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+      &__info {
+        font-size: 13px;
+        line-height: 21px;
+        color: grey;
+        opacity: 0;
+        margin-bottom: 30px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+      &__return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        background: #1482f0;
+        border-radius: 100px;
+        text-align: center;
+        color: #ffffff;
+        opacity: 0;
+        font-size: 14px;
+        line-height: 36px;
+        cursor: pointer;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>

src/views/dashboard/default/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="dashboard-editor-container">
+        dashboard
+    </div>
+</template>

src/views/dashboard/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="dashboard-container">
+        <component v-bind:is="currentRole"> </component>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+    import DefaultDashboard from './default/index';
+    export default {
+      name: 'dashboard',
+      components: { DefaultDashboard },
+      data() {
+        return {
+          currentRole: 'DefaultDashboard'
+        }
+      },
+      computed: {
+        ...mapGetters([
+          'name',
+          'avatar',
+          'email',
+          'introduction',
+          'roles'
+        ])
+      },
+      created() {
+        if (this.roles.indexOf('admin') >= 0) {
+          return;
+        }
+        // const isEditor = this.roles.some(v => v.indexOf('editor') >= 0)
+        // if (!isEditor) {
+        //   this.currentRole = 'DefaultDashboard';
+        // }
+        this.currentRole = 'DefaultDashboard';
+      }
+    }
+</script>

src/views/layout/AppMain.vue

@@ -0,0 +1,18 @@
+<template>
+    <section class="app-main" style="min-height: 100%">
+        <transition name="fade" mode="out-in">
+            <router-view :key="key"></router-view>
+        </transition>
+    </section>
+</template>
+
+<script>
+    export default {
+      name: 'AppMain',
+      computed: {
+        key() {
+          return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+        }
+      }
+    }
+</script>

src/views/layout/Layout.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
+        <div class="sidebar-wrapper">
+            <Sidebar class="sidebar-container" />
+        </div>
+        <div class="main-container">
+            <Navbar/>
+            <App-main/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { Navbar, Sidebar, AppMain } from '@/views/layout';
+
+    export default {
+      name: 'layout',
+      components: {
+        Navbar,
+        Sidebar,
+        AppMain
+      },
+      computed: {
+        sidebar() {
+          return this.$store.state.app.sidebar;
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .app-wrapper {
+        @include clearfix;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        &.hideSidebar {
+            .sidebar-wrapper {
+                transform: translate(-140px, 0);
+                .sidebar-container {
+                    transform: translate(132px, 0);
+                }
+                &:hover {
+                    transform: translate(0, 0);
+                    .sidebar-container {
+                        transform: translate(0, 0);
+                    }
+                }
+            }
+            .main-container{
+                margin-left: 40px;
+            }
+        }
+        .sidebar-wrapper {
+            width: 180px;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1001;
+            overflow: hidden;
+            transition: all .28s ease-out;
+        }
+        .sidebar-container {
+            transition: all .28s ease-out;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: -17px;
+            overflow-y: scroll;
+        }
+        .main-container {
+            min-height: 100%;
+            transition: all .28s ease-out;
+            margin-left: 180px;
+        }
+    }
+</style>

src/views/layout/Levelbar.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-breadcrumb class="app-levelbar" separator="/">
+    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item">
+      <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
+      <router-link v-else :to="item.path">{{item.name}}</router-link>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+    export default {
+      created() {
+        this.getBreadcrumb()
+      },
+      data() {
+        return {
+          levelList: null
+        }
+      },
+      methods: {
+        getBreadcrumb() {
+          let matched = this.$route.matched.filter(item => item.name);
+          const first = matched[0];
+          if (first && (first.name !== '首页' || first.path !== '')) {
+            matched = [{ name: '首页', path: '/' }].concat(matched)
+          }
+          this.levelList = matched;
+        }
+      },
+      watch: {
+        $route() {
+          this.getBreadcrumb();
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .app-levelbar.el-breadcrumb {
+        display: inline-block;
+        font-size: 14px;
+        line-height: 50px;
+        margin-left: 10px;
+        .no-redirect{
+          color: #97a8be;
+          cursor:text;
+        }
+    }
+</style>

src/views/layout/Navbar.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-menu class="navbar" mode="horizontal">
+        <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+        <levelbar></levelbar>
+        <el-dropdown class="avatar-container" trigger="click">
+            <div class="avatar-wrapper">
+                <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+                <i class="el-icon-caret-bottom"></i>
+            </div>
+            <el-dropdown-menu class="user-dropdown" slot="dropdown">
+                <router-link class='inlineBlock' to="/">
+                    <el-dropdown-item>
+                        首页
+                    </el-dropdown-item>
+                </router-link>
+                <router-link class='inlineBlock' to="/admin/profile">
+                    <el-dropdown-item>
+                        设置
+                    </el-dropdown-item>
+                </router-link>
+                <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </el-menu>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+    import Levelbar from './Levelbar';
+    import Hamburger from '@/components/Hamburger';
+
+    export default {
+      components: {
+        Levelbar,
+        Hamburger
+      },
+      computed: {
+        ...mapGetters([
+          'sidebar',
+          'name',
+          'avatar'
+        ])
+      },
+      methods: {
+        toggleSideBar() {
+          this.$store.dispatch('ToggleSideBar')
+        },
+        logout() {
+          this.$store.dispatch('LogOut').then(() => {
+            location.reload();// 为了重新实例化vue-router对象 避免bug
+          });
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .navbar {
+        height: 50px;
+        line-height: 50px;
+        border-radius: 0px !important;
+        .hamburger-container {
+            line-height: 58px;
+            height: 50px;
+            float: left;
+            padding: 0 10px;
+        }
+        .errLog-container {
+            display: inline-block;
+            position: absolute;
+            right: 150px;
+        }
+        .screenfull{
+             position: absolute;
+             right: 90px;
+             top: 16px;
+             color: red;
+        }
+        .avatar-container {
+            height: 50px;
+            display: inline-block;
+            position: absolute;
+            right: 35px;
+            .avatar-wrapper {
+                cursor: pointer;
+                margin-top:5px;
+                position: relative;
+                .user-avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 10px;
+                }
+                .el-icon-caret-bottom {
+                    position: absolute;
+                    right: -20px;
+                    top: 25px;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+</style>
+
+
+

src/views/layout/Sidebar.vue

@@ -0,0 +1,24 @@
+<template>
+    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
+        <sidebar-item :routes='permission_routers'></sidebar-item>
+    </el-menu>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+    import SidebarItem from './SidebarItem';
+    export default {
+      components: { SidebarItem },
+      computed: {
+        ...mapGetters([
+          'permission_routers'
+        ])
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .el-menu {
+        min-height: 100%;
+    }
+</style>

src/views/layout/SidebarItem.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <template v-for="item in routes">
+            <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
+                <el-menu-item :index="item.path+'/'+item.children[0].path">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+                </el-menu-item>
+            </router-link>
+            <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+                <template slot="title">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+                </template>
+                <template v-for="child in item.children" v-if='!child.hidden'>
+                    <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+                    <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+                        <el-menu-item :index="item.path+'/'+child.path">
+                            {{child.name}}
+                        </el-menu-item>
+                    </router-link>
+                </template>
+            </el-submenu>
+        </template>
+    </div>
+</template>
+
+<script>
+
+    export default {
+      name: 'SidebarItem',
+      props: {
+        routes: {
+          type: Array
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .wscn-icon {
+        margin-right: 10px;
+    }
+    .hideSidebar .menu-indent{
+        display: block;
+        text-indent: 10px;
+    }
+</style>
+

src/views/layout/TabsView.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class='tabs-view-container'>
+    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
+      <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
+        {{tag.name}}
+      </el-tag>
+    </router-link>
+    </div>
+</template>
+
+<script>
+    export default {
+      computed: {
+        visitedViews() {
+          return this.$store.state.app.visitedViews.slice(-6)
+        }
+      },
+      methods: {
+        closeViewTabs(view, $event) {
+          this.$store.dispatch('delVisitedViews', view)
+          $event.preventDefault()
+        },
+        addViewTabs() {
+          this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
+        }
+      },
+      watch: {
+        $route() {
+          this.addViewTabs()
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .tabs-view-container{
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 10px;
+    .tabs-view{
+      margin-left: 10px;
+    }
+  }
+
+</style>

src/views/layout/index.js

@@ -0,0 +1,7 @@
+export { default as Navbar } from './Navbar';
+
+export { default as Sidebar } from './Sidebar';
+
+export { default as Levelbar } from './Levelbar';
+
+export { default as AppMain } from './AppMain';

src/views/login/index.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="login-container">
+        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
+                 label-width="0px"
+                 class="card-box login-form">
+            <h3 class="title">系统登录</h3>
+            <el-form-item prop="email">
+                <span class="svg-container"><wscn-icon-svg icon-class="jiedianyoujian"/></span>
+                <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
+                          placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+                <span class="svg-container"><wscn-icon-svg icon-class="mima"/></span>
+                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
+                          autoComplete="on" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+                    登录
+                </el-button>
+            </el-form-item>
+            <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
+            <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
+            <router-link to="/sendpwd" class="forget-pwd">
+                忘记密码?(或首次登录)
+            </router-link>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+    import { isWscnEmail } from '@/utils/validate';
+
+    export default {
+      name: 'login',
+      data() {
+        const validateEmail = (rule, value, callback) => {
+          if (!isWscnEmail(value)) {
+            callback(new Error('请输入正确的合法邮箱'));
+          } else {
+            callback();
+          }
+        };
+        const validatePass = (rule, value, callback) => {
+          if (value.length < 6) {
+            callback(new Error('密码不能小于6位'));
+          } else {
+            callback();
+          }
+        };
+        return {
+          loginForm: {
+            email: 'admin@wallstreetcn.com',
+            password: ''
+          },
+          loginRules: {
+            email: [
+                { required: true, trigger: 'blur', validator: validateEmail }
+            ],
+            password: [
+                { required: true, trigger: 'blur', validator: validatePass }
+            ]
+          },
+          loading: false,
+          showDialog: false
+        }
+      },
+      computed: {
+        ...mapGetters([
+          'auth_type'
+        ])
+      },
+      methods: {
+        handleLogin() {
+          this.$refs.loginForm.validate(valid => {
+            if (valid) {
+              this.loading = true;
+              this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
+                this.loading = false;
+                this.$router.push({ path: '/' });
+                // this.showDialog = true;
+              }).catch(err => {
+                this.$message.error(err);
+                this.loading = false;
+              });
+            } else {
+              console.log('error submit!!');
+              return false;
+            }
+          });
+        },
+        afterQRScan() {
+          // const hash = window.location.hash.slice(1);
+          // const hashObj = getQueryObject(hash);
+          // const originUrl = window.location.origin;
+          // history.replaceState({}, '', originUrl);
+          // const codeMap = {
+          //   wechat: 'code',
+          //   tencent: 'code'
+          // };
+          // const codeName = hashObj[codeMap[this.auth_type]];
+          // if (!codeName) {
+          //   alert('第三方登录失败');
+          // } else {
+          //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
+          //     this.$router.push({ path: '/' });
+          //   });
+          // }
+        }
+      },
+      created() {
+        // window.addEventListener('hashchange', this.afterQRScan);
+      },
+      destroyed() {
+        // window.removeEventListener('hashchange', this.afterQRScan);
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    .tips{
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 5px;
+    }
+    .login-container {
+        @include relative;
+        height: 100vh;
+        background-color: #2d3a4b;
+
+        input:-webkit-autofill {
+            -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
+            -webkit-text-fill-color: #fff !important;
+        }
+        input {
+            background: transparent;
+            border: 0px;
+            -webkit-appearance: none;
+            border-radius: 0px;
+            padding: 12px 5px 12px 15px;
+            color: #eeeeee;
+            height: 47px;
+        }
+        .el-input {
+            display: inline-block;
+            height: 47px;
+            width: 85%;
+        }
+        .svg-container {
+            padding: 6px 5px 6px 15px;
+            color: #889aa4;
+        }
+
+        .title {
+            font-size: 26px;
+            font-weight: 400;
+            color: #eeeeee;
+            margin: 0px auto 40px auto;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .login-form {
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 400px;
+            padding: 35px 35px 15px 35px;
+            margin: 120px auto;
+        }
+
+        .el-form-item {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+            color: #454545;
+        }
+
+        .forget-pwd {
+            color: #fff;
+        }
+    }
+
+</style>

src/views/page/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="login-container">
+        a
+    </div>
+</template>