[ { "path": ".editorconfig", "content": "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\ninsert_final_newline = false\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintignore", "content": "build/*.js\nsrc/assets\npublic\ndist\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n parserOptions: {\n parser: 'babel-eslint',\n sourceType: 'module'\n },\n env: {\n browser: true,\n node: true,\n es6: true,\n },\n extends: ['plugin:vue/recommended', 'eslint:recommended'],\n\n // add your custom rules here\n //it is base on https://github.com/vuejs/eslint-config-vue\n rules: {\n \"vue/max-attributes-per-line\": [2, {\n \"singleline\": 10,\n \"multiline\": {\n \"max\": 1,\n \"allowFirstLine\": false\n }\n }],\n \"vue/singleline-html-element-content-newline\": \"off\",\n \"vue/multiline-html-element-content-newline\":\"off\",\n \"vue/name-property-casing\": [\"error\", \"PascalCase\"],\n \"vue/no-v-html\": \"off\",\n 'accessor-pairs': 2,\n 'arrow-spacing': [2, {\n 'before': true,\n 'after': true\n }],\n 'block-spacing': [2, 'always'],\n 'brace-style': [2, '1tbs', {\n 'allowSingleLine': true\n }],\n 'camelcase': [0, {\n 'properties': 'always'\n }],\n 'comma-dangle': [2, 'never'],\n 'comma-spacing': [2, {\n 'before': false,\n 'after': true\n }],\n 'comma-style': [2, 'last'],\n 'constructor-super': 2,\n 'curly': [2, 'multi-line'],\n 'dot-location': [2, 'property'],\n 'eol-last': 2,\n 'eqeqeq': [\"error\", \"always\", {\"null\": \"ignore\"}],\n 'generator-star-spacing': [2, {\n 'before': true,\n 'after': true\n }],\n 'handle-callback-err': [2, '^(err|error)$'],\n 'indent': [2, 2, {\n 'SwitchCase': 1\n }],\n 'jsx-quotes': [2, 'prefer-single'],\n 'key-spacing': [2, {\n 'beforeColon': false,\n 'afterColon': true\n }],\n 'keyword-spacing': [2, {\n 'before': true,\n 'after': true\n }],\n 'new-cap': [2, {\n 'newIsCap': true,\n 'capIsNew': false\n }],\n 'new-parens': 2,\n 'no-array-constructor': 2,\n 'no-caller': 2,\n 'no-console': 'off',\n 'no-class-assign': 2,\n 'no-cond-assign': 2,\n 'no-const-assign': 2,\n 'no-control-regex': 0,\n 'no-delete-var': 2,\n 'no-dupe-args': 2,\n 'no-dupe-class-members': 2,\n 'no-dupe-keys': 2,\n 'no-duplicate-case': 2,\n 'no-empty-character-class': 2,\n 'no-empty-pattern': 2,\n 'no-eval': 2,\n 'no-ex-assign': 2,\n 'no-extend-native': 2,\n 'no-extra-bind': 2,\n 'no-extra-boolean-cast': 2,\n 'no-extra-parens': [2, 'functions'],\n 'no-fallthrough': 2,\n 'no-floating-decimal': 2,\n 'no-func-assign': 2,\n 'no-implied-eval': 2,\n 'no-inner-declarations': [2, 'functions'],\n 'no-invalid-regexp': 2,\n 'no-irregular-whitespace': 2,\n 'no-iterator': 2,\n 'no-label-var': 2,\n 'no-labels': [2, {\n 'allowLoop': false,\n 'allowSwitch': false\n }],\n 'no-lone-blocks': 2,\n 'no-mixed-spaces-and-tabs': 2,\n 'no-multi-spaces': 2,\n 'no-multi-str': 2,\n 'no-multiple-empty-lines': [2, {\n 'max': 1\n }],\n 'no-native-reassign': 2,\n 'no-negated-in-lhs': 2,\n 'no-new-object': 2,\n 'no-new-require': 2,\n 'no-new-symbol': 2,\n 'no-new-wrappers': 2,\n 'no-obj-calls': 2,\n 'no-octal': 2,\n 'no-octal-escape': 2,\n 'no-path-concat': 2,\n 'no-proto': 2,\n 'no-redeclare': 2,\n 'no-regex-spaces': 2,\n 'no-return-assign': [2, 'except-parens'],\n 'no-self-assign': 2,\n 'no-self-compare': 2,\n 'no-sequences': 2,\n 'no-shadow-restricted-names': 2,\n 'no-spaced-func': 2,\n 'no-sparse-arrays': 2,\n 'no-this-before-super': 2,\n 'no-throw-literal': 2,\n 'no-trailing-spaces': 2,\n 'no-undef': 2,\n 'no-undef-init': 2,\n 'no-unexpected-multiline': 2,\n 'no-unmodified-loop-condition': 2,\n 'no-unneeded-ternary': [2, {\n 'defaultAssignment': false\n }],\n 'no-unreachable': 2,\n 'no-unsafe-finally': 2,\n 'no-unused-vars': [2, {\n 'vars': 'all',\n 'args': 'none'\n }],\n 'no-useless-call': 2,\n 'no-useless-computed-key': 2,\n 'no-useless-constructor': 2,\n 'no-useless-escape': 0,\n 'no-whitespace-before-property': 2,\n 'no-with': 2,\n 'one-var': [2, {\n 'initialized': 'never'\n }],\n 'operator-linebreak': [2, 'after', {\n 'overrides': {\n '?': 'before',\n ':': 'before'\n }\n }],\n 'padded-blocks': [2, 'never'],\n 'quotes': [2, 'single', {\n 'avoidEscape': true,\n 'allowTemplateLiterals': true\n }],\n 'semi': [2, 'never'],\n 'semi-spacing': [2, {\n 'before': false,\n 'after': true\n }],\n 'space-before-blocks': [2, 'always'],\n 'space-before-function-paren': [2, 'never'],\n 'space-in-parens': [2, 'never'],\n 'space-infix-ops': 2,\n 'space-unary-ops': [2, {\n 'words': true,\n 'nonwords': false\n }],\n 'spaced-comment': [2, 'always', {\n 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']\n }],\n 'template-curly-spacing': [2, 'never'],\n 'use-isnan': 2,\n 'valid-typeof': 2,\n 'wrap-iife': [2, 'any'],\n 'yield-star-spacing': [2, 'both'],\n 'yoda': [2, 'never'],\n 'prefer-const': 2,\n 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,\n 'object-curly-spacing': [2, 'always', {\n objectsInObjects: false\n }],\n 'array-bracket-spacing': [2, 'never']\n }\n}\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules/\ndist/\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npackage-lock.json\ntests/**/coverage/\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js: 10\nscript: npm run test\nnotifications:\n email: false\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2017-present PanJiaChen\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README-zh.md", "content": "# vue-admin-template\n\n> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。\n\n[线上地址](http://panjiachen.github.io/vue-admin-template)\n\n[国内访问](https://panjiachen.gitee.io/vue-admin-template)\n\n目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。\n\n

\n SPONSORED BY\n

\n

\n \n \n \n

\n\n## Extra\n\n如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)\n\n## 相关项目\n\n- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)\n\n- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)\n\n- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)\n\n- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)\n\n写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:\n\n- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)\n- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)\n- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)\n- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)\n- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)\n\n## Build Setup\n\n```bash\n# 克隆项目\ngit clone https://github.com/PanJiaChen/vue-admin-template.git\n\n# 进入项目目录\ncd vue-admin-template\n\n# 安装依赖\nnpm install\n\n# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题\nnpm install --registry=https://registry.npm.taobao.org\n\n# 启动服务\nnpm run dev\n```\n\n浏览器访问 [http://localhost:9528](http://localhost:9528)\n\n## 发布\n\n```bash\n# 构建测试环境\nnpm run build:stage\n\n# 构建生产环境\nnpm run build:prod\n```\n\n## 其它\n\n```bash\n# 预览发布环境效果\nnpm run preview\n\n# 预览发布环境效果 + 静态资源分析\nnpm run preview -- --report\n\n# 代码格式检查\nnpm run lint\n\n# 代码格式检查并自动修复\nnpm run lint -- --fix\n```\n\n更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)\n\n## 购买贴纸\n\n你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。\n\n## Demo\n\n![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)\n\n## Browsers support\n\nModern browsers and Internet Explorer 10+.\n\n| [\"IE](http://godban.github.io/browsers-support-badges/)
IE / Edge | [\"Firefox\"](http://godban.github.io/browsers-support-badges/)
Firefox | [\"Chrome\"](http://godban.github.io/browsers-support-badges/)
Chrome | [\"Safari\"](http://godban.github.io/browsers-support-badges/)
Safari |\n| --------- | --------- | --------- | --------- |\n| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions\n\n## License\n\n[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.\n\nCopyright (c) 2017-present PanJiaChen\n" }, { "path": "README.md", "content": "# vue-admin-template\n\nEnglish | [简体中文](./README-zh.md)\n\n> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint\n\n**Live demo:** http://panjiachen.github.io/vue-admin-template\n\n\n**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**\n\n

\n SPONSORED BY\n

\n

\n \n \n \n

\n\n## Build Setup\n\n```bash\n# clone the project\ngit clone https://github.com/PanJiaChen/vue-admin-template.git\n\n# enter the project directory\ncd vue-admin-template\n\n# install dependency\nnpm install\n\n# develop\nnpm run dev\n```\n\nThis will automatically open http://localhost:9528\n\n## Build\n\n```bash\n# build for test environment\nnpm run build:stage\n\n# build for production environment\nnpm run build:prod\n```\n\n## Advanced\n\n```bash\n# preview the release environment effect\nnpm run preview\n\n# preview the release environment effect + static resource analysis\nnpm run preview -- --report\n\n# code format check\nnpm run lint\n\n# code format check and auto fix\nnpm run lint -- --fix\n```\n\nRefer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information\n\n## Demo\n\n![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)\n\n## Extra\n\nIf you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)\n\nFor `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))\n\n## Related Project\n\n- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)\n\n- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)\n\n- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)\n\n- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)\n\n## Browsers support\n\nModern browsers and Internet Explorer 10+.\n\n| [\"IE](http://godban.github.io/browsers-support-badges/)
IE / Edge | [\"Firefox\"](http://godban.github.io/browsers-support-badges/)
Firefox | [\"Chrome\"](http://godban.github.io/browsers-support-badges/)
Chrome | [\"Safari\"](http://godban.github.io/browsers-support-badges/)
Safari |\n| --------- | --------- | --------- | --------- |\n| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions\n\n## License\n\n[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.\n\nCopyright (c) 2017-present PanJiaChen\n" }, { "path": "babel.config.js", "content": "module.exports = {\n presets: [\n // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app\n '@vue/cli-plugin-babel/preset'\n ],\n 'env': {\n 'development': {\n // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().\n // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.\n // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html\n 'plugins': ['dynamic-import-node']\n }\n }\n}\n" }, { "path": "build/index.js", "content": "const { run } = require('runjs')\nconst chalk = require('chalk')\nconst config = require('../vue.config.js')\nconst rawArgv = process.argv.slice(2)\nconst args = rawArgv.join(' ')\n\nif (process.env.npm_config_preview || rawArgv.includes('--preview')) {\n const report = rawArgv.includes('--report')\n\n run(`vue-cli-service build ${args}`)\n\n const port = 9526\n const publicPath = config.publicPath\n\n var connect = require('connect')\n var serveStatic = require('serve-static')\n const app = connect()\n\n app.use(\n publicPath,\n serveStatic('./dist', {\n index: ['index.html', '/']\n })\n )\n\n app.listen(port, function () {\n console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))\n if (report) {\n console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))\n }\n\n })\n} else {\n run(`vue-cli-service build ${args}`)\n}\n" }, { "path": "jest.config.js", "content": "module.exports = {\n moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],\n transform: {\n '^.+\\\\.vue$': 'vue-jest',\n '.+\\\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':\n 'jest-transform-stub',\n '^.+\\\\.jsx?$': 'babel-jest'\n },\n moduleNameMapper: {\n '^@/(.*)$': '/src/$1'\n },\n snapshotSerializers: ['jest-serializer-vue'],\n testMatch: [\n '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'\n ],\n collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],\n coverageDirectory: '/tests/unit/coverage',\n // 'collectCoverage': true,\n 'coverageReporters': [\n 'lcov',\n 'text-summary'\n ],\n testURL: 'http://localhost/'\n}\n" }, { "path": "jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@/*\": [\"src/*\"]\n }\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "mock/index.js", "content": "const Mock = require('mockjs')\nconst { param2Obj } = require('./utils')\n\nconst user = require('./user')\nconst table = require('./table')\n\nconst mocks = [\n ...user,\n ...table\n]\n\n// for front mock\n// please use it cautiously, it will redefine XMLHttpRequest,\n// which will cause many of your third-party libraries to be invalidated(like progress event).\nfunction mockXHR() {\n // mock patch\n // https://github.com/nuysoft/Mock/issues/300\n Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send\n Mock.XHR.prototype.send = function() {\n if (this.custom.xhr) {\n this.custom.xhr.withCredentials = this.withCredentials || false\n\n if (this.responseType) {\n this.custom.xhr.responseType = this.responseType\n }\n }\n this.proxy_send(...arguments)\n }\n\n function XHR2ExpressReqWrap(respond) {\n return function(options) {\n let result = null\n if (respond instanceof Function) {\n const { body, type, url } = options\n // https://expressjs.com/en/4x/api.html#req\n result = respond({\n method: type,\n body: JSON.parse(body),\n query: param2Obj(url)\n })\n } else {\n result = respond\n }\n return Mock.mock(result)\n }\n }\n\n for (const i of mocks) {\n Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))\n }\n}\n\nmodule.exports = {\n mocks,\n mockXHR\n}\n\n" }, { "path": "mock/mock-server.js", "content": "const chokidar = require('chokidar')\nconst bodyParser = require('body-parser')\nconst chalk = require('chalk')\nconst path = require('path')\nconst Mock = require('mockjs')\n\nconst mockDir = path.join(process.cwd(), 'mock')\n\nfunction registerRoutes(app) {\n let mockLastIndex\n const { mocks } = require('./index.js')\n const mocksForServer = mocks.map(route => {\n return responseFake(route.url, route.type, route.response)\n })\n for (const mock of mocksForServer) {\n app[mock.type](mock.url, mock.response)\n mockLastIndex = app._router.stack.length\n }\n const mockRoutesLength = Object.keys(mocksForServer).length\n return {\n mockRoutesLength: mockRoutesLength,\n mockStartIndex: mockLastIndex - mockRoutesLength\n }\n}\n\nfunction unregisterRoutes() {\n Object.keys(require.cache).forEach(i => {\n if (i.includes(mockDir)) {\n delete require.cache[require.resolve(i)]\n }\n })\n}\n\n// for mock server\nconst responseFake = (url, type, respond) => {\n return {\n url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),\n type: type || 'get',\n response(req, res) {\n console.log('request invoke:' + req.path)\n res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))\n }\n }\n}\n\nmodule.exports = app => {\n // parse app.body\n // https://expressjs.com/en/4x/api.html#req.body\n app.use(bodyParser.json())\n app.use(bodyParser.urlencoded({\n extended: true\n }))\n\n const mockRoutes = registerRoutes(app)\n var mockRoutesLength = mockRoutes.mockRoutesLength\n var mockStartIndex = mockRoutes.mockStartIndex\n\n // watch files, hot reload mock server\n chokidar.watch(mockDir, {\n ignored: /mock-server/,\n ignoreInitial: true\n }).on('all', (event, path) => {\n if (event === 'change' || event === 'add') {\n try {\n // remove mock routes stack\n app._router.stack.splice(mockStartIndex, mockRoutesLength)\n\n // clear routes cache\n unregisterRoutes()\n\n const mockRoutes = registerRoutes(app)\n mockRoutesLength = mockRoutes.mockRoutesLength\n mockStartIndex = mockRoutes.mockStartIndex\n\n console.log(chalk.magentaBright(`\\n > Mock Server hot reload success! changed ${path}`))\n } catch (error) {\n console.log(chalk.redBright(error))\n }\n }\n })\n}\n" }, { "path": "mock/table.js", "content": "const Mock = require('mockjs')\n\nconst data = Mock.mock({\n 'items|30': [{\n id: '@id',\n title: '@sentence(10, 20)',\n 'status|1': ['published', 'draft', 'deleted'],\n author: 'name',\n display_time: '@datetime',\n pageviews: '@integer(300, 5000)'\n }]\n})\n\nmodule.exports = [\n {\n url: '/vue-admin-template/table/list',\n type: 'get',\n response: config => {\n const items = data.items\n return {\n code: 20000,\n data: {\n total: items.length,\n items: items\n }\n }\n }\n }\n]\n" }, { "path": "mock/user.js", "content": "\nconst tokens = {\n admin: {\n token: 'admin-token'\n },\n editor: {\n token: 'editor-token'\n }\n}\n\nconst users = {\n 'admin-token': {\n roles: ['admin'],\n introduction: 'I am a super administrator',\n avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',\n name: 'Super Admin'\n },\n 'editor-token': {\n roles: ['editor'],\n introduction: 'I am an editor',\n avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',\n name: 'Normal Editor'\n }\n}\n\nmodule.exports = [\n // user login\n {\n url: '/vue-admin-template/user/login',\n type: 'post',\n response: config => {\n const { username } = config.body\n const token = tokens[username]\n\n // mock error\n if (!token) {\n return {\n code: 60204,\n message: 'Account and password are incorrect.'\n }\n }\n\n return {\n code: 20000,\n data: token\n }\n }\n },\n\n // get user info\n {\n url: '/vue-admin-template/user/info\\.*',\n type: 'get',\n response: config => {\n const { token } = config.query\n const info = users[token]\n\n // mock error\n if (!info) {\n return {\n code: 50008,\n message: 'Login failed, unable to get user details.'\n }\n }\n\n return {\n code: 20000,\n data: info\n }\n }\n },\n\n // user logout\n {\n url: '/vue-admin-template/user/logout',\n type: 'post',\n response: _ => {\n return {\n code: 20000,\n data: 'success'\n }\n }\n }\n]\n" }, { "path": "mock/utils.js", "content": "/**\n * @param {string} url\n * @returns {Object}\n */\nfunction param2Obj(url) {\n const search = decodeURIComponent(url.split('?')[1]).replace(/\\+/g, ' ')\n if (!search) {\n return {}\n }\n const obj = {}\n const searchArr = search.split('&')\n searchArr.forEach(v => {\n const index = v.indexOf('=')\n if (index !== -1) {\n const name = v.substring(0, index)\n const val = v.substring(index + 1, v.length)\n obj[name] = val\n }\n })\n return obj\n}\n\nmodule.exports = {\n param2Obj\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"vue-admin-template\",\n \"version\": \"4.4.0\",\n \"description\": \"A vue admin template with Element UI & axios & iconfont & permission control & lint\",\n \"author\": \"Pan \",\n \"scripts\": {\n \"dev\": \"vue-cli-service serve\",\n \"build:prod\": \"vue-cli-service build\",\n \"build:stage\": \"vue-cli-service build --mode staging\",\n \"preview\": \"node build/index.js --preview\",\n \"svgo\": \"svgo -f src/icons/svg --config=src/icons/svgo.yml\",\n \"lint\": \"eslint --ext .js,.vue src\",\n \"test:unit\": \"jest --clearCache && vue-cli-service test:unit\",\n \"test:ci\": \"npm run lint && npm run test:unit\"\n },\n \"dependencies\": {\n \"axios\": \"0.18.1\",\n \"core-js\": \"3.6.5\",\n \"element-ui\": \"2.13.2\",\n \"js-cookie\": \"2.2.0\",\n \"normalize.css\": \"7.0.0\",\n \"nprogress\": \"0.2.0\",\n \"path-to-regexp\": \"2.4.0\",\n \"vue\": \"2.6.10\",\n \"vue-router\": \"3.0.6\",\n \"vuex\": \"3.1.0\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"4.4.4\",\n \"@vue/cli-plugin-eslint\": \"4.4.4\",\n \"@vue/cli-plugin-unit-jest\": \"4.4.4\",\n \"@vue/cli-service\": \"4.4.4\",\n \"@vue/test-utils\": \"1.0.0-beta.29\",\n \"autoprefixer\": \"9.5.1\",\n \"babel-eslint\": \"10.1.0\",\n \"babel-jest\": \"23.6.0\",\n \"babel-plugin-dynamic-import-node\": \"2.3.3\",\n \"chalk\": \"2.4.2\",\n \"connect\": \"3.6.6\",\n \"eslint\": \"6.7.2\",\n \"eslint-plugin-vue\": \"6.2.2\",\n \"html-webpack-plugin\": \"3.2.0\",\n \"mockjs\": \"1.0.1-beta3\",\n \"runjs\": \"4.3.2\",\n \"sass\": \"1.26.8\",\n \"sass-loader\": \"8.0.2\",\n \"script-ext-html-webpack-plugin\": \"2.1.3\",\n \"serve-static\": \"1.13.2\",\n \"svg-sprite-loader\": \"4.1.3\",\n \"svgo\": \"1.2.2\",\n \"vue-template-compiler\": \"2.6.10\"\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\"\n ],\n \"engines\": {\n \"node\": \">=8.9\",\n \"npm\": \">= 3.0.0\"\n },\n \"license\": \"MIT\"\n}\n" }, { "path": "postcss.config.js", "content": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n 'plugins': {\n // to edit target browsers: use \"browserslist\" field in package.json\n 'autoprefixer': {}\n }\n}\n" }, { "path": "public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= webpackConfig.name %>\n \n \n \n
\n \n \n\n" }, { "path": "src/App.vue", "content": "\n\n\n" }, { "path": "src/api/table.js", "content": "import request from '@/utils/request'\n\nexport function getList(params) {\n return request({\n url: '/vue-admin-template/table/list',\n method: 'get',\n params\n })\n}\n" }, { "path": "src/api/user.js", "content": "import request from '@/utils/request'\n\nexport function login(data) {\n return request({\n url: '/vue-admin-template/user/login',\n method: 'post',\n data\n })\n}\n\nexport function getInfo(token) {\n return request({\n url: '/vue-admin-template/user/info',\n method: 'get',\n params: { token }\n })\n}\n\nexport function logout() {\n return request({\n url: '/vue-admin-template/user/logout',\n method: 'post'\n })\n}\n" }, { "path": "src/components/Breadcrumb/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/Hamburger/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/SvgIcon/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/icons/index.js", "content": "import Vue from 'vue'\nimport SvgIcon from '@/components/SvgIcon'// svg component\n\n// register globally\nVue.component('svg-icon', SvgIcon)\n\nconst req = require.context('./svg', false, /\\.svg$/)\nconst requireAll = requireContext => requireContext.keys().map(requireContext)\nrequireAll(req)\n" }, { "path": "src/icons/svgo.yml", "content": "# replace default config\n\n# multipass: true\n# full: true\n\nplugins:\n\n # - name\n #\n # or:\n # - name: false\n # - name: true\n #\n # or:\n # - name:\n # param1: 1\n # param2: 2\n\n- removeAttrs:\n attrs:\n - 'fill'\n - 'fill-rule'\n" }, { "path": "src/layout/components/AppMain.vue", "content": "\n\n\n\n\n\n\n" }, { "path": "src/layout/components/Navbar.vue", "content": "\n\n\n\n\n" }, { "path": "src/layout/components/Sidebar/FixiOSBug.js", "content": "export default {\n computed: {\n device() {\n return this.$store.state.app.device\n }\n },\n mounted() {\n // In order to fix the click on menu on the ios device will trigger the mouseleave bug\n // https://github.com/PanJiaChen/vue-element-admin/issues/1135\n this.fixBugIniOS()\n },\n methods: {\n fixBugIniOS() {\n const $subMenu = this.$refs.subMenu\n if ($subMenu) {\n const handleMouseleave = $subMenu.handleMouseleave\n $subMenu.handleMouseleave = (e) => {\n if (this.device === 'mobile') {\n return\n }\n handleMouseleave(e)\n }\n }\n }\n }\n}\n" }, { "path": "src/layout/components/Sidebar/Item.vue", "content": "\n\n\n" }, { "path": "src/layout/components/Sidebar/Link.vue", "content": "\n\n\n" }, { "path": "src/layout/components/Sidebar/Logo.vue", "content": "\n\n\n\n\n" }, { "path": "src/layout/components/Sidebar/SidebarItem.vue", "content": "\n\n\n" }, { "path": "src/layout/components/Sidebar/index.vue", "content": "\n\n\n" }, { "path": "src/layout/components/index.js", "content": "export { default as Navbar } from './Navbar'\nexport { default as Sidebar } from './Sidebar'\nexport { default as AppMain } from './AppMain'\n" }, { "path": "src/layout/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/layout/mixin/ResizeHandler.js", "content": "import store from '@/store'\n\nconst { body } = document\nconst WIDTH = 992 // refer to Bootstrap's responsive design\n\nexport default {\n watch: {\n $route(route) {\n if (this.device === 'mobile' && this.sidebar.opened) {\n store.dispatch('app/closeSideBar', { withoutAnimation: false })\n }\n }\n },\n beforeMount() {\n window.addEventListener('resize', this.$_resizeHandler)\n },\n beforeDestroy() {\n window.removeEventListener('resize', this.$_resizeHandler)\n },\n mounted() {\n const isMobile = this.$_isMobile()\n if (isMobile) {\n store.dispatch('app/toggleDevice', 'mobile')\n store.dispatch('app/closeSideBar', { withoutAnimation: true })\n }\n },\n methods: {\n // use $_ for mixins properties\n // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential\n $_isMobile() {\n const rect = body.getBoundingClientRect()\n return rect.width - 1 < WIDTH\n },\n $_resizeHandler() {\n if (!document.hidden) {\n const isMobile = this.$_isMobile()\n store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')\n\n if (isMobile) {\n store.dispatch('app/closeSideBar', { withoutAnimation: true })\n }\n }\n }\n }\n}\n" }, { "path": "src/main.js", "content": "import Vue from 'vue'\n\nimport 'normalize.css/normalize.css' // A modern alternative to CSS resets\n\nimport ElementUI from 'element-ui'\nimport 'element-ui/lib/theme-chalk/index.css'\nimport locale from 'element-ui/lib/locale/lang/en' // lang i18n\n\nimport '@/styles/index.scss' // global css\n\nimport App from './App'\nimport store from './store'\nimport router from './router'\n\nimport '@/icons' // icon\nimport '@/permission' // permission control\n\n/**\n * If you don't want to use mock-server\n * you want to use MockJs for mock api\n * you can execute: mockXHR()\n *\n * Currently MockJs will be used in the production environment,\n * please remove it before going online ! ! !\n */\nif (process.env.NODE_ENV === 'production') {\n const { mockXHR } = require('../mock')\n mockXHR()\n}\n\n// set ElementUI lang to EN\nVue.use(ElementUI, { locale })\n// 如果想要中文版 element-ui，按如下方式声明\n// Vue.use(ElementUI)\n\nVue.config.productionTip = false\n\nnew Vue({\n el: '#app',\n router,\n store,\n render: h => h(App)\n})\n" }, { "path": "src/permission.js", "content": "import router from './router'\nimport store from './store'\nimport { Message } from 'element-ui'\nimport NProgress from 'nprogress' // progress bar\nimport 'nprogress/nprogress.css' // progress bar style\nimport { getToken } from '@/utils/auth' // get token from cookie\nimport getPageTitle from '@/utils/get-page-title'\n\nNProgress.configure({ showSpinner: false }) // NProgress Configuration\n\nconst whiteList = ['/login'] // no redirect whitelist\n\nrouter.beforeEach(async(to, from, next) => {\n // start progress bar\n NProgress.start()\n\n // set page title\n document.title = getPageTitle(to.meta.title)\n\n // determine whether the user has logged in\n const hasToken = getToken()\n\n if (hasToken) {\n if (to.path === '/login') {\n // if is logged in, redirect to the home page\n next({ path: '/' })\n NProgress.done()\n } else {\n const hasGetUserInfo = store.getters.name\n if (hasGetUserInfo) {\n next()\n } else {\n try {\n // get user info\n await store.dispatch('user/getInfo')\n\n next()\n } catch (error) {\n // remove token and go to login page to re-login\n await store.dispatch('user/resetToken')\n Message.error(error || 'Has Error')\n next(`/login?redirect=${to.path}`)\n NProgress.done()\n }\n }\n }\n } else {\n /* has no token*/\n\n if (whiteList.indexOf(to.path) !== -1) {\n // in the free login whitelist, go directly\n next()\n } else {\n // other pages that do not have permission to access are redirected to the login page.\n next(`/login?redirect=${to.path}`)\n NProgress.done()\n }\n }\n})\n\nrouter.afterEach(() => {\n // finish progress bar\n NProgress.done()\n})\n" }, { "path": "src/router/index.js", "content": "import Vue from 'vue'\nimport Router from 'vue-router'\n\nVue.use(Router)\n\n/* Layout */\nimport Layout from '@/layout'\n\n/**\n * Note: sub-menu only appear when route children.length >= 1\n * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html\n *\n * hidden: true if set true, item will not show in the sidebar(default is false)\n * alwaysShow: true if set true, will always show the root menu\n * if not set alwaysShow, when item has more than one children route,\n * it will becomes nested mode, otherwise not show the root menu\n * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb\n * name:'router-name' the name is used by (must set!!!)\n * meta : {\n roles: ['admin','editor'] control the page roles (you can set multiple roles)\n title: 'title' the name show in sidebar and breadcrumb (recommend set)\n icon: 'svg-name'/'el-icon-x' the icon show in the sidebar\n breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)\n activeMenu: '/example/list' if set path, the sidebar will highlight the path you set\n }\n */\n\n/**\n * constantRoutes\n * a base page that does not have permission requirements\n * all roles can be accessed\n */\nexport const constantRoutes = [\n {\n path: '/login',\n component: () => import('@/views/login/index'),\n hidden: true\n },\n\n {\n path: '/404',\n component: () => import('@/views/404'),\n hidden: true\n },\n\n {\n path: '/',\n component: Layout,\n redirect: '/dashboard',\n children: [{\n path: 'dashboard',\n name: 'Dashboard',\n component: () => import('@/views/dashboard/index'),\n meta: { title: 'Dashboard', icon: 'dashboard' }\n }]\n },\n\n {\n path: '/example',\n component: Layout,\n redirect: '/example/table',\n name: 'Example',\n meta: { title: 'Example', icon: 'el-icon-s-help' },\n children: [\n {\n path: 'table',\n name: 'Table',\n component: () => import('@/views/table/index'),\n meta: { title: 'Table', icon: 'table' }\n },\n {\n path: 'tree',\n name: 'Tree',\n component: () => import('@/views/tree/index'),\n meta: { title: 'Tree', icon: 'tree' }\n }\n ]\n },\n\n {\n path: '/form',\n component: Layout,\n children: [\n {\n path: 'index',\n name: 'Form',\n component: () => import('@/views/form/index'),\n meta: { title: 'Form', icon: 'form' }\n }\n ]\n },\n\n {\n path: '/nested',\n component: Layout,\n redirect: '/nested/menu1',\n name: 'Nested',\n meta: {\n title: 'Nested',\n icon: 'nested'\n },\n children: [\n {\n path: 'menu1',\n component: () => import('@/views/nested/menu1/index'), // Parent router-view\n name: 'Menu1',\n meta: { title: 'Menu1' },\n children: [\n {\n path: 'menu1-1',\n component: () => import('@/views/nested/menu1/menu1-1'),\n name: 'Menu1-1',\n meta: { title: 'Menu1-1' }\n },\n {\n path: 'menu1-2',\n component: () => import('@/views/nested/menu1/menu1-2'),\n name: 'Menu1-2',\n meta: { title: 'Menu1-2' },\n children: [\n {\n path: 'menu1-2-1',\n component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),\n name: 'Menu1-2-1',\n meta: { title: 'Menu1-2-1' }\n },\n {\n path: 'menu1-2-2',\n component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),\n name: 'Menu1-2-2',\n meta: { title: 'Menu1-2-2' }\n }\n ]\n },\n {\n path: 'menu1-3',\n component: () => import('@/views/nested/menu1/menu1-3'),\n name: 'Menu1-3',\n meta: { title: 'Menu1-3' }\n }\n ]\n },\n {\n path: 'menu2',\n component: () => import('@/views/nested/menu2/index'),\n name: 'Menu2',\n meta: { title: 'menu2' }\n }\n ]\n },\n\n {\n path: 'external-link',\n component: Layout,\n children: [\n {\n path: 'https://panjiachen.github.io/vue-element-admin-site/#/',\n meta: { title: 'External Link', icon: 'link' }\n }\n ]\n },\n\n // 404 page must be placed at the end !!!\n { path: '*', redirect: '/404', hidden: true }\n]\n\nconst createRouter = () => new Router({\n // mode: 'history', // require service support\n scrollBehavior: () => ({ y: 0 }),\n routes: constantRoutes\n})\n\nconst router = createRouter()\n\n// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465\nexport function resetRouter() {\n const newRouter = createRouter()\n router.matcher = newRouter.matcher // reset router\n}\n\nexport default router\n" }, { "path": "src/settings.js", "content": "module.exports = {\n\n title: 'Vue Admin Template',\n\n /**\n * @type {boolean} true | false\n * @description Whether fix the header\n */\n fixedHeader: false,\n\n /**\n * @type {boolean} true | false\n * @description Whether show the logo in sidebar\n */\n sidebarLogo: false\n}\n" }, { "path": "src/store/getters.js", "content": "const getters = {\n sidebar: state => state.app.sidebar,\n device: state => state.app.device,\n token: state => state.user.token,\n avatar: state => state.user.avatar,\n name: state => state.user.name\n}\nexport default getters\n" }, { "path": "src/store/index.js", "content": "import Vue from 'vue'\nimport Vuex from 'vuex'\nimport getters from './getters'\nimport app from './modules/app'\nimport settings from './modules/settings'\nimport user from './modules/user'\n\nVue.use(Vuex)\n\nconst store = new Vuex.Store({\n modules: {\n app,\n settings,\n user\n },\n getters\n})\n\nexport default store\n" }, { "path": "src/store/modules/app.js", "content": "import Cookies from 'js-cookie'\n\nconst state = {\n sidebar: {\n opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,\n withoutAnimation: false\n },\n device: 'desktop'\n}\n\nconst mutations = {\n TOGGLE_SIDEBAR: state => {\n state.sidebar.opened = !state.sidebar.opened\n state.sidebar.withoutAnimation = false\n if (state.sidebar.opened) {\n Cookies.set('sidebarStatus', 1)\n } else {\n Cookies.set('sidebarStatus', 0)\n }\n },\n CLOSE_SIDEBAR: (state, withoutAnimation) => {\n Cookies.set('sidebarStatus', 0)\n state.sidebar.opened = false\n state.sidebar.withoutAnimation = withoutAnimation\n },\n TOGGLE_DEVICE: (state, device) => {\n state.device = device\n }\n}\n\nconst actions = {\n toggleSideBar({ commit }) {\n commit('TOGGLE_SIDEBAR')\n },\n closeSideBar({ commit }, { withoutAnimation }) {\n commit('CLOSE_SIDEBAR', withoutAnimation)\n },\n toggleDevice({ commit }, device) {\n commit('TOGGLE_DEVICE', device)\n }\n}\n\nexport default {\n namespaced: true,\n state,\n mutations,\n actions\n}\n" }, { "path": "src/store/modules/settings.js", "content": "import defaultSettings from '@/settings'\n\nconst { showSettings, fixedHeader, sidebarLogo } = defaultSettings\n\nconst state = {\n showSettings: showSettings,\n fixedHeader: fixedHeader,\n sidebarLogo: sidebarLogo\n}\n\nconst mutations = {\n CHANGE_SETTING: (state, { key, value }) => {\n // eslint-disable-next-line no-prototype-builtins\n if (state.hasOwnProperty(key)) {\n state[key] = value\n }\n }\n}\n\nconst actions = {\n changeSetting({ commit }, data) {\n commit('CHANGE_SETTING', data)\n }\n}\n\nexport default {\n namespaced: true,\n state,\n mutations,\n actions\n}\n\n" }, { "path": "src/store/modules/user.js", "content": "import { login, logout, getInfo } from '@/api/user'\nimport { getToken, setToken, removeToken } from '@/utils/auth'\nimport { resetRouter } from '@/router'\n\nconst getDefaultState = () => {\n return {\n token: getToken(),\n name: '',\n avatar: ''\n }\n}\n\nconst state = getDefaultState()\n\nconst mutations = {\n RESET_STATE: (state) => {\n Object.assign(state, getDefaultState())\n },\n SET_TOKEN: (state, token) => {\n state.token = token\n },\n SET_NAME: (state, name) => {\n state.name = name\n },\n SET_AVATAR: (state, avatar) => {\n state.avatar = avatar\n }\n}\n\nconst actions = {\n // user login\n login({ commit }, userInfo) {\n const { username, password } = userInfo\n return new Promise((resolve, reject) => {\n login({ username: username.trim(), password: password }).then(response => {\n const { data } = response\n commit('SET_TOKEN', data.token)\n setToken(data.token)\n resolve()\n }).catch(error => {\n reject(error)\n })\n })\n },\n\n // get user info\n getInfo({ commit, state }) {\n return new Promise((resolve, reject) => {\n getInfo(state.token).then(response => {\n const { data } = response\n\n if (!data) {\n return reject('Verification failed, please Login again.')\n }\n\n const { name, avatar } = data\n\n commit('SET_NAME', name)\n commit('SET_AVATAR', avatar)\n resolve(data)\n }).catch(error => {\n reject(error)\n })\n })\n },\n\n // user logout\n logout({ commit, state }) {\n return new Promise((resolve, reject) => {\n logout(state.token).then(() => {\n removeToken() // must remove token first\n resetRouter()\n commit('RESET_STATE')\n resolve()\n }).catch(error => {\n reject(error)\n })\n })\n },\n\n // remove token\n resetToken({ commit }) {\n return new Promise(resolve => {\n removeToken() // must remove token first\n commit('RESET_STATE')\n resolve()\n })\n }\n}\n\nexport default {\n namespaced: true,\n state,\n mutations,\n actions\n}\n\n" }, { "path": "src/styles/element-ui.scss", "content": "// cover some element-ui styles\n\n.el-breadcrumb__inner,\n.el-breadcrumb__inner a {\n font-weight: 400 !important;\n}\n\n.el-upload {\n input[type=\"file\"] {\n display: none !important;\n }\n}\n\n.el-upload__input {\n display: none;\n}\n\n\n// to fixed https://github.com/ElemeFE/element/issues/2461\n.el-dialog {\n transform: none;\n left: 0;\n position: relative;\n margin: 0 auto;\n}\n\n// refine element ui upload\n.upload-container {\n .el-upload {\n width: 100%;\n\n .el-upload-dragger {\n width: 100%;\n height: 200px;\n }\n }\n}\n\n// dropdown\n.el-dropdown-menu {\n a {\n display: block\n }\n}\n\n// to fix el-date-picker css style\n.el-range-separator {\n box-sizing: content-box;\n}\n" }, { "path": "src/styles/index.scss", "content": "@import './variables.scss';\n@import './mixin.scss';\n@import './transition.scss';\n@import './element-ui.scss';\n@import './sidebar.scss';\n\nbody {\n height: 100%;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;\n}\n\nlabel {\n font-weight: 700;\n}\n\nhtml {\n height: 100%;\n box-sizing: border-box;\n}\n\n#app {\n height: 100%;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\na:focus,\na:active {\n outline: none;\n}\n\na,\na:focus,\na:hover {\n cursor: pointer;\n color: inherit;\n text-decoration: none;\n}\n\ndiv:focus {\n outline: none;\n}\n\n.clearfix {\n &:after {\n visibility: hidden;\n display: block;\n font-size: 0;\n content: \" \";\n clear: both;\n height: 0;\n }\n}\n\n// main-container global css\n.app-container {\n padding: 20px;\n}\n" }, { "path": "src/styles/mixin.scss", "content": "@mixin clearfix {\n &:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}\n\n@mixin scrollBar {\n &::-webkit-scrollbar-track-piece {\n background: #d3dce6;\n }\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #99a9bf;\n border-radius: 20px;\n }\n}\n\n@mixin relative {\n position: relative;\n width: 100%;\n height: 100%;\n}\n" }, { "path": "src/styles/sidebar.scss", "content": "#app {\n\n .main-container {\n min-height: 100%;\n transition: margin-left .28s;\n margin-left: $sideBarWidth;\n position: relative;\n }\n\n .sidebar-container {\n transition: width 0.28s;\n width: $sideBarWidth !important;\n background-color: $menuBg;\n height: 100%;\n position: fixed;\n font-size: 0px;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 1001;\n overflow: hidden;\n\n // reset element-ui css\n .horizontal-collapse-transition {\n transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;\n }\n\n .scrollbar-wrapper {\n overflow-x: hidden !important;\n }\n\n .el-scrollbar__bar.is-vertical {\n right: 0px;\n }\n\n .el-scrollbar {\n height: 100%;\n }\n\n &.has-logo {\n .el-scrollbar {\n height: calc(100% - 50px);\n }\n }\n\n .is-horizontal {\n display: none;\n }\n\n a {\n display: inline-block;\n width: 100%;\n overflow: hidden;\n }\n\n .svg-icon {\n margin-right: 16px;\n }\n\n .sub-el-icon {\n margin-right: 12px;\n margin-left: -2px;\n }\n\n .el-menu {\n border: none;\n height: 100%;\n width: 100% !important;\n }\n\n // menu hover\n .submenu-title-noDropdown,\n .el-submenu__title {\n &:hover {\n background-color: $menuHover !important;\n }\n }\n\n .is-active>.el-submenu__title {\n color: $subMenuActiveText !important;\n }\n\n & .nest-menu .el-submenu>.el-submenu__title,\n & .el-submenu .el-menu-item {\n min-width: $sideBarWidth !important;\n background-color: $subMenuBg !important;\n\n &:hover {\n background-color: $subMenuHover !important;\n }\n }\n }\n\n .hideSidebar {\n .sidebar-container {\n width: 54px !important;\n }\n\n .main-container {\n margin-left: 54px;\n }\n\n .submenu-title-noDropdown {\n padding: 0 !important;\n position: relative;\n\n .el-tooltip {\n padding: 0 !important;\n\n .svg-icon {\n margin-left: 20px;\n }\n\n .sub-el-icon {\n margin-left: 19px;\n }\n }\n }\n\n .el-submenu {\n overflow: hidden;\n\n &>.el-submenu__title {\n padding: 0 !important;\n\n .svg-icon {\n margin-left: 20px;\n }\n\n .sub-el-icon {\n margin-left: 19px;\n }\n\n .el-submenu__icon-arrow {\n display: none;\n }\n }\n }\n\n .el-menu--collapse {\n .el-submenu {\n &>.el-submenu__title {\n &>span {\n height: 0;\n width: 0;\n overflow: hidden;\n visibility: hidden;\n display: inline-block;\n }\n }\n }\n }\n }\n\n .el-menu--collapse .el-menu .el-submenu {\n min-width: $sideBarWidth !important;\n }\n\n // mobile responsive\n .mobile {\n .main-container {\n margin-left: 0px;\n }\n\n .sidebar-container {\n transition: transform .28s;\n width: $sideBarWidth !important;\n }\n\n &.hideSidebar {\n .sidebar-container {\n pointer-events: none;\n transition-duration: 0.3s;\n transform: translate3d(-$sideBarWidth, 0, 0);\n }\n }\n }\n\n .withoutAnimation {\n\n .main-container,\n .sidebar-container {\n transition: none;\n }\n }\n}\n\n// when menu collapsed\n.el-menu--vertical {\n &>.el-menu {\n .svg-icon {\n margin-right: 16px;\n }\n .sub-el-icon {\n margin-right: 12px;\n margin-left: -2px;\n }\n }\n\n .nest-menu .el-submenu>.el-submenu__title,\n .el-menu-item {\n &:hover {\n // you can use $subMenuHover\n background-color: $menuHover !important;\n }\n }\n\n // the scroll bar appears when the subMenu is too long\n >.el-menu--popup {\n max-height: 100vh;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track-piece {\n background: #d3dce6;\n }\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #99a9bf;\n border-radius: 20px;\n }\n }\n}\n" }, { "path": "src/styles/transition.scss", "content": "// global transition css\n\n/* fade */\n.fade-enter-active,\n.fade-leave-active {\n transition: opacity 0.28s;\n}\n\n.fade-enter,\n.fade-leave-active {\n opacity: 0;\n}\n\n/* fade-transform */\n.fade-transform-leave-active,\n.fade-transform-enter-active {\n transition: all .5s;\n}\n\n.fade-transform-enter {\n opacity: 0;\n transform: translateX(-30px);\n}\n\n.fade-transform-leave-to {\n opacity: 0;\n transform: translateX(30px);\n}\n\n/* breadcrumb transition */\n.breadcrumb-enter-active,\n.breadcrumb-leave-active {\n transition: all .5s;\n}\n\n.breadcrumb-enter,\n.breadcrumb-leave-active {\n opacity: 0;\n transform: translateX(20px);\n}\n\n.breadcrumb-move {\n transition: all .5s;\n}\n\n.breadcrumb-leave-active {\n position: absolute;\n}\n" }, { "path": "src/styles/variables.scss", "content": "// sidebar\n$menuText:#bfcbd9;\n$menuActiveText:#409EFF;\n$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951\n\n$menuBg:#304156;\n$menuHover:#263445;\n\n$subMenuBg:#1f2d3d;\n$subMenuHover:#001528;\n\n$sideBarWidth: 210px;\n\n// the :export directive is the magic sauce for webpack\n// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass\n:export {\n menuText: $menuText;\n menuActiveText: $menuActiveText;\n subMenuActiveText: $subMenuActiveText;\n menuBg: $menuBg;\n menuHover: $menuHover;\n subMenuBg: $subMenuBg;\n subMenuHover: $subMenuHover;\n sideBarWidth: $sideBarWidth;\n}\n" }, { "path": "src/utils/auth.js", "content": "import Cookies from 'js-cookie'\n\nconst TokenKey = 'vue_admin_template_token'\n\nexport function getToken() {\n return Cookies.get(TokenKey)\n}\n\nexport function setToken(token) {\n return Cookies.set(TokenKey, token)\n}\n\nexport function removeToken() {\n return Cookies.remove(TokenKey)\n}\n" }, { "path": "src/utils/get-page-title.js", "content": "import defaultSettings from '@/settings'\n\nconst title = defaultSettings.title || 'Vue Admin Template'\n\nexport default function getPageTitle(pageTitle) {\n if (pageTitle) {\n return `${pageTitle} - ${title}`\n }\n return `${title}`\n}\n" }, { "path": "src/utils/index.js", "content": "/**\n * Created by PanJiaChen on 16/11/18.\n */\n\n/**\n * Parse the time to string\n * @param {(Object|string|number)} time\n * @param {string} cFormat\n * @returns {string | null}\n */\nexport function parseTime(time, cFormat) {\n if (arguments.length === 0 || !time) {\n return null\n }\n const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'\n let date\n if (typeof time === 'object') {\n date = time\n } else {\n if ((typeof time === 'string')) {\n if ((/^[0-9]+$/.test(time))) {\n // support \"1548221490638\"\n time = parseInt(time)\n } else {\n // support safari\n // https://stackoverflow.com/questions/4310953/invalid-date-in-safari\n time = time.replace(new RegExp(/-/gm), '/')\n }\n }\n\n if ((typeof time === 'number') && (time.toString().length === 10)) {\n time = time * 1000\n }\n date = new Date(time)\n }\n const formatObj = {\n y: date.getFullYear(),\n m: date.getMonth() + 1,\n d: date.getDate(),\n h: date.getHours(),\n i: date.getMinutes(),\n s: date.getSeconds(),\n a: date.getDay()\n }\n const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {\n const value = formatObj[key]\n // Note: getDay() returns 0 on Sunday\n if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }\n return value.toString().padStart(2, '0')\n })\n return time_str\n}\n\n/**\n * @param {number} time\n * @param {string} option\n * @returns {string}\n */\nexport function formatTime(time, option) {\n if (('' + time).length === 10) {\n time = parseInt(time) * 1000\n } else {\n time = +time\n }\n const d = new Date(time)\n const now = Date.now()\n\n const diff = (now - d) / 1000\n\n if (diff < 30) {\n return '刚刚'\n } else if (diff < 3600) {\n // less 1 hour\n return Math.ceil(diff / 60) + '分钟前'\n } else if (diff < 3600 * 24) {\n return Math.ceil(diff / 3600) + '小时前'\n } else if (diff < 3600 * 24 * 2) {\n return '1天前'\n }\n if (option) {\n return parseTime(time, option)\n } else {\n return (\n d.getMonth() +\n 1 +\n '月' +\n d.getDate() +\n '日' +\n d.getHours() +\n '时' +\n d.getMinutes() +\n '分'\n )\n }\n}\n\n/**\n * @param {string} url\n * @returns {Object}\n */\nexport function param2Obj(url) {\n const search = decodeURIComponent(url.split('?')[1]).replace(/\\+/g, ' ')\n if (!search) {\n return {}\n }\n const obj = {}\n const searchArr = search.split('&')\n searchArr.forEach(v => {\n const index = v.indexOf('=')\n if (index !== -1) {\n const name = v.substring(0, index)\n const val = v.substring(index + 1, v.length)\n obj[name] = val\n }\n })\n return obj\n}\n" }, { "path": "src/utils/request.js", "content": "import axios from 'axios'\nimport { MessageBox, Message } from 'element-ui'\nimport store from '@/store'\nimport { getToken } from '@/utils/auth'\n\n// create an axios instance\nconst service = axios.create({\n baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url\n // withCredentials: true, // send cookies when cross-domain requests\n timeout: 5000 // request timeout\n})\n\n// request interceptor\nservice.interceptors.request.use(\n config => {\n // do something before request is sent\n\n if (store.getters.token) {\n // let each request carry token\n // ['X-Token'] is a custom headers key\n // please modify it according to the actual situation\n config.headers['X-Token'] = getToken()\n }\n return config\n },\n error => {\n // do something with request error\n console.log(error) // for debug\n return Promise.reject(error)\n }\n)\n\n// response interceptor\nservice.interceptors.response.use(\n /**\n * If you want to get http information such as headers or status\n * Please return response => response\n */\n\n /**\n * Determine the request status by custom code\n * Here is just an example\n * You can also judge the status by HTTP Status Code\n */\n response => {\n const res = response.data\n\n // if the custom code is not 20000, it is judged as an error.\n if (res.code !== 20000) {\n Message({\n message: res.message || 'Error',\n type: 'error',\n duration: 5 * 1000\n })\n\n // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;\n if (res.code === 50008 || res.code === 50012 || res.code === 50014) {\n // to re-login\n MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {\n confirmButtonText: 'Re-Login',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n store.dispatch('user/resetToken').then(() => {\n location.reload()\n })\n })\n }\n return Promise.reject(new Error(res.message || 'Error'))\n } else {\n return res\n }\n },\n error => {\n console.log('err' + error) // for debug\n Message({\n message: error.message,\n type: 'error',\n duration: 5 * 1000\n })\n return Promise.reject(error)\n }\n)\n\nexport default service\n" }, { "path": "src/utils/validate.js", "content": "/**\n * Created by PanJiaChen on 16/11/18.\n */\n\n/**\n * @param {string} path\n * @returns {Boolean}\n */\nexport function isExternal(path) {\n return /^(https?:|mailto:|tel:)/.test(path)\n}\n\n/**\n * @param {string} str\n * @returns {Boolean}\n */\nexport function validUsername(str) {\n const valid_map = ['admin', 'editor']\n return valid_map.indexOf(str.trim()) >= 0\n}\n" }, { "path": "src/views/404.vue", "content": "\n\n\n\n\n" }, { "path": "src/views/dashboard/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/views/form/index.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/views/login/index.vue", "content": "\n\n\n\n\n\n\n" }, { "path": "src/views/nested/menu1/index.vue", "content": "\n" }, { "path": "src/views/nested/menu1/menu1-1/index.vue", "content": "\n" }, { "path": "src/views/nested/menu1/menu1-2/index.vue", "content": "\n" }, { "path": "src/views/nested/menu1/menu1-2/menu1-2-1/index.vue", "content": "\n" }, { "path": "src/views/nested/menu1/menu1-2/menu1-2-2/index.vue", "content": "\n" }, { "path": "src/views/nested/menu1/menu1-3/index.vue", "content": "\n" }, { "path": "src/views/nested/menu2/index.vue", "content": "\n" }, { "path": "src/views/table/index.vue", "content": "\n\n\n" }, { "path": "src/views/tree/index.vue", "content": "\n\n\n\n" }, { "path": "tests/unit/.eslintrc.js", "content": "module.exports = {\n env: {\n jest: true\n }\n}\n" }, { "path": "tests/unit/components/Breadcrumb.spec.js", "content": "import { mount, createLocalVue } from '@vue/test-utils'\nimport VueRouter from 'vue-router'\nimport ElementUI from 'element-ui'\nimport Breadcrumb from '@/components/Breadcrumb/index.vue'\n\nconst localVue = createLocalVue()\nlocalVue.use(VueRouter)\nlocalVue.use(ElementUI)\n\nconst routes = [\n {\n path: '/',\n name: 'home',\n children: [{\n path: 'dashboard',\n name: 'dashboard'\n }]\n },\n {\n path: '/menu',\n name: 'menu',\n children: [{\n path: 'menu1',\n name: 'menu1',\n meta: { title: 'menu1' },\n children: [{\n path: 'menu1-1',\n name: 'menu1-1',\n meta: { title: 'menu1-1' }\n },\n {\n path: 'menu1-2',\n name: 'menu1-2',\n redirect: 'noredirect',\n meta: { title: 'menu1-2' },\n children: [{\n path: 'menu1-2-1',\n name: 'menu1-2-1',\n meta: { title: 'menu1-2-1' }\n },\n {\n path: 'menu1-2-2',\n name: 'menu1-2-2'\n }]\n }]\n }]\n }]\n\nconst router = new VueRouter({\n routes\n})\n\ndescribe('Breadcrumb.vue', () => {\n const wrapper = mount(Breadcrumb, {\n localVue,\n router\n })\n it('dashboard', () => {\n router.push('/dashboard')\n const len = wrapper.findAll('.el-breadcrumb__inner').length\n expect(len).toBe(1)\n })\n it('normal route', () => {\n router.push('/menu/menu1')\n const len = wrapper.findAll('.el-breadcrumb__inner').length\n expect(len).toBe(2)\n })\n it('nested route', () => {\n router.push('/menu/menu1/menu1-2/menu1-2-1')\n const len = wrapper.findAll('.el-breadcrumb__inner').length\n expect(len).toBe(4)\n })\n it('no meta.title', () => {\n router.push('/menu/menu1/menu1-2/menu1-2-2')\n const len = wrapper.findAll('.el-breadcrumb__inner').length\n expect(len).toBe(3)\n })\n // it('click link', () => {\n // router.push('/menu/menu1/menu1-2/menu1-2-2')\n // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')\n // const second = breadcrumbArray.at(1)\n // console.log(breadcrumbArray)\n // const href = second.find('a').attributes().href\n // expect(href).toBe('#/menu/menu1')\n // })\n // it('noRedirect', () => {\n // router.push('/menu/menu1/menu1-2/menu1-2-1')\n // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')\n // const redirectBreadcrumb = breadcrumbArray.at(2)\n // expect(redirectBreadcrumb.contains('a')).toBe(false)\n // })\n it('last breadcrumb', () => {\n router.push('/menu/menu1/menu1-2/menu1-2-1')\n const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')\n const redirectBreadcrumb = breadcrumbArray.at(3)\n expect(redirectBreadcrumb.contains('a')).toBe(false)\n })\n})\n" }, { "path": "tests/unit/components/Hamburger.spec.js", "content": "import { shallowMount } from '@vue/test-utils'\nimport Hamburger from '@/components/Hamburger/index.vue'\ndescribe('Hamburger.vue', () => {\n it('toggle click', () => {\n const wrapper = shallowMount(Hamburger)\n const mockFn = jest.fn()\n wrapper.vm.$on('toggleClick', mockFn)\n wrapper.find('.hamburger').trigger('click')\n expect(mockFn).toBeCalled()\n })\n it('prop isActive', () => {\n const wrapper = shallowMount(Hamburger)\n wrapper.setProps({ isActive: true })\n expect(wrapper.contains('.is-active')).toBe(true)\n wrapper.setProps({ isActive: false })\n expect(wrapper.contains('.is-active')).toBe(false)\n })\n})\n" }, { "path": "tests/unit/components/SvgIcon.spec.js", "content": "import { shallowMount } from '@vue/test-utils'\nimport SvgIcon from '@/components/SvgIcon/index.vue'\ndescribe('SvgIcon.vue', () => {\n it('iconClass', () => {\n const wrapper = shallowMount(SvgIcon, {\n propsData: {\n iconClass: 'test'\n }\n })\n expect(wrapper.find('use').attributes().href).toBe('#icon-test')\n })\n it('className', () => {\n const wrapper = shallowMount(SvgIcon, {\n propsData: {\n iconClass: 'test'\n }\n })\n expect(wrapper.classes().length).toBe(1)\n wrapper.setProps({ className: 'test' })\n expect(wrapper.classes().includes('test')).toBe(true)\n })\n})\n" }, { "path": "tests/unit/utils/formatTime.spec.js", "content": "import { formatTime } from '@/utils/index.js'\n\ndescribe('Utils:formatTime', () => {\n const d = new Date('2018-07-13 17:54:01') // \"2018-07-13 17:54:01\"\n const retrofit = 5 * 1000\n\n it('ten digits timestamp', () => {\n expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')\n })\n it('test now', () => {\n expect(formatTime(+new Date() - 1)).toBe('刚刚')\n })\n it('less two minute', () => {\n expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')\n })\n it('less two hour', () => {\n expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')\n })\n it('less one day', () => {\n expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')\n })\n it('more than one day', () => {\n expect(formatTime(d)).toBe('7月13日17时54分')\n })\n it('format', () => {\n expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')\n expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')\n expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')\n })\n})\n" }, { "path": "tests/unit/utils/param2Obj.spec.js", "content": "import { param2Obj } from '@/utils/index.js'\ndescribe('Utils:param2Obj', () => {\n const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'\n\n it('param2Obj test', () => {\n expect(param2Obj(url)).toEqual({\n name: 'bill',\n age: '29',\n sex: '1',\n field: window.btoa('test'),\n key: '测试'\n })\n })\n})\n" }, { "path": "tests/unit/utils/parseTime.spec.js", "content": "import { parseTime } from '@/utils/index.js'\n\ndescribe('Utils:parseTime', () => {\n const d = new Date('2018-07-13 17:54:01') // \"2018-07-13 17:54:01\"\n it('timestamp', () => {\n expect(parseTime(d)).toBe('2018-07-13 17:54:01')\n })\n it('timestamp string', () => {\n expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')\n })\n it('ten digits timestamp', () => {\n expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')\n })\n it('new Date', () => {\n expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')\n })\n it('format', () => {\n expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')\n expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')\n expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')\n })\n it('get the day of the week', () => {\n expect(parseTime(d, '{a}')).toBe('五') // 星期五\n })\n it('get the day of the week', () => {\n expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日\n })\n it('empty argument', () => {\n expect(parseTime()).toBeNull()\n })\n\n it('null', () => {\n expect(parseTime(null)).toBeNull()\n })\n})\n" }, { "path": "tests/unit/utils/validate.spec.js", "content": "import { validUsername, isExternal } from '@/utils/validate.js'\n\ndescribe('Utils:validate', () => {\n it('validUsername', () => {\n expect(validUsername('admin')).toBe(true)\n expect(validUsername('editor')).toBe(true)\n expect(validUsername('xxxx')).toBe(false)\n })\n it('isExternal', () => {\n expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)\n expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)\n expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)\n expect(isExternal('/dashboard')).toBe(false)\n expect(isExternal('./dashboard')).toBe(false)\n expect(isExternal('dashboard')).toBe(false)\n })\n})\n" }, { "path": "vue.config.js", "content": "'use strict'\nconst path = require('path')\nconst defaultSettings = require('./src/settings.js')\n\nfunction resolve(dir) {\n return path.join(__dirname, dir)\n}\n\nconst name = defaultSettings.title || 'vue Admin Template' // page title\n\n// If your port is set to 80,\n// use administrator privileges to execute the command line.\n// For example, Mac: sudo npm run\n// You can change the port by the following methods:\n// port = 9528 npm run dev OR npm run dev --port = 9528\nconst port = process.env.port || process.env.npm_config_port || 9528 // dev port\n\n// All configuration item explanations can be find in https://cli.vuejs.org/config/\nmodule.exports = {\n /**\n * You will need to set publicPath if you plan to deploy your site under a sub path,\n * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,\n * then publicPath should be set to \"/bar/\".\n * In most cases please use '/' !!!\n * Detail: https://cli.vuejs.org/config/#publicpath\n */\n publicPath: '/',\n outputDir: 'dist',\n assetsDir: 'static',\n lintOnSave: process.env.NODE_ENV === 'development',\n productionSourceMap: false,\n devServer: {\n port: port,\n open: true,\n overlay: {\n warnings: false,\n errors: true\n },\n before: require('./mock/mock-server.js')\n },\n configureWebpack: {\n // provide the app's title in webpack's name field, so that\n // it can be accessed in index.html to inject the correct title.\n name: name,\n resolve: {\n alias: {\n '@': resolve('src')\n }\n }\n },\n chainWebpack(config) {\n // it can improve the speed of the first screen, it is recommended to turn on preload\n config.plugin('preload').tap(() => [\n {\n rel: 'preload',\n // to ignore runtime.js\n // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171\n fileBlacklist: [/\\.map$/, /hot-update\\.js$/, /runtime\\..*\\.js$/],\n include: 'initial'\n }\n ])\n\n // when there are many pages, it will cause too many meaningless requests\n config.plugins.delete('prefetch')\n\n // set svg-sprite-loader\n config.module\n .rule('svg')\n .exclude.add(resolve('src/icons'))\n .end()\n config.module\n .rule('icons')\n .test(/\\.svg$/)\n .include.add(resolve('src/icons'))\n .end()\n .use('svg-sprite-loader')\n .loader('svg-sprite-loader')\n .options({\n symbolId: 'icon-[name]'\n })\n .end()\n\n config\n .when(process.env.NODE_ENV !== 'development',\n config => {\n config\n .plugin('ScriptExtHtmlWebpackPlugin')\n .after('html')\n .use('script-ext-html-webpack-plugin', [{\n // `runtime` must same as runtimeChunk name. default is `runtime`\n inline: /runtime\\..*\\.js$/\n }])\n .end()\n config\n .optimization.splitChunks({\n chunks: 'all',\n cacheGroups: {\n libs: {\n name: 'chunk-libs',\n test: /[\\\\/]node_modules[\\\\/]/,\n priority: 10,\n chunks: 'initial' // only package third parties that are initially dependent\n },\n elementUI: {\n name: 'chunk-elementUI', // split elementUI into a single package\n priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: /[\\\\/]node_modules[\\\\/]_?element-ui(.*)/ // in order to adapt to cnpm\n },\n commons: {\n name: 'chunk-commons',\n test: resolve('src/components'), // can customize your rules\n minChunks: 3, // minimum common number\n priority: 5,\n reuseExistingChunk: true\n }\n }\n })\n // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk\n config.optimization.runtimeChunk('single')\n }\n )\n }\n}\n" } ]