diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ea6e20f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..fa55c83 --- /dev/null +++ b/.env.development @@ -0,0 +1,8 @@ +NODE_ENV +# just a flag +ENV = 'development' +#base url +BASE_URL = https://www.xxx.com/ +# base api +VUE_APP_BASE_API = '/dev-api' +VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..0129ea1 --- /dev/null +++ b/.env.production @@ -0,0 +1,7 @@ +# just a flag +ENV = 'production' +#base url +BASE_URL = https://www.top1buyer.com/ +# base api +VUE_APP_BASE_API = '/prod-api' + diff --git a/.env.staging b/.env.staging new file mode 100644 index 0000000..0daf630 --- /dev/null +++ b/.env.staging @@ -0,0 +1,9 @@ +NODE_ENV = production + +# just a flag +ENV = 'staging' +#base url +BASE_URL = https://www.top1buyer.com/ +# base api +VUE_APP_BASE_API = '/stage-api' + diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..e6529fc --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +build/*.js +src/assets +public +dist diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c5d163d --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,278 @@ +module.exports = { + root: true, + parserOptions: { + parser: 'babel-eslint', + sourceType: 'module' + }, + env: { + browser: true, + node: true, + es6: true + }, + extends: ['plugin:vue/recommended', 'eslint:recommended'], + + // add your custom rules here + //it is base on https://github.com/vuejs/eslint-config-vue + rules: { + 'vue/max-attributes-per-line': [ + 2, + { + singleline: 10, + multiline: { + max: 1, + allowFirstLine: false + } + } + ], + 'vue/singleline-html-element-content-newline': 'off', + 'vue/multiline-html-element-content-newline': 'off', + 'vue/name-property-casing': ['error', 'PascalCase'], + 'vue/no-v-html': 'off', + 'accessor-pairs': 2, + 'arrow-spacing': [ + 2, + { + before: true, + after: true + } + ], + 'block-spacing': [2, 'always'], + 'brace-style': [ + 2, + '1tbs', + { + allowSingleLine: true + } + ], + camelcase: [ + 0, + { + properties: 'always' + } + ], + 'comma-dangle': [2, 'never'], + 'comma-spacing': [ + 2, + { + before: false, + after: true + } + ], + 'comma-style': [2, 'last'], + 'constructor-super': 2, + curly: [2, 'multi-line'], + 'dot-location': [2, 'property'], + 'eol-last': 2, + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'generator-star-spacing': [ + 2, + { + before: true, + after: true + } + ], + 'handle-callback-err': [2, '^(err|error)$'], + 'indent': ['off', 2], + 'jsx-quotes': [2, 'prefer-single'], + 'key-spacing': [ + 2, + { + beforeColon: false, + afterColon: true + } + ], + 'keyword-spacing': [ + 2, + { + before: true, + after: true + } + ], + 'new-cap': [ + 2, + { + newIsCap: true, + capIsNew: false + } + ], + 'new-parens': 2, + 'no-array-constructor': 2, + 'no-caller': 2, + 'no-console': 'off', + 'no-class-assign': 2, + 'no-cond-assign': 2, + 'no-const-assign': 2, + 'no-control-regex': 0, + 'no-delete-var': 2, + 'no-dupe-args': 2, + 'no-dupe-class-members': 2, + 'no-dupe-keys': 2, + 'no-duplicate-case': 2, + 'no-empty-character-class': 2, + 'no-empty-pattern': 2, + 'no-eval': 2, + 'no-ex-assign': 2, + 'no-extend-native': 2, + 'no-extra-bind': 2, + 'no-extra-boolean-cast': 2, + 'no-extra-parens': [2, 'functions'], + 'no-fallthrough': 2, + 'no-floating-decimal': 2, + 'no-func-assign': 2, + 'no-implied-eval': 2, + 'no-inner-declarations': [2, 'functions'], + 'no-invalid-regexp': 2, + 'no-irregular-whitespace': 2, + 'no-iterator': 2, + 'no-label-var': 2, + 'no-labels': [ + 2, + { + allowLoop: false, + allowSwitch: false + } + ], + 'no-lone-blocks': 2, + 'no-mixed-spaces-and-tabs': 2, + 'no-multi-spaces': 2, + 'no-multi-str': 2, + 'no-multiple-empty-lines': [ + 2, + { + max: 1 + } + ], + 'no-native-reassign': 2, + 'no-negated-in-lhs': 2, + 'no-new-object': 2, + 'no-new-require': 2, + 'no-new-symbol': 2, + 'no-new-wrappers': 2, + 'no-obj-calls': 2, + 'no-octal': 2, + 'no-octal-escape': 2, + 'no-path-concat': 2, + 'no-proto': 2, + 'no-redeclare': 2, + 'no-regex-spaces': 2, + 'no-return-assign': [2, 'except-parens'], + 'no-self-assign': 2, + 'no-self-compare': 2, + 'no-sequences': 2, + 'no-shadow-restricted-names': 2, + 'no-spaced-func': 2, + 'no-sparse-arrays': 2, + 'no-this-before-super': 2, + 'no-throw-literal': 2, + 'no-trailing-spaces': 2, + 'no-undef': 2, + 'no-undef-init': 2, + 'no-unexpected-multiline': 2, + 'no-unmodified-loop-condition': 2, + 'no-unneeded-ternary': [ + 2, + { + defaultAssignment: false + } + ], + 'no-unreachable': 2, + 'no-unsafe-finally': 2, + 'no-unused-vars': [ + 2, + { + vars: 'all', + args: 'none' + } + ], + 'no-useless-call': 2, + 'no-useless-computed-key': 2, + 'no-useless-constructor': 2, + 'no-useless-escape': 0, + 'no-whitespace-before-property': 2, + 'no-with': 2, + 'one-var': [ + 2, + { + initialized: 'never' + } + ], + 'operator-linebreak': [ + 2, + 'after', + { + overrides: { + '?': 'before', + ':': 'before' + } + } + ], + 'padded-blocks': [2, 'never'], + quotes: [ + 2, + 'single', + { + avoidEscape: true, + allowTemplateLiterals: true + } + ], + semi: [2, 'never'], + 'semi-spacing': [ + 2, + { + before: false, + after: true + } + ], + 'space-before-blocks': [2, 'always'], + 'space-before-function-paren': [2, 'never'], + 'space-in-parens': [2, 'never'], + 'space-infix-ops': 2, + 'space-unary-ops': [ + 2, + { + words: true, + nonwords: false + } + ], + 'spaced-comment': [ + 2, + 'always', + { + markers: [ + 'global', + 'globals', + 'eslint', + 'eslint-disable', + '*package', + '!', + ',' + ] + } + ], + 'template-curly-spacing': [2, 'never'], + 'use-isnan': 2, + 'valid-typeof': 2, + 'wrap-iife': [2, 'any'], + 'yield-star-spacing': [2, 'both'], + yoda: [2, 'never'], + 'prefer-const': 2, + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'object-curly-spacing': [ + 2, + 'always', + { + objectsInObjects: false + } + ], + 'array-bracket-spacing': [2, 'never'], + 'vue/html-self-closing': ["error",{ + "html": { + "void": "never", + "normal": "any", + "component": "any" + }, + "svg": "always", + "math": "always" + }] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9ad28d2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +tests/**/coverage/ + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/.postcssrc.js b/.postcssrc.js new file mode 100644 index 0000000..200edf7 --- /dev/null +++ b/.postcssrc.js @@ -0,0 +1,12 @@ +// https://github.com/michael-ciniawsky/postcss-load-config +module.exports = { + plugins: { + autoprefixer: { + browsers: ['Android >= 4.0', 'iOS >= 7'] + }, + 'postcss-pxtorem': { + rootValue: 37.5, + propList: ['*'] + } + } +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..f4be7a0 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,5 @@ +language: node_js +node_js: 10 +script: npm run test +notifications: + email: false diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6151575 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017-present PanJiaChen + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..3fcb398 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,14 @@ +module.exports = { + presets: ['@vue/app'], + plugins: [ + [ + 'import', + { + libraryName: 'vant', + libraryDirectory: 'es', + style: true + }, + 'vant' + ] + ] +} diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..d1d939e --- /dev/null +++ b/build/index.js @@ -0,0 +1,35 @@ +const { run } = require('runjs') +const chalk = require('chalk') +// const config = require('../vue.config.js') +const rawArgv = process.argv.slice(2) +const args = rawArgv.join(' ') + +if (process.env.npm_config_preview || rawArgv.includes('--preview')) { + const report = rawArgv.includes('--report') + + run(`vue-cli-service build ${args}`) + + const port = 9018 + const publicPath = '/' + + var connect = require('connect') + var serveStatic = require('serve-static') + const app = connect() + + app.use( + publicPath, + serveStatic('./dist', { + index: ['index.html', '/'] + }) + ) + + app.listen(port, function () { + console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) + if (report) { + console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) + } + + }) +} else { + run(`vue-cli-service build ${args}`) +} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..143cdc8 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,24 @@ +module.exports = { + moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], + transform: { + '^.+\\.vue$': 'vue-jest', + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': + 'jest-transform-stub', + '^.+\\.jsx?$': 'babel-jest' + }, + moduleNameMapper: { + '^@/(.*)$': '/src/$1' + }, + snapshotSerializers: ['jest-serializer-vue'], + testMatch: [ + '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' + ], + collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'], + coverageDirectory: '/tests/unit/coverage', + // 'collectCoverage': true, + 'coverageReporters': [ + 'lcov', + 'text-summary' + ], + testURL: 'http://localhost/' +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c13ef79 --- /dev/null +++ b/package.json @@ -0,0 +1,62 @@ +{ + "name": "vue-admin-template", + "version": "4.1.0", + "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", + "author": "Pan ", + "license": "MIT", + "scripts": { + "dev": "vue-cli-service serve", + "build:prod": "vue-cli-service build", + "build:stage": "vue-cli-service build --mode staging", + "preview": "node build/index.js --preview", + "lint": "eslint --ext .js,.vue src", + "test:unit": "jest --clearCache && vue-cli-service test:unit", + "test:ci": "npm run lint && npm run test:unit", + "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" + }, + "dependencies": { + "axios": "0.18.0", + "lib-flexible": "^0.3.2", + "normalize.css": "7.0.0", + "vant": "^1.6.19", + "vue": "2.6.10", + "vue-router": "3.0.6", + "vuex": "3.1.0" + }, + "devDependencies": { + "@babel/core": "7.0.0", + "@babel/register": "7.0.0", + "@vue/cli-plugin-babel": "3.6.0", + "@vue/cli-plugin-eslint": "3.6.0", + "@vue/cli-plugin-unit-jest": "3.6.3", + "@vue/cli-service": "3.6.0", + "@vue/test-utils": "1.0.0-beta.29", + "babel-core": "7.0.0-bridge.0", + "babel-eslint": "10.0.1", + "babel-jest": "23.6.0", + "babel-plugin-import": "^1.11.2", + "chalk": "2.4.2", + "connect": "3.6.6", + "eslint": "5.15.3", + "eslint-plugin-vue": "5.2.2", + "html-webpack-plugin": "3.2.0", + "node-sass": "^4.9.0", + "postcss-pxtorem": "^4.0.1", + "runjs": "^4.3.2", + "sass-loader": "^7.1.0", + "script-ext-html-webpack-plugin": "2.1.3", + "script-loader": "0.7.2", + "serve-static": "^1.13.2", + "svgo": "1.2.2", + "vue-template-compiler": "2.6.10" + }, + "engines": { + "node": ">=8.9", + "npm": ">= 3.0.0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..34b63ac Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9659973 --- /dev/null +++ b/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + + <%= webpackConfig.name %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..bc6212f --- /dev/null +++ b/src/App.vue @@ -0,0 +1,14 @@ + + diff --git a/src/api/user.js b/src/api/user.js new file mode 100644 index 0000000..a2e4c40 --- /dev/null +++ b/src/api/user.js @@ -0,0 +1,13 @@ +import qs from 'qs' +import request from '@/utils/request' +import { api } from '@/config' +// api +const { common_api } = api +// 登录 +export function login(params) { + return request({ + url: common_api + '/ruleCommon/queryrule', + method: 'post', + data: qs.stringify(params) + }) +} diff --git a/src/assets/404_images/404.png b/src/assets/404_images/404.png new file mode 100644 index 0000000..3d8e230 Binary files /dev/null and b/src/assets/404_images/404.png differ diff --git a/src/assets/404_images/404_cloud.png b/src/assets/404_images/404_cloud.png new file mode 100644 index 0000000..c6281d0 Binary files /dev/null and b/src/assets/404_images/404_cloud.png differ diff --git a/src/assets/css/element-ui.scss b/src/assets/css/element-ui.scss new file mode 100644 index 0000000..6af3bfd --- /dev/null +++ b/src/assets/css/element-ui.scss @@ -0,0 +1,44 @@ +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss new file mode 100644 index 0000000..3b4da51 --- /dev/null +++ b/src/assets/css/index.scss @@ -0,0 +1,65 @@ +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; + +body { + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +// main-container global css +.app-container { + padding: 20px; +} diff --git a/src/assets/css/mixin.scss b/src/assets/css/mixin.scss new file mode 100644 index 0000000..36b74bb --- /dev/null +++ b/src/assets/css/mixin.scss @@ -0,0 +1,28 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} diff --git a/src/assets/css/sidebar.scss b/src/assets/css/sidebar.scss new file mode 100644 index 0000000..3dad4c3 --- /dev/null +++ b/src/assets/css/sidebar.scss @@ -0,0 +1,209 @@ +#app { + + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: 100%; + position: fixed; + font-size: 0px; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + + .is-active>.el-submenu__title { + color: $subMenuActiveText !important; + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: $subMenuBg !important; + + &:hover { + background-color: $subMenuHover !important; + } + } + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .el-submenu__icon-arrow { + display: none; + } + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/src/assets/css/transition.scss b/src/assets/css/transition.scss new file mode 100644 index 0000000..4cb27cc --- /dev/null +++ b/src/assets/css/transition.scss @@ -0,0 +1,48 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/assets/css/variables.scss b/src/assets/css/variables.scss new file mode 100644 index 0000000..be55772 --- /dev/null +++ b/src/assets/css/variables.scss @@ -0,0 +1,25 @@ +// sidebar +$menuText:#bfcbd9; +$menuActiveText:#409EFF; +$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 + +$menuBg:#304156; +$menuHover:#263445; + +$subMenuBg:#1f2d3d; +$subMenuHover:#001528; + +$sideBarWidth: 210px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/src/config/env.development.js b/src/config/env.development.js new file mode 100644 index 0000000..a7d42b2 --- /dev/null +++ b/src/config/env.development.js @@ -0,0 +1,8 @@ +// 本地 +module.exports = { + title: '蚁小宝', + api: { + base_api: 'https://t1.top1buyer.com/admin', + common_api: 'https://t.top1buyer.com/common' + } +} diff --git a/src/config/env.production.js b/src/config/env.production.js new file mode 100644 index 0000000..3dc13c4 --- /dev/null +++ b/src/config/env.production.js @@ -0,0 +1,8 @@ +// 正式 +module.exports = { + title: '蚁小宝', + api: { + base_api: 'https://t1.top1buyer.com/admin', + common_api: 'https://t.top1buyer.com/common' + } +} diff --git a/src/config/env.staging.js b/src/config/env.staging.js new file mode 100644 index 0000000..f03c13c --- /dev/null +++ b/src/config/env.staging.js @@ -0,0 +1,7 @@ +module.exports = { + title: '蚁小宝', + api: { + base_api: 'https://t1.top1buyer.com/admin', + common_api: 'https://t.top1buyer.com/common' + } +} diff --git a/src/config/index.js b/src/config/index.js new file mode 100644 index 0000000..43a4df1 --- /dev/null +++ b/src/config/index.js @@ -0,0 +1,4 @@ +// 根据环境引入不同配置 process.env.NODE_ENV + const config = require('./env.' + process.env.ENV) + console.log( process.env.ENV) + module.exports = config diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c5f4a11 --- /dev/null +++ b/src/main.js @@ -0,0 +1,17 @@ +import Vue from 'vue' + +import 'normalize.css/normalize.css' // A modern alternative to CSS resets +import '@/assets/css/index.scss' // global css +//移动端适配 +import "lib-flexible/flexible.js" +import App from './App' +import store from './store' +import router from './router' +Vue.config.productionTip = false + +new Vue({ + el: '#app', + router, + store, + render: h => h(App) +}) diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..cad8970 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,22 @@ +import Vue from 'vue' +import Router from 'vue-router' + +Vue.use(Router) +export const constantRoutes = [ + { + path: '/', + component: () => import('@/views/home/index'), + meta: { + keepAlive: false + } + } +] + +const createRouter = () => + new Router({ + // mode: 'history', // require service support + scrollBehavior: () => ({ y: 0 }), + routes: constantRoutes + }) + +export default createRouter() diff --git a/src/store/getters.js b/src/store/getters.js new file mode 100644 index 0000000..4818f04 --- /dev/null +++ b/src/store/getters.js @@ -0,0 +1,3 @@ +const getters = { +} +export default getters diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..1ee10b9 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,15 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import getters from './getters' +import app from './modules/app' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + modules: { + app + }, + getters +}) + +export default store diff --git a/src/store/modules/app.js b/src/store/modules/app.js new file mode 100644 index 0000000..0e72d37 --- /dev/null +++ b/src/store/modules/app.js @@ -0,0 +1,18 @@ +const state = { + +} + +const mutations = { + +} + +const actions = { + +} + +export default { + namespaced: true, + state, + mutations, + actions +} diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..cd14bd5 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,110 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string} + */ +export function parseTime(time, cFormat) { + if (arguments.length === 0) { + return null + } + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' + let date + if (typeof time === 'object') { + date = time + } else { + if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { + time = parseInt(time) + } + if ((typeof time === 'number') && (time.toString().length === 10)) { + time = time * 1000 + } + date = new Date(time) + } + const formatObj = { + y: date.getFullYear(), + m: date.getMonth() + 1, + d: date.getDate(), + h: date.getHours(), + i: date.getMinutes(), + s: date.getSeconds(), + a: date.getDay() + } + const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { + let value = formatObj[key] + // Note: getDay() returns 0 on Sunday + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } + if (result.length > 0 && value < 10) { + value = '0' + value + } + return value || 0 + }) + return time_str +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } + const d = new Date(time) + const now = Date.now() + + const diff = (now - d) / 1000 + + if (diff < 30) { + return '刚刚' + } else if (diff < 3600) { + // less 1 hour + return Math.ceil(diff / 60) + '分钟前' + } else if (diff < 3600 * 24) { + return Math.ceil(diff / 3600) + '小时前' + } else if (diff < 3600 * 24 * 2) { + return '1天前' + } + if (option) { + return parseTime(time, option) + } else { + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = url.split('?')[1] + if (!search) { + return {} + } + return JSON.parse( + '{"' + + decodeURIComponent(search) + .replace(/"/g, '\\"') + .replace(/&/g, '","') + .replace(/=/g, '":"') + .replace(/\+/g, ' ') + + '"}' + ) +} diff --git a/src/utils/request.1.js b/src/utils/request.1.js new file mode 100644 index 0000000..b16d651 --- /dev/null +++ b/src/utils/request.1.js @@ -0,0 +1,76 @@ +import axios from 'axios' +import store from '@/store' + +// create an axios instance +const service = axios.create({ + baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url + withCredentials: true, // send cookies when cross-domain requests + timeout: 5000 // request timeout +}) + +// request interceptor +service.interceptors.request.use( + config => { + // do something before request is sent + if (store.getters.token) { + // let each request carry token + // ['X-Token'] is a custom headers key + // please modify it according to the actual situation + config.headers['X-Token'] = '' + } + return config + }, + error => { + // do something with request error + console.log(error) // for debug + return Promise.reject(error) + } +) + +// response interceptor +service.interceptors.response.use( + response => { + const res = response.data + + // if the custom code is not 20000, it is judged as an error. + if (res.code !== 20000) { + Message({ + message: res.message || 'error', + type: 'error', + duration: 5 * 1000 + }) + + // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; + if (res.code === 50008 || res.code === 50012 || res.code === 50014) { + // to re-login + MessageBox.confirm( + 'You have been logged out, you can cancel to stay on this page, or log in again', + 'Confirm logout', + { + confirmButtonText: 'Re-Login', + cancelButtonText: 'Cancel', + type: 'warning' + } + ).then(() => { + store.dispatch('user/resetToken').then(() => { + location.reload() + }) + }) + } + return Promise.reject(res.message || 'error') + } else { + return res + } + }, + error => { + console.log('err' + error) // for debug + Message({ + message: error.message, + type: 'error', + duration: 5 * 1000 + }) + return Promise.reject(error) + } +) + +export default service diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..f9e5eea --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,61 @@ +import axios from 'axios' +import store from '@/store' +import { Toast } from 'vant' +// create an axios instance +const service = axios.create({ + baseURL: process.env.BASE_URL, // url = base url + request url + withCredentials: true, // send cookies when cross-domain requests + timeout: 5000 // request timeout +}) + +// request拦截器 request interceptor +service.interceptors.request.use( + config => { + // 不传递默认开启loading + if (!config.hideloading) { + // loading + Toast.loading({ + forbidClick: true + }) + } + if (store.getters.token) { + config.headers['X-Token'] = '' + } + return config + }, + error => { + // do something with request error + console.log(error) // for debug + return Promise.reject(error) + } +) +// respone拦截器 +service.interceptors.response.use( + response => { + Toast.clear() + // 如果是数据流 + if (response.config.responseType === 'arraybuffer') { + return response.data + } else { + const res = response.data + if (res.status !== 200) { + // 登录超时,重新登录 + if (res.status === 401) { + store.dispatch('FedLogOut').then(() => { + location.reload() + }) + } + return Promise.reject(res || 'error') + } else { + return Promise.resolve(res) + } + } + }, + error => { + Toast.clear() + console.log('err' + error) // for debug + return Promise.reject(error) + } +) + +export default service diff --git a/src/utils/signature.js b/src/utils/signature.js new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/validate.js b/src/utils/validate.js new file mode 100644 index 0000000..8d962ad --- /dev/null +++ b/src/utils/validate.js @@ -0,0 +1,20 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * @param {string} path + * @returns {Boolean} + */ +export function isExternal(path) { + return /^(https?:|mailto:|tel:)/.test(path) +} + +/** + * @param {string} str + * @returns {Boolean} + */ +export function validUsername(str) { + const valid_map = ['admin', 'editor'] + return valid_map.indexOf(str.trim()) >= 0 +} diff --git a/src/views/home/index.vue b/src/views/home/index.vue new file mode 100644 index 0000000..93a0098 --- /dev/null +++ b/src/views/home/index.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..8ec82b8 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,110 @@ +'use strict' +const path = require('path') +const defaultSettings = require('./src/config/index.js') +function resolve(dir) { + return path.join(__dirname, dir) +} + +const name = defaultSettings.title || 'vue mobile template' // page title +const port = 9018 // dev port +module.exports = { + publicPath: '/', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: port, + open: true, + overlay: { + warnings: false, + errors: true + } + }, + // css: { + // loaderOptions: { + // postcss: { + // plugins: [ + // require('postcss-plugin-px2rem')({ + // rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 + // // unitPrecision: 5, //允许REM单位增长到的十进制数字。 + // // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。 + // // propBlackList: [], //黑名单 + // exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 + // // selectorBlackList: [], //要忽略并保留为px的选择器 + // // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。 + // // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。 + // mediaQuery: false, // （布尔值）允许在媒体查询中转换px。 + // minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0 + // }) + // ] + // } + // } + // }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + } + }, + chainWebpack(config) { + config.plugins.delete('preload') // TODO: need test + config.plugins.delete('prefetch') // TODO: need test + // set preserveWhitespace + config.module + .rule('vue') + .use('vue-loader') + .loader('vue-loader') + .tap(options => { + options.compilerOptions.preserveWhitespace = true + return options + }) + .end() + + config + // https://webpack.js.org/configuration/devtool/#development + .when(process.env.NODE_ENV === 'development', config => + config.devtool('cheap-source-map') + ) + + config.when(process.env.NODE_ENV !== 'development', config => { + console.log(config) + config + .plugin('ScriptExtHtmlWebpackPlugin') + .after('html') + .use('script-ext-html-webpack-plugin', [ + { + // `runtime` must same as runtimeChunk name. default is `runtime` + inline: /runtime\..*\.js$/ + } + ]) + .end() + config.optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' // only package third parties that are initially dependent + }, + // elementUI: { + // name: 'chunk-elementUI', // split elementUI into a single package + // priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app + // test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm + // }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), // can customize your rules + minChunks: 3, // minimum common number + priority: 5, + reuseExistingChunk: true + } + } + }) + config.optimization.runtimeChunk('single') + }) + } +}