diff --git a/README-zh.md b/README-zh.md index 03bc20f..94ece97 100644 --- a/README-zh.md +++ b/README-zh.md @@ -1,29 +1,30 @@ # vueAdmin-template -> 这是一个 极简的vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 +> 这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 [线上地址](http://panjiachen.github.io/vueAdmin-template) ## Extra -如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control) -  - ## 相关项目 - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control) + +## 相关项目 + +[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) + +[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) 写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目: - - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) - - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) - - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - - [手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) - - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836) +- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) +- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) +- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) +- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) +- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) ## Build Setup -``` bash - +```bash # Clone project git clone https://github.com/PanJiaChen/vueAdmin-template.git @@ -44,14 +45,17 @@ npm run build --report ``` ## Demo + ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif) -### Element-Ui 使用cdn教程 +### Element-Ui 使用 cdn 教程 + 首先找到 `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: { vue: 'Vue', @@ -59,7 +63,7 @@ externals: { } ``` -之后还有一个小细节是如果你用了全局对象方式引入vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731) +之后还有一个小细节是如果你用了全局对象方式引入 vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731) 最终你可以使用 `npm run build --report` 查看效果 如图： @@ -70,8 +74,7 @@ externals: { **[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)** ## License + [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. Copyright (c) 2017-present PanJiaChen - - diff --git a/README.md b/README.md index 457ecc0..2c8d39f 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,7 @@ ## Build Setup -``` bash - +```bash # Clone project git clone https://github.com/PanJiaChen/vueAdmin-template.git @@ -27,17 +26,21 @@ npm run build --report ``` ## Demo + ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif) ## 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) ## Related Project - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) + +[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) ### Element-Ui using cdn tutorial + 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. @@ -53,7 +56,7 @@ externals: { ``` Finally there is a small detail to pay attention to that if you import vue in global, you don't need to manually `Vue.use(Vuex)`, it will be automatically mounted, see - [issue](https://github.com/vuejs/vuex/issues/731) +[issue](https://github.com/vuejs/vuex/issues/731) And you can use `npm run build --report` to see the effect @@ -64,8 +67,8 @@ Pictured: **[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)** - ## License + [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. Copyright (c) 2017-present PanJiaChen diff --git a/config/index.js b/config/index.js index 7223ffd..615924d 100644 --- a/config/index.js +++ b/config/index.js @@ -6,7 +6,6 @@ const path = require('path') module.exports = { dev: { - // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', @@ -40,7 +39,7 @@ module.exports = { // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. - cssSourceMap: false, + cssSourceMap: false }, build: { @@ -80,6 +79,8 @@ module.exports = { // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report || false, + + // `npm run build:prod --generate_report` generateAnalyzerReport: process.env.npm_config_generate_report || false } } diff --git a/src/icons/index.js b/src/icons/index.js index 14e2e13..d9fe4d8 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import SvgIcon from '@/components/SvgIcon'// svg组件 +import SvgIcon from '@/components/SvgIcon' // svg组件 // register globally Vue.component('svg-icon', SvgIcon) diff --git a/src/main.js b/src/main.js index c04fdeb..1a38d20 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ import Vue from 'vue' -import 'normalize.css/normalize.css'// A modern alternative to CSS resets +import 'normalize.css/normalize.css' // A modern alternative to CSS resets import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' diff --git a/src/utils/index.js b/src/utils/index.js index 9657c9c..93d4974 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -25,7 +25,7 @@ export function parseTime(time, cFormat) { } const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key] - if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] + if (key === 'a') { return ['一', '二', '三', '四', '五', '六', '日'][value - 1] } if (result.length > 0 && value < 10) { value = '0' + value } @@ -43,7 +43,8 @@ export function formatTime(time, option) { if (diff < 30) { return '刚刚' - } else if (diff < 3600) { // less 1 hour + } else if (diff < 3600) { + // less 1 hour return Math.ceil(diff / 60) + '分钟前' } else if (diff < 3600 * 24) { return Math.ceil(diff / 3600) + '小时前' @@ -53,6 +54,16 @@ export function formatTime(time, option) { if (option) { return parseTime(time, option) } else { - return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) } } diff --git a/src/utils/request.js b/src/utils/request.js index 10f12db..50d423a 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -10,23 +10,26 @@ const service = axios.create({ }) // request拦截器 -service.interceptors.request.use(config => { - if (store.getters.token) { - config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 +service.interceptors.request.use( + config => { + if (store.getters.token) { + config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 + } + return config + }, + error => { + // Do something with request error + console.log(error) // for debug + Promise.reject(error) } - return config -}, error => { - // Do something with request error - console.log(error) // for debug - Promise.reject(error) -}) +) // respone拦截器 service.interceptors.response.use( response => { - /** - * code为非20000是抛错 可结合自己业务进行修改 - */ + /** + * code为非20000是抛错 可结合自己业务进行修改 + */ const res = response.data if (res.code !== 20000) { Message({ @@ -37,13 +40,17 @@ service.interceptors.response.use( // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { - MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { - confirmButtonText: '重新登录', - cancelButtonText: '取消', - type: 'warning' - }).then(() => { + MessageBox.confirm( + '你已被登出，可以取消继续留在该页面，或者重新登录', + '确定登出', + { + confirmButtonText: '重新登录', + cancelButtonText: '取消', + type: 'warning' + } + ).then(() => { store.dispatch('FedLogOut').then(() => { - location.reload()// 为了重新实例化vue-router对象 避免bug + location.reload() // 为了重新实例化vue-router对象 避免bug }) }) } @@ -53,7 +60,7 @@ service.interceptors.response.use( } }, error => { - console.log('err' + error)// for debug + console.log('err' + error) // for debug Message({ message: error.message, type: 'error', diff --git a/src/utils/validate.js b/src/utils/validate.js index 834a8dd..e110310 100644 --- a/src/utils/validate.js +++ b/src/utils/validate.js @@ -30,4 +30,3 @@ export function validatAlphabets(str) { const reg = /^[A-Za-z]+$/ return reg.test(str) } -