├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .jshintrc ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── src ├── App.vue ├── components │ ├── BasicContainer.vue │ ├── BasicLayout.vue │ ├── FormCheckbox.vue │ ├── FormRadio.vue │ ├── Header.vue │ ├── HelloWorld.vue │ └── NavMenu.vue ├── config │ └── menu-config.js ├── main.js └── router │ └── index.js ├── static └── .gitkeep └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime","syntax-dynamic-import"], 9 | "env": { 10 | "test": { 11 | "presets": ["env", "stage-2"] } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | .cache/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi": true, 3 | "esversion": 6 4 | } -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 1. [查看在线demo](https://wdd.js.org/vue-el-dashboard/#/) 3 | 4 | 注意目前这个项目是使用vue-cli 2x版本构建的，很多模块都已经废弃了。建议看看最新版的demo, https://github.com/wangduanduan/v3-el-dashboard 5 | 最新版的demo增加了以下内容： 6 | 7 | - 使用vue-cli 3x 8 | - 使用vuex 9 | - 增加多标签页来控制控制路由 10 | 11 | 最新版截图 12 | ![](https://github.com/wangduanduan/v3-el-dashboard/raw/master/screen.png) 13 | 14 | # 2. 初步教程 15 | 16 | [阅读第一部分文档](https://wdd.js.org/vue-vue-router-elementui-stupid-simple-dashboard.html) 17 | 18 | 第一部分使用到的技术点： 19 | - Vue 20 | - Vue-router 21 | - Element-ui 22 | - webpack 23 | - Normalize.css 24 | - vue-awesome 25 | - babel 26 | - 路由懒加载 27 | 28 | # 3. 增加Vuex与tab页切换效果 29 | - Vuex 30 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, function (err, stats) { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | function exec (cmd) { 7 | return require('child_process').execSync(cmd).toString().trim() 8 | } 9 | 10 | const versionRequirements = [ 11 | { 12 | name: 'node', 13 | currentVersion: semver.clean(process.version), 14 | versionRequirement: packageConfig.engines.node 15 | } 16 | ] 17 | 18 | if (shell.which('npm')) { 19 | versionRequirements.push({ 20 | name: 'npm', 21 | currentVersion: exec('npm --version'), 22 | versionRequirement: packageConfig.engines.npm 23 | }) 24 | } 25 | 26 | module.exports = function () { 27 | const warnings = [] 28 | for (let i = 0; i < versionRequirements.length; i++) { 29 | const mod = versionRequirements[i] 30 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 31 | warnings.push(mod.name + ': ' + 32 | chalk.red(mod.currentVersion) + ' should be ' + 33 | chalk.green(mod.versionRequirement) 34 | ) 35 | } 36 | } 37 | 38 | if (warnings.length) { 39 | console.log('') 40 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 41 | console.log() 42 | for (let i = 0; i < warnings.length; i++) { 43 | const warning = warnings[i] 44 | console.log(' ' + warning) 45 | } 46 | console.log() 47 | process.exit(1) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangduanduan/vue-el-dashboard/3b52b6f14c00002f93525b24600fd26695590abe/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const pkg = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | return path.posix.join(assetsSubDirectory, _path) 12 | } 13 | 14 | exports.cssLoaders = function (options) { 15 | options = options || {} 16 | 17 | const cssLoader = { 18 | loader: 'css-loader', 19 | options: { 20 | minimize: process.env.NODE_ENV === 'production', 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | var postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | if (loader) { 36 | loaders.push({ 37 | loader: loader + '-loader', 38 | options: Object.assign({}, loaderOptions, { 39 | sourceMap: options.sourceMap 40 | }) 41 | }) 42 | } 43 | 44 | // Extract CSS when that option is specified 45 | // (which is the case during production build) 46 | if (options.extract) { 47 | return ExtractTextPlugin.extract({ 48 | use: loaders, 49 | fallback: 'vue-style-loader' 50 | }) 51 | } else { 52 | return ['vue-style-loader'].concat(loaders) 53 | } 54 | } 55 | 56 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 57 | return { 58 | css: generateLoaders(), 59 | postcss: generateLoaders(), 60 | less: generateLoaders('less'), 61 | sass: generateLoaders('sass', { indentedSyntax: true }), 62 | scss: generateLoaders('sass'), 63 | stylus: generateLoaders('stylus'), 64 | styl: generateLoaders('stylus') 65 | } 66 | } 67 | 68 | // Generate loaders for standalone style files (outside of .vue) 69 | exports.styleLoaders = function (options) { 70 | const output = [] 71 | const loaders = exports.cssLoaders(options) 72 | for (const extension in loaders) { 73 | const loader = loaders[extension] 74 | output.push({ 75 | test: new RegExp('\\.' + extension + '$'), 76 | use: loader 77 | }) 78 | } 79 | return output 80 | } 81 | 82 | exports.createNotifierCallback = function () { 83 | const notifier = require('node-notifier') 84 | 85 | return (severity, errors) => { 86 | if (severity !== 'error') { 87 | return 88 | } 89 | const error = errors[0] 90 | 91 | const filename = error.file.split('!').pop() 92 | notifier.notify({ 93 | title: pkg.name, 94 | message: severity + ': ' + error.name, 95 | subtitle: filename || '', 96 | icon: path.join(__dirname, 'logo.png') 97 | }) 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | 10 | module.exports = { 11 | loaders: utils.cssLoaders({ 12 | sourceMap: sourceMapEnabled, 13 | extract: isProduction 14 | }), 15 | cssSourceMap: sourceMapEnabled, 16 | transformToRequire: { 17 | video: 'src', 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | module.exports = { 12 | context: path.resolve(__dirname, '../'), 13 | entry: { 14 | app: './src/main.js' 15 | }, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: '[name].js', 19 | publicPath: process.env.NODE_ENV === 'production' 20 | ? config.build.assetsPublicPath 21 | : config.dev.assetsPublicPath 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.vue', '.json'], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.esm.js', 27 | '@': resolve('src'), 28 | } 29 | }, 30 | module: { 31 | rules: [ 32 | ...(config.dev.useEslint? [{ 33 | test: /\.(js|vue)$/, 34 | loader: 'eslint-loader', 35 | enforce: 'pre', 36 | include: [resolve('src'), resolve('test')], 37 | options: { 38 | formatter: require('eslint-friendly-formatter'), 39 | emitWarning: !config.dev.showEslintErrorsInOverlay 40 | } 41 | }] : []), 42 | { 43 | test: /\.vue$/, 44 | loader: 'vue-loader', 45 | options: vueLoaderConfig 46 | }, 47 | { 48 | test: /\.js$/, 49 | loader: 'babel-loader', 50 | include: [resolve('src'), resolve('test')] 51 | }, 52 | { 53 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 66 | } 67 | }, 68 | { 69 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 70 | loader: 'url-loader', 71 | options: { 72 | limit: 10000, 73 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 74 | } 75 | } 76 | ] 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const devWebpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 14 | }, 15 | // cheap-module-eval-source-map is faster for development 16 | devtool: config.dev.devtool, 17 | 18 | // these devServer options should be customized in /config/index.js 19 | devServer: { 20 | historyApiFallback: true, 21 | hot: true, 22 | host: process.env.HOST || config.dev.host, 23 | port: process.env.PORT || config.dev.port, 24 | open: config.dev.autoOpenBrowser, 25 | overlay: config.dev.errorOverlay ? { 26 | warnings: false, 27 | errors: true, 28 | } : false, 29 | publicPath: config.dev.assetsPublicPath, 30 | proxy: config.dev.proxyTable, 31 | quiet: true, // necessary for FriendlyErrorsPlugin 32 | watchOptions: { 33 | poll: config.dev.poll, 34 | } 35 | }, 36 | plugins: [ 37 | new webpack.DefinePlugin({ 38 | 'process.env': require('../config/dev.env') 39 | }), 40 | new webpack.HotModuleReplacementPlugin(), 41 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 42 | new webpack.NoEmitOnErrorsPlugin(), 43 | // https://github.com/ampedandwired/html-webpack-plugin 44 | new HtmlWebpackPlugin({ 45 | filename: 'index.html', 46 | template: 'index.html', 47 | inject: true 48 | }), 49 | new FriendlyErrorsPlugin() 50 | ] 51 | }) 52 | 53 | module.exports = new Promise((resolve, reject) => { 54 | portfinder.basePort = process.env.PORT || config.dev.port 55 | portfinder.getPort((err, port) => { 56 | if (err) { 57 | reject(err) 58 | } else { 59 | // publish the new Port, necessary for e2e tests 60 | process.env.PORT = port 61 | // add port to devServer config 62 | devWebpackConfig.devServer.port = port 63 | 64 | // Add FriendlyErrorsPlugin 65 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 66 | compilationSuccessInfo: { 67 | messages: [`Your application is running here: http://${config.dev.host}:${port}`], 68 | }, 69 | onErrors: config.dev.notifyOnErrors 70 | ? utils.createNotifierCallback() 71 | : undefined 72 | })) 73 | 74 | resolve(devWebpackConfig) 75 | } 76 | }) 77 | }) 78 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.optimize.ModuleConcatenationPlugin(), 33 | new webpack.DefinePlugin({ 34 | 'process.env': env 35 | }), 36 | new ParallelUglifyPlugin({ 37 | cacheDir: '.cache/', 38 | uglifyJS: { 39 | output: { 40 | comments: false 41 | }, 42 | compress: { 43 | warnings: false 44 | } 45 | } 46 | }), 47 | // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify 48 | // new webpack.optimize.UglifyJsPlugin({ 49 | // compress: { 50 | // warnings: false 51 | // }, 52 | // sourceMap: config.build.productionSourceMap, 53 | // parallel: true 54 | // }), 55 | // extract css into its own file 56 | new ExtractTextPlugin({ 57 | filename: utils.assetsPath('css/[name].[contenthash].css'), 58 | // set the following option to `true` if you want to extract CSS from 59 | // codesplit chunks into this main css file as well. 60 | // This will result in *all* of your app's CSS being loaded upfront. 61 | allChunks: false 62 | }), 63 | // Compress extracted CSS. We are using this plugin so that possible 64 | // duplicated CSS from different components can be deduped. 65 | new OptimizeCSSPlugin({ 66 | cssProcessorOptions: config.build.productionSourceMap 67 | ? { safe: true, map: { inline: false } } 68 | : { safe: true } 69 | }), 70 | // generate dist index.html with correct asset hash for caching. 71 | // you can customize output by editing /index.html 72 | // see https://github.com/ampedandwired/html-webpack-plugin 73 | new HtmlWebpackPlugin({ 74 | filename: config.build.index, 75 | template: 'index.html', 76 | inject: true, 77 | minify: { 78 | removeComments: true, 79 | collapseWhitespace: true, 80 | removeAttributeQuotes: true 81 | // more options: 82 | // https://github.com/kangax/html-minifier#options-quick-reference 83 | }, 84 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 85 | chunksSortMode: 'dependency' 86 | }), 87 | // keep module.id stable when vender modules does not change 88 | new webpack.HashedModuleIdsPlugin(), 89 | // enable scope hoisting 90 | new webpack.optimize.ModuleConcatenationPlugin(), 91 | // split vendor js into its own file 92 | new webpack.optimize.CommonsChunkPlugin({ 93 | name: 'vendor', 94 | minChunks: function (module) { 95 | // any required modules inside node_modules are extracted to vendor 96 | return ( 97 | module.resource && 98 | /\.js$/.test(module.resource) && 99 | module.resource.indexOf( 100 | path.join(__dirname, '../node_modules') 101 | ) === 0 102 | ) 103 | } 104 | }), 105 | // extract webpack runtime and module manifest to its own file in order to 106 | // prevent vendor hash from being updated whenever app bundle is updated 107 | new webpack.optimize.CommonsChunkPlugin({ 108 | name: 'manifest', 109 | minChunks: Infinity 110 | }), 111 | // This instance extracts shared chunks from code splitted chunks and bundles them 112 | // in a separate chunk, similar to the vendor chunk 113 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 114 | new webpack.optimize.CommonsChunkPlugin({ 115 | name: 'app', 116 | async: 'vendor-async', 117 | children: true, 118 | minChunks: 3 119 | }), 120 | 121 | // copy custom static assets 122 | new CopyWebpackPlugin([ 123 | { 124 | from: path.resolve(__dirname, '../static'), 125 | to: config.build.assetsSubDirectory, 126 | ignore: ['.*'] 127 | } 128 | ]) 129 | ] 130 | }) 131 | 132 | if (config.build.productionGzip) { 133 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 134 | 135 | webpackConfig.plugins.push( 136 | new CompressionWebpackPlugin({ 137 | asset: '[path].gz[query]', 138 | algorithm: 'gzip', 139 | test: new RegExp( 140 | '\\.(' + 141 | config.build.productionGzipExtensions.join('|') + 142 | ')$' 143 | ), 144 | threshold: 10240, 145 | minRatio: 0.8 146 | }) 147 | ) 148 | } 149 | 150 | if (config.build.bundleAnalyzerReport) { 151 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 152 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 153 | } 154 | 155 | module.exports = webpackConfig 156 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const utils = require('./utils') 5 | const webpack = require('webpack') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | 9 | const webpackConfig = merge(baseWebpackConfig, { 10 | // use inline sourcemap for karma-sourcemap-loader 11 | module: { 12 | rules: utils.styleLoaders() 13 | }, 14 | devtool: '#inline-source-map', 15 | resolveLoader: { 16 | alias: { 17 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 18 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 19 | 'scss-loader': 'sass-loader' 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': require('../config/test.env') 25 | }) 26 | ] 27 | }) 28 | 29 | // no need for app entry during tests 30 | delete webpackConfig.entry 31 | 32 | module.exports = webpackConfig 33 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: '/vue-el-dashboard/', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: true, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-el-dashboard 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-el-dashboard", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wangdd ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js", 12 | "deploy": "git subtree push --prefix docs origin gh-pages" 13 | }, 14 | "dependencies": { 15 | "element-ui": "^2.0.4", 16 | "vue": "^2.5.2", 17 | "vue-router": "^3.0.1" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^7.1.2", 21 | "babel-core": "^6.22.1", 22 | "babel-eslint": "^7.1.1", 23 | "babel-loader": "^7.1.1", 24 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "babel-register": "^6.22.0", 29 | "chalk": "^2.0.1", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.28.0", 32 | "eslint": "^3.19.0", 33 | "eslint-config-standard": "^10.2.1", 34 | "eslint-friendly-formatter": "^3.0.0", 35 | "eslint-loader": "^1.7.1", 36 | "eslint-plugin-html": "^3.0.0", 37 | "eslint-plugin-import": "^2.7.0", 38 | "eslint-plugin-node": "^5.2.0", 39 | "eslint-plugin-promise": "^3.4.0", 40 | "eslint-plugin-standard": "^3.0.1", 41 | "eventsource-polyfill": "^0.9.6", 42 | "express": "^4.14.1", 43 | "extract-text-webpack-plugin": "^3.0.0", 44 | "file-loader": "^1.1.4", 45 | "friendly-errors-webpack-plugin": "^1.6.1", 46 | "html-webpack-plugin": "^2.30.1", 47 | "node-notifier": "^5.1.2", 48 | "normalize.css": "^7.0.0", 49 | "optimize-css-assets-webpack-plugin": "^3.2.0", 50 | "ora": "^1.2.0", 51 | "portfinder": "^1.0.13", 52 | "postcss-loader": "^2.0.8", 53 | "rimraf": "^2.6.0", 54 | "semver": "^5.3.0", 55 | "shelljs": "^0.7.6", 56 | "url-loader": "^0.5.8", 57 | "vue-awesome": "^2.3.4", 58 | "vue-loader": "^13.3.0", 59 | "vue-style-loader": "^3.0.1", 60 | "vue-template-compiler": "^2.5.2", 61 | "webpack": "^3.6.0", 62 | "webpack-bundle-analyzer": "^2.9.0", 63 | "webpack-dev-server": "^2.9.1", 64 | "webpack-merge": "^4.1.0", 65 | "webpack-parallel-uglify-plugin": "^1.0.2" 66 | }, 67 | "engines": { 68 | "node": ">= 4.0.0", 69 | "npm": ">= 3.0.0" 70 | }, 71 | "browserslist": [ 72 | "> 1%", 73 | "last 2 versions", 74 | "not ie <= 8" 75 | ] 76 | } 77 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/BasicContainer.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/BasicLayout.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/FormCheckbox.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/FormRadio.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 51 | -------------------------------------------------------------------------------- /src/components/NavMenu.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 35 | 36 | -------------------------------------------------------------------------------- /src/config/menu-config.js: -------------------------------------------------------------------------------- 1 | module.exports = [{ 2 | name: '基础', 3 | id: 'basic', 4 | icon: 'th-large', 5 | sub: [{ 6 | name: 'Layout 布局', 7 | componentName: 'BasicLayout' 8 | }, { 9 | name: 'Container 布局容器', 10 | componentName: 'BasicContainer' 11 | }] 12 | }, { 13 | name: 'Form', 14 | id: 'form', 15 | icon: 'wpforms', 16 | sub: [{ 17 | name: 'Radio 单选框', 18 | componentName: 'FormRadio' 19 | }, { 20 | name: 'Checkbox 多选框', 21 | componentName: 'FormCheckbox' 22 | }] 23 | }] 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ElementUI from 'element-ui' 3 | import 'element-ui/lib/theme-chalk/index.css' 4 | import 'normalize.css' 5 | import 'vue-awesome/icons' 6 | import Icon from 'vue-awesome/components/Icon' 7 | 8 | import App from './App' 9 | import router from './router' 10 | 11 | Vue.config.productionTip = false 12 | 13 | Vue.use(ElementUI) 14 | Vue.component('icon', Icon) 15 | 16 | /* eslint-disable no-new */ 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | template: '', 21 | components: { App } 22 | }) 23 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import menus from '@/config/menu-config' 4 | 5 | Vue.use(Router) 6 | 7 | var routes = [] 8 | 9 | menus.forEach((item) => { 10 | item.sub.forEach((sub) => { 11 | routes.push({ 12 | path: `/${sub.componentName}`, 13 | name: sub.componentName, 14 | component: () => import(`@/components/${sub.componentName}`) 15 | }) 16 | }) 17 | }) 18 | 19 | export default new Router({ routes }) 20 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangduanduan/vue-el-dashboard/3b52b6f14c00002f93525b24600fd26695590abe/static/.gitkeep --------------------------------------------------------------------------------