caoliancun
/
vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #123 from guoranred/master

Browse Source 
add nprogress and cdn assets
master
iczer 5 years ago committed by GitHub
parent d14d1ee9b8 dcf65935e1
commit 7b23be808f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 192 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      babel.config.js
  2. 7
      package.json
  3. 8
      public/index.html
  4. 1
      src/layouts/header/HeaderSearch.vue
  5. 33
      src/router/guards.js
  6. 1
      src/theme/default/index.less
  7. 76
      src/theme/default/nprogress.less
  8. 63
      vue.config.js

10
babel.config.js
Unescape View File

@ -1,5 +1,13 @@
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const plugins = []
if (IS_PROD) {
plugins.push('transform-remove-console')
}
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
] ],
plugins
} }

7
package.json
Unescape View File

@ -29,7 +29,8 @@
"vue-i18n": "^8.18.2", "vue-i18n": "^8.18.2",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",
"vuedraggable": "^2.23.2", "vuedraggable": "^2.23.2",
"vuex": "^3.4.0" "vuex": "^3.4.0",
"nprogress": "^0.2.0"
}, },
"devDependencies": { "devDependencies": {
"@ant-design/colors": "^4.0.1", "@ant-design/colors": "^4.0.1",
@ -50,7 +51,9 @@
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"vuepress": "^1.5.2", "vuepress": "^1.5.2",
"webpack-theme-color-replacer": "^1.3.12", "webpack-theme-color-replacer": "^1.3.12",
"whatwg-fetch": "^3.0.0" "whatwg-fetch": "^3.0.0",
"compression-webpack-plugin": "^2.0.0",
"babel-plugin-transform-remove-console": "^6.9.4"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

8
public/index.html
Unescape View File

@ -6,12 +6,20 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head> </head>
<body class="beauty-scroll"> <body class="beauty-scroll">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- require cdn assets js -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

1
src/layouts/header/HeaderSearch.vue
Unescape View File

@ -3,6 +3,7 @@
<a-icon type="search" class="search-icon" @click="enterSearchMode"/> <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
<a-auto-complete <a-auto-complete
ref="input" ref="input"
:getPopupContainer="e => {return e.parentNode || document.body}"
:dataSource="dataSource" :dataSource="dataSource"
:class="['search-input', searchMode ? 'enter' : 'leave']" :class="['search-input', searchMode ? 'enter' : 'leave']"
placeholder="站内搜索" placeholder="站内搜索"

33
src/router/guards.js
Unescape View File

@ -1,6 +1,23 @@
import {hasAuthority} from '@/utils/authority-utils' import {hasAuthority} from '@/utils/authority-utils'
import {loginIgnore} from '@/router/index' import {loginIgnore} from '@/router/index'
import {checkAuthorization} from '@/utils/request' import {checkAuthorization} from '@/utils/request'
import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false })
/**
* 进度条开始
* @param to
* @param form
* @param next
*/
const progressStart = (to, from, next) => {
// start progress bar
if (!NProgress.isStarted()) {
NProgress.start()
}
next()
}
/** /**
* 登录守卫 * 登录守卫
@ -33,6 +50,7 @@ const authorityGuard = (to, from, next, options) => {
if (!hasAuthority(to, permissions, roles)) { if (!hasAuthority(to, permissions, roles)) {
message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`) message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`)
next({path: '/403'}) next({path: '/403'})
NProgress.done()
} else { } else {
next() next()
} }
@ -61,7 +79,18 @@ const redirectGuard = (to, from, next, options) => {
next() next()
} }
/**
* 进度条结束
* @param to
* @param form
* @param options
*/
const progressDone = () => {
// finish progress bar
NProgress.done()
}
export default { export default {
beforeEach: [loginGuard, authorityGuard, redirectGuard], beforeEach: [progressStart, loginGuard, authorityGuard, redirectGuard],
afterEach: [] afterEach: [progressDone]
} }

1
src/theme/default/index.less
Unescape View File

@ -1,2 +1,3 @@
@import "color"; @import "color";
@import "style"; @import "style";
@import "nprogress";

76
src/theme/default/nprogress.less
Unescape View File

@ -0,0 +1,76 @@
@import '~ant-design-vue/lib/style/themes/default';
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: @primary-color;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: @primary-color;
border-left-color: @primary-color;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

63
vue.config.js
Unescape View File

@ -1,7 +1,39 @@
let path = require('path') let path = require('path')
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer') const ThemeColorReplacer = require('webpack-theme-color-replacer')
const {getThemeColors, modifyVars} = require('./src/utils/themeUtil') const {getThemeColors, modifyVars} = require('./src/utils/themeUtil')
const {resolveCss} = require('./src/utils/theme-color-replacer-extend') const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProd = process.env.NODE_ENV === 'production'
const assetsCDN = {
// webpack build externals
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
nprogress: 'NProgress',
clipboard: 'ClipboardJS',
'@antv/data-set': 'DataSet',
'js-cookie': 'Cookies'
},
css: [
],
js: [
'//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
'//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
'//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
'//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
]
}
module.exports = { module.exports = {
devServer: { devServer: {
// proxy: { // proxy: {
@ -22,6 +54,9 @@ module.exports = {
}, },
configureWebpack: config => { configureWebpack: config => {
config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"]; config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
config.performance = {
hints: false
}
config.plugins.push( config.plugins.push(
new ThemeColorReplacer({ new ThemeColorReplacer({
fileName: 'css/theme-colors-[contenthash:8].css', fileName: 'css/theme-colors-[contenthash:8].css',
@ -30,16 +65,40 @@ module.exports = {
resolveCss resolveCss
}) })
) )
// Ignore all locale files of moment.js
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
// 生产环境下将资源压缩成gzip格式
if (isProd) {
// add `CompressionWebpack` plugin to webpack plugins
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}))
}
// if prod, add externals
if (isProd) {
config.externals = assetsCDN.externals
}
}, },
chainWebpack: config => { chainWebpack: config => {
// 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
if (process.env.NODE_ENV === 'production') { if (isProd) {
config.plugin('optimize-css') config.plugin('optimize-css')
.tap(args => { .tap(args => {
args[0].cssnanoOptions.preset[1].colormin = false args[0].cssnanoOptions.preset[1].colormin = false
return args return args
}) })
} }
// 生产环境下使用CDN
if (isProd) {
config.plugin('html')
.tap(args => {
args[0].cdn = assetsCDN
return args
})
}
}, },
css: { css: {
loaderOptions: { loaderOptions: {
@ -51,7 +110,7 @@ module.exports = {
} }
} }
}, },
publicPath: process.env.NODE_ENV === 'production' ? '/vue-antd-admin/' : '/', publicPath: isProd ? '/vue-antd-admin/' : '/',
outputDir: 'dist', outputDir: 'dist',
assetsDir: 'static', assetsDir: 'static',
productionSourceMap: false productionSourceMap: false

Write Preview
Loading…
Cancel
Save