format
parent
ba71a4b5bc
commit
1eac664f65
13
README-zh.md
13
README-zh.md
|
@ -5,25 +5,26 @@
|
||||||
[线上地址](http://panjiachen.github.io/vueAdmin-template)
|
[线上地址](http://panjiachen.github.io/vueAdmin-template)
|
||||||
|
|
||||||
## Extra
|
## Extra
|
||||||
|
|
||||||
如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
|
如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
|
||||||
|
|
||||||
## 相关项目
|
## 相关项目
|
||||||
|
|
||||||
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||||
|
|
||||||
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
|
写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
|
||||||
|
|
||||||
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
|
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
|
||||||
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
|
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
|
||||||
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
|
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
|
||||||
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
|
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
|
||||||
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||||
|
|
||||||
|
|
||||||
## Build Setup
|
## Build Setup
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
# Clone project
|
# Clone project
|
||||||
git clone https://github.com/PanJiaChen/vueAdmin-template.git
|
git clone https://github.com/PanJiaChen/vueAdmin-template.git
|
||||||
|
|
||||||
|
@ -44,14 +45,17 @@ npm run build --report
|
||||||
```
|
```
|
||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Element-Ui 使用 cdn 教程
|
### Element-Ui 使用 cdn 教程
|
||||||
|
|
||||||
首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
|
首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
|
||||||
|
|
||||||
引入 Element 的 css 和 js ,并且引入 vue 。因为 Element-Ui 是依赖 vue 的,所以必须在它之前引入 vue 。
|
引入 Element 的 css 和 js ,并且引入 vue 。因为 Element-Ui 是依赖 vue 的,所以必须在它之前引入 vue 。
|
||||||
|
|
||||||
之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让 webpack 不打包 vue 和 element
|
之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让 webpack 不打包 vue 和 element
|
||||||
|
|
||||||
```
|
```
|
||||||
externals: {
|
externals: {
|
||||||
vue: 'Vue',
|
vue: 'Vue',
|
||||||
|
@ -70,8 +74,7 @@ externals: {
|
||||||
**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
|
**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
|
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
|
||||||
|
|
||||||
Copyright (c) 2017-present PanJiaChen
|
Copyright (c) 2017-present PanJiaChen
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
## Build Setup
|
## Build Setup
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
# Clone project
|
# Clone project
|
||||||
git clone https://github.com/PanJiaChen/vueAdmin-template.git
|
git clone https://github.com/PanJiaChen/vueAdmin-template.git
|
||||||
|
|
||||||
|
@ -27,17 +26,21 @@ npm run build --report
|
||||||
```
|
```
|
||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Extra
|
## Extra
|
||||||
|
|
||||||
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
|
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
|
||||||
|
|
||||||
## Related Project
|
## Related Project
|
||||||
|
|
||||||
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||||
|
|
||||||
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
### Element-Ui using cdn tutorial
|
### Element-Ui using cdn tutorial
|
||||||
|
|
||||||
First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
|
First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
|
||||||
|
|
||||||
Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it.
|
Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it.
|
||||||
|
@ -64,8 +67,8 @@ Pictured:
|
||||||
|
|
||||||
**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
|
**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
|
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
|
||||||
|
|
||||||
Copyright (c) 2017-present PanJiaChen
|
Copyright (c) 2017-present PanJiaChen
|
||||||
|
|
|
@ -6,7 +6,6 @@ const path = require('path')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
dev: {
|
dev: {
|
||||||
|
|
||||||
// Paths
|
// Paths
|
||||||
assetsSubDirectory: 'static',
|
assetsSubDirectory: 'static',
|
||||||
assetsPublicPath: '/',
|
assetsPublicPath: '/',
|
||||||
|
@ -40,7 +39,7 @@ module.exports = {
|
||||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||||
// In our experience, they generally work as expected,
|
// In our experience, they generally work as expected,
|
||||||
// just be aware of this issue when enabling this option.
|
// just be aware of this issue when enabling this option.
|
||||||
cssSourceMap: false,
|
cssSourceMap: false
|
||||||
},
|
},
|
||||||
|
|
||||||
build: {
|
build: {
|
||||||
|
@ -80,6 +79,8 @@ module.exports = {
|
||||||
// `npm run build --report`
|
// `npm run build --report`
|
||||||
// Set to `true` or `false` to always turn it on or off
|
// Set to `true` or `false` to always turn it on or off
|
||||||
bundleAnalyzerReport: process.env.npm_config_report || false,
|
bundleAnalyzerReport: process.env.npm_config_report || false,
|
||||||
|
|
||||||
|
// `npm run build:prod --generate_report`
|
||||||
generateAnalyzerReport: process.env.npm_config_generate_report || false
|
generateAnalyzerReport: process.env.npm_config_generate_report || false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@ export function parseTime(time, cFormat) {
|
||||||
}
|
}
|
||||||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||||
let value = formatObj[key]
|
let value = formatObj[key]
|
||||||
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
|
if (key === 'a') { return ['一', '二', '三', '四', '五', '六', '日'][value - 1] }
|
||||||
if (result.length > 0 && value < 10) {
|
if (result.length > 0 && value < 10) {
|
||||||
value = '0' + value
|
value = '0' + value
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,8 @@ export function formatTime(time, option) {
|
||||||
|
|
||||||
if (diff < 30) {
|
if (diff < 30) {
|
||||||
return '刚刚'
|
return '刚刚'
|
||||||
} else if (diff < 3600) { // less 1 hour
|
} else if (diff < 3600) {
|
||||||
|
// less 1 hour
|
||||||
return Math.ceil(diff / 60) + '分钟前'
|
return Math.ceil(diff / 60) + '分钟前'
|
||||||
} else if (diff < 3600 * 24) {
|
} else if (diff < 3600 * 24) {
|
||||||
return Math.ceil(diff / 3600) + '小时前'
|
return Math.ceil(diff / 3600) + '小时前'
|
||||||
|
@ -53,6 +54,16 @@ export function formatTime(time, option) {
|
||||||
if (option) {
|
if (option) {
|
||||||
return parseTime(time, option)
|
return parseTime(time, option)
|
||||||
} else {
|
} else {
|
||||||
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
|
return (
|
||||||
|
d.getMonth() +
|
||||||
|
1 +
|
||||||
|
'月' +
|
||||||
|
d.getDate() +
|
||||||
|
'日' +
|
||||||
|
d.getHours() +
|
||||||
|
'时' +
|
||||||
|
d.getMinutes() +
|
||||||
|
'分'
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,16 +10,19 @@ const service = axios.create({
|
||||||
})
|
})
|
||||||
|
|
||||||
// request拦截器
|
// request拦截器
|
||||||
service.interceptors.request.use(config => {
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
if (store.getters.token) {
|
if (store.getters.token) {
|
||||||
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||||
}
|
}
|
||||||
return config
|
return config
|
||||||
}, error => {
|
},
|
||||||
|
error => {
|
||||||
// Do something with request error
|
// Do something with request error
|
||||||
console.log(error) // for debug
|
console.log(error) // for debug
|
||||||
Promise.reject(error)
|
Promise.reject(error)
|
||||||
})
|
}
|
||||||
|
)
|
||||||
|
|
||||||
// respone拦截器
|
// respone拦截器
|
||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
|
@ -37,11 +40,15 @@ service.interceptors.response.use(
|
||||||
|
|
||||||
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
||||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||||
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
|
MessageBox.confirm(
|
||||||
|
'你已被登出,可以取消继续留在该页面,或者重新登录',
|
||||||
|
'确定登出',
|
||||||
|
{
|
||||||
confirmButtonText: '重新登录',
|
confirmButtonText: '重新登录',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(() => {
|
}
|
||||||
|
).then(() => {
|
||||||
store.dispatch('FedLogOut').then(() => {
|
store.dispatch('FedLogOut').then(() => {
|
||||||
location.reload() // 为了重新实例化vue-router对象 避免bug
|
location.reload() // 为了重新实例化vue-router对象 避免bug
|
||||||
})
|
})
|
||||||
|
|
|
@ -30,4 +30,3 @@ export function validatAlphabets(str) {
|
||||||
const reg = /^[A-Za-z]+$/
|
const reg = /^[A-Za-z]+$/
|
||||||
return reg.test(str)
|
return reg.test(str)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue