7 |
9 |
3 |
13 |
14 |
15 |
16 |
32 |
33 |
45 |
--------------------------------------------------------------------------------
/src/layout/mixin/ResizeHandler.js:
--------------------------------------------------------------------------------
1 | import store from '@/store'
2 |
3 | const { body } = document
4 | const WIDTH = 992 // refer to Bootstrap's responsive design
5 |
6 | export default {
7 | watch: {
8 | $route(route) {
9 | if (this.device === 'mobile' && this.sidebar.opened) {
10 | store.dispatch('app/closeSideBar', { withoutAnimation: false })
11 | }
12 | }
13 | },
14 | beforeMount() {
15 | window.addEventListener('resize', this.$_resizeHandler)
16 | },
17 | beforeDestroy() {
18 | window.removeEventListener('resize', this.$_resizeHandler)
19 | },
20 | mounted() {
21 | const isMobile = this.$_isMobile()
22 | if (isMobile) {
23 | store.dispatch('app/toggleDevice', 'mobile')
24 | store.dispatch('app/closeSideBar', { withoutAnimation: true })
25 | }
26 | },
27 | methods: {
28 | // use $_ for mixins properties
29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30 | $_isMobile() {
31 | const rect = body.getBoundingClientRect()
32 | return rect.width - 1 < WIDTH
33 | },
34 | $_resizeHandler() {
35 | if (!document.hidden) {
36 | const isMobile = this.$_isMobile()
37 | store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
38 |
39 | if (isMobile) {
40 | store.dispatch('app/closeSideBar', { withoutAnimation: true })
41 | }
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
47 |
48 |
63 |
--------------------------------------------------------------------------------
/mock/index.js:
--------------------------------------------------------------------------------
1 | const Mock = require('mockjs')
2 | const { param2Obj } = require('./utils')
3 |
4 | const user = require('./user')
5 | const table = require('./table')
6 |
7 | const mocks = [
8 | ...user,
9 | ...table
10 | ]
11 |
12 | // for front mock
13 | // please use it cautiously, it will redefine XMLHttpRequest,
14 | // which will cause many of your third-party libraries to be invalidated(like progress event).
15 | function mockXHR() {
16 | // mock patch
17 | // https://github.com/nuysoft/Mock/issues/300
18 | Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
19 | Mock.XHR.prototype.send = function() {
20 | if (this.custom.xhr) {
21 | this.custom.xhr.withCredentials = this.withCredentials || false
22 |
23 | if (this.responseType) {
24 | this.custom.xhr.responseType = this.responseType
25 | }
26 | }
27 | this.proxy_send(...arguments)
28 | }
29 |
30 | function XHR2ExpressReqWrap(respond) {
31 | return function(options) {
32 | let result = null
33 | if (respond instanceof Function) {
34 | const { body, type, url } = options
35 | // https://expressjs.com/en/4x/api.html#req
36 | result = respond({
37 | method: type,
38 | body: JSON.parse(body),
39 | query: param2Obj(url)
40 | })
41 | } else {
42 | result = respond
43 | }
44 | return Mock.mock(result)
45 | }
46 | }
47 |
48 | for (const i of mocks) {
49 | Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
50 | }
51 | }
52 |
53 | module.exports = {
54 | mocks,
55 | mockXHR
56 | }
57 |
58 |
--------------------------------------------------------------------------------
/src/layout/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
15 |
17 |
18 |
19 |
20 |
21 |
57 |
--------------------------------------------------------------------------------
/src/icons/svg/tree.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/tree/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
17 |
78 |
79 |
--------------------------------------------------------------------------------
/mock/user.js:
--------------------------------------------------------------------------------
1 |
2 | const tokens = {
3 | admin: {
4 | token: 'admin-token'
5 | },
6 | editor: {
7 | token: 'editor-token'
8 | }
9 | }
10 |
11 | const users = {
12 | 'admin-token': {
13 | roles: ['admin'],
14 | introduction: 'I am a super administrator',
15 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
16 | name: 'Super Admin'
17 | },
18 | 'editor-token': {
19 | roles: ['editor'],
20 | introduction: 'I am an editor',
21 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
22 | name: 'Normal Editor'
23 | }
24 | }
25 |
26 | module.exports = [
27 | // user login
28 | {
29 | url: '/vue-admin-template/user/login',
30 | type: 'post',
31 | response: config => {
32 | const { username } = config.body
33 | const token = tokens[username]
34 |
35 | // mock error
36 | if (!token) {
37 | return {
38 | code: 60204,
39 | message: 'Account and password are incorrect.'
40 | }
41 | }
42 |
43 | return {
44 | code: 20000,
45 | data: token
46 | }
47 | }
48 | },
49 |
50 | // get user info
51 | {
52 | url: '/vue-admin-template/user/info\.*',
53 | type: 'get',
54 | response: config => {
55 | const { token } = config.query
56 | const info = users[token]
57 |
58 | // mock error
59 | if (!info) {
60 | return {
61 | code: 50008,
62 | message: 'Login failed, unable to get user details.'
63 | }
64 | }
65 |
66 | return {
67 | code: 20000,
68 | data: info
69 | }
70 | }
71 | },
72 |
73 | // user logout
74 | {
75 | url: '/vue-admin-template/user/logout',
76 | type: 'post',
77 | response: _ => {
78 | return {
79 | code: 20000,
80 | data: 'success'
81 | }
82 | }
83 | }
84 | ]
85 |
--------------------------------------------------------------------------------
/src/permission.js:
--------------------------------------------------------------------------------
1 | import router from './router'
2 | import store from './store'
3 | import { Message } from 'element-ui'
4 | import NProgress from 'nprogress' // progress bar
5 | import 'nprogress/nprogress.css' // progress bar style
6 | import { getToken } from '@/utils/auth' // get token from cookie
7 | import getPageTitle from '@/utils/get-page-title'
8 |
9 | NProgress.configure({ showSpinner: false }) // NProgress Configuration
10 |
11 | const whiteList = ['/login'] // no redirect whitelist
12 |
13 | router.beforeEach(async(to, from, next) => {
14 | // start progress bar
15 | NProgress.start()
16 |
17 | // set page title
18 | document.title = getPageTitle(to.meta.title)
19 |
20 | // determine whether the user has logged in
21 | const hasToken = getToken()
22 |
23 | if (hasToken) {
24 | if (to.path === '/login') {
25 | // if is logged in, redirect to the home page
26 | next({ path: '/' })
27 | NProgress.done()
28 | } else {
29 | const hasGetUserInfo = store.getters.name
30 | if (hasGetUserInfo) {
31 | next()
32 | } else {
33 | try {
34 | // get user info
35 | await store.dispatch('user/getInfo')
36 |
37 | next()
38 | } catch (error) {
39 | // remove token and go to login page to re-login
40 | await store.dispatch('user/resetToken')
41 | Message.error(error || 'Has Error')
42 | next(`/login?redirect=${to.path}`)
43 | NProgress.done()
44 | }
45 | }
46 | }
47 | } else {
48 | /* has no token*/
49 |
50 | if (whiteList.indexOf(to.path) !== -1) {
51 | // in the free login whitelist, go directly
52 | next()
53 | } else {
54 | // other pages that do not have permission to access are redirected to the login page.
55 | next(`/login?redirect=${to.path}`)
56 | NProgress.done()
57 | }
58 | }
59 | })
60 |
61 | router.afterEach(() => {
62 | // finish progress bar
63 | NProgress.done()
64 | })
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-admin-template",
3 | "version": "4.4.0",
4 | "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
5 | "author": "Pan
3 |
4 |
5 | ![]()
6 |
8 |
9 | ![]()
10 |
12 |
13 |
14 |
15 |
16 |
33 |
34 |
83 |
--------------------------------------------------------------------------------
/src/icons/svg/dashboard.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/layout/index.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
7 |{{ title }}
11 |
3 |
4 |
12 |
13 |
14 |
52 |
53 |
94 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
11 |
3 |
11 |
12 |
13 | {{ scope.$index }}
14 |
15 |
16 |
17 |
18 | {{ scope.row.title }}
19 |
20 |
21 |
22 |
23 | {{ scope.row.author }}
24 |
25 |
26 |
27 |
28 | {{ scope.row.pageviews }}
29 |
30 |
31 |
32 |
33 | {{ scope.row.status }}
34 |
35 |
36 |
37 |
38 |
39 | {{ scope.row.display_time }}
40 |
41 |
42 |
43 |
44 |
45 |
46 |
80 |
--------------------------------------------------------------------------------
/src/icons/svg/form.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/store/modules/user.js:
--------------------------------------------------------------------------------
1 | import { login, logout, getInfo } from '@/api/user'
2 | import { getToken, setToken, removeToken } from '@/utils/auth'
3 | import { resetRouter } from '@/router'
4 |
5 | const getDefaultState = () => {
6 | return {
7 | token: getToken(),
8 | name: '',
9 | avatar: ''
10 | }
11 | }
12 |
13 | const state = getDefaultState()
14 |
15 | const mutations = {
16 | RESET_STATE: (state) => {
17 | Object.assign(state, getDefaultState())
18 | },
19 | SET_TOKEN: (state, token) => {
20 | state.token = token
21 | },
22 | SET_NAME: (state, name) => {
23 | state.name = name
24 | },
25 | SET_AVATAR: (state, avatar) => {
26 | state.avatar = avatar
27 | }
28 | }
29 |
30 | const actions = {
31 | // user login
32 | login({ commit }, userInfo) {
33 | const { username, password } = userInfo
34 | return new Promise((resolve, reject) => {
35 | login({ username: username.trim(), password: password }).then(response => {
36 | const { data } = response
37 | commit('SET_TOKEN', data.token)
38 | setToken(data.token)
39 | resolve()
40 | }).catch(error => {
41 | reject(error)
42 | })
43 | })
44 | },
45 |
46 | // get user info
47 | getInfo({ commit, state }) {
48 | return new Promise((resolve, reject) => {
49 | getInfo(state.token).then(response => {
50 | const { data } = response
51 |
52 | if (!data) {
53 | return reject('Verification failed, please Login again.')
54 | }
55 |
56 | const { name, avatar } = data
57 |
58 | commit('SET_NAME', name)
59 | commit('SET_AVATAR', avatar)
60 | resolve(data)
61 | }).catch(error => {
62 | reject(error)
63 | })
64 | })
65 | },
66 |
67 | // user logout
68 | logout({ commit, state }) {
69 | return new Promise((resolve, reject) => {
70 | logout(state.token).then(() => {
71 | removeToken() // must remove token first
72 | resetRouter()
73 | commit('RESET_STATE')
74 | resolve()
75 | }).catch(error => {
76 | reject(error)
77 | })
78 | })
79 | },
80 |
81 | // remove token
82 | resetToken({ commit }) {
83 | return new Promise(resolve => {
84 | removeToken() // must remove token first
85 | commit('RESET_STATE')
86 | resolve()
87 | })
88 | }
89 | }
90 |
91 | export default {
92 | namespaced: true,
93 | state,
94 | mutations,
95 | actions
96 | }
97 |
98 |
--------------------------------------------------------------------------------
/mock/mock-server.js:
--------------------------------------------------------------------------------
1 | const chokidar = require('chokidar')
2 | const bodyParser = require('body-parser')
3 | const chalk = require('chalk')
4 | const path = require('path')
5 | const Mock = require('mockjs')
6 |
7 | const mockDir = path.join(process.cwd(), 'mock')
8 |
9 | function registerRoutes(app) {
10 | let mockLastIndex
11 | const { mocks } = require('./index.js')
12 | const mocksForServer = mocks.map(route => {
13 | return responseFake(route.url, route.type, route.response)
14 | })
15 | for (const mock of mocksForServer) {
16 | app[mock.type](mock.url, mock.response)
17 | mockLastIndex = app._router.stack.length
18 | }
19 | const mockRoutesLength = Object.keys(mocksForServer).length
20 | return {
21 | mockRoutesLength: mockRoutesLength,
22 | mockStartIndex: mockLastIndex - mockRoutesLength
23 | }
24 | }
25 |
26 | function unregisterRoutes() {
27 | Object.keys(require.cache).forEach(i => {
28 | if (i.includes(mockDir)) {
29 | delete require.cache[require.resolve(i)]
30 | }
31 | })
32 | }
33 |
34 | // for mock server
35 | const responseFake = (url, type, respond) => {
36 | return {
37 | url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
38 | type: type || 'get',
39 | response(req, res) {
40 | console.log('request invoke:' + req.path)
41 | res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
42 | }
43 | }
44 | }
45 |
46 | module.exports = app => {
47 | // parse app.body
48 | // https://expressjs.com/en/4x/api.html#req.body
49 | app.use(bodyParser.json())
50 | app.use(bodyParser.urlencoded({
51 | extended: true
52 | }))
53 |
54 | const mockRoutes = registerRoutes(app)
55 | var mockRoutesLength = mockRoutes.mockRoutesLength
56 | var mockStartIndex = mockRoutes.mockStartIndex
57 |
58 | // watch files, hot reload mock server
59 | chokidar.watch(mockDir, {
60 | ignored: /mock-server/,
61 | ignoreInitial: true
62 | }).on('all', (event, path) => {
63 | if (event === 'change' || event === 'add') {
64 | try {
65 | // remove mock routes stack
66 | app._router.stack.splice(mockStartIndex, mockRoutesLength)
67 |
68 | // clear routes cache
69 | unregisterRoutes()
70 |
71 | const mockRoutes = registerRoutes(app)
72 | mockRoutesLength = mockRoutes.mockRoutesLength
73 | mockStartIndex = mockRoutes.mockStartIndex
74 |
75 | console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`))
76 | } catch (error) {
77 | console.log(chalk.redBright(error))
78 | }
79 | }
80 | })
81 | }
82 |
--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { MessageBox, Message } from 'element-ui'
3 | import store from '@/store'
4 | import { getToken } from '@/utils/auth'
5 |
6 | // create an axios instance
7 | const service = axios.create({
8 | baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
9 | // withCredentials: true, // send cookies when cross-domain requests
10 | timeout: 5000 // request timeout
11 | })
12 |
13 | // request interceptor
14 | service.interceptors.request.use(
15 | config => {
16 | // do something before request is sent
17 |
18 | if (store.getters.token) {
19 | // let each request carry token
20 | // ['X-Token'] is a custom headers key
21 | // please modify it according to the actual situation
22 | config.headers['X-Token'] = getToken()
23 | }
24 | return config
25 | },
26 | error => {
27 | // do something with request error
28 | console.log(error) // for debug
29 | return Promise.reject(error)
30 | }
31 | )
32 |
33 | // response interceptor
34 | service.interceptors.response.use(
35 | /**
36 | * If you want to get http information such as headers or status
37 | * Please return response => response
38 | */
39 |
40 | /**
41 | * Determine the request status by custom code
42 | * Here is just an example
43 | * You can also judge the status by HTTP Status Code
44 | */
45 | response => {
46 | const res = response.data
47 |
48 | // if the custom code is not 20000, it is judged as an error.
49 | if (res.code !== 20000) {
50 | Message({
51 | message: res.message || 'Error',
52 | type: 'error',
53 | duration: 5 * 1000
54 | })
55 |
56 | // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
57 | if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
58 | // to re-login
59 | MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
60 | confirmButtonText: 'Re-Login',
61 | cancelButtonText: 'Cancel',
62 | type: 'warning'
63 | }).then(() => {
64 | store.dispatch('user/resetToken').then(() => {
65 | location.reload()
66 | })
67 | })
68 | }
69 | return Promise.reject(new Error(res.message || 'Error'))
70 | } else {
71 | return res
72 | }
73 | },
74 | error => {
75 | console.log('err' + error) // for debug
76 | Message({
77 | message: error.message,
78 | type: 'error',
79 | duration: 5 * 1000
80 | })
81 | return Promise.reject(error)
82 | }
83 | )
84 |
85 | export default service
86 |
--------------------------------------------------------------------------------
/src/views/form/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
17 | -
18 |
19 |
21 |
22 |
23 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
38 |
39 |
40 |
42 |
43 | Create
44 | Cancel
45 |
46 |
47 |
48 |
49 |
50 |
79 |
80 |
85 |
86 |
--------------------------------------------------------------------------------
/src/layout/components/Sidebar/SidebarItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
24 |
25 |
26 |
27 |
96 |
--------------------------------------------------------------------------------
/tests/unit/components/Breadcrumb.spec.js:
--------------------------------------------------------------------------------
1 | import { mount, createLocalVue } from '@vue/test-utils'
2 | import VueRouter from 'vue-router'
3 | import ElementUI from 'element-ui'
4 | import Breadcrumb from '@/components/Breadcrumb/index.vue'
5 |
6 | const localVue = createLocalVue()
7 | localVue.use(VueRouter)
8 | localVue.use(ElementUI)
9 |
10 | const routes = [
11 | {
12 | path: '/',
13 | name: 'home',
14 | children: [{
15 | path: 'dashboard',
16 | name: 'dashboard'
17 | }]
18 | },
19 | {
20 | path: '/menu',
21 | name: 'menu',
22 | children: [{
23 | path: 'menu1',
24 | name: 'menu1',
25 | meta: { title: 'menu1' },
26 | children: [{
27 | path: 'menu1-1',
28 | name: 'menu1-1',
29 | meta: { title: 'menu1-1' }
30 | },
31 | {
32 | path: 'menu1-2',
33 | name: 'menu1-2',
34 | redirect: 'noredirect',
35 | meta: { title: 'menu1-2' },
36 | children: [{
37 | path: 'menu1-2-1',
38 | name: 'menu1-2-1',
39 | meta: { title: 'menu1-2-1' }
40 | },
41 | {
42 | path: 'menu1-2-2',
43 | name: 'menu1-2-2'
44 | }]
45 | }]
46 | }]
47 | }]
48 |
49 | const router = new VueRouter({
50 | routes
51 | })
52 |
53 | describe('Breadcrumb.vue', () => {
54 | const wrapper = mount(Breadcrumb, {
55 | localVue,
56 | router
57 | })
58 | it('dashboard', () => {
59 | router.push('/dashboard')
60 | const len = wrapper.findAll('.el-breadcrumb__inner').length
61 | expect(len).toBe(1)
62 | })
63 | it('normal route', () => {
64 | router.push('/menu/menu1')
65 | const len = wrapper.findAll('.el-breadcrumb__inner').length
66 | expect(len).toBe(2)
67 | })
68 | it('nested route', () => {
69 | router.push('/menu/menu1/menu1-2/menu1-2-1')
70 | const len = wrapper.findAll('.el-breadcrumb__inner').length
71 | expect(len).toBe(4)
72 | })
73 | it('no meta.title', () => {
74 | router.push('/menu/menu1/menu1-2/menu1-2-2')
75 | const len = wrapper.findAll('.el-breadcrumb__inner').length
76 | expect(len).toBe(3)
77 | })
78 | // it('click link', () => {
79 | // router.push('/menu/menu1/menu1-2/menu1-2-2')
80 | // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
81 | // const second = breadcrumbArray.at(1)
82 | // console.log(breadcrumbArray)
83 | // const href = second.find('a').attributes().href
84 | // expect(href).toBe('#/menu/menu1')
85 | // })
86 | // it('noRedirect', () => {
87 | // router.push('/menu/menu1/menu1-2/menu1-2-1')
88 | // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
89 | // const redirectBreadcrumb = breadcrumbArray.at(2)
90 | // expect(redirectBreadcrumb.contains('a')).toBe(false)
91 | // })
92 | it('last breadcrumb', () => {
93 | router.push('/menu/menu1/menu1-2/menu1-2-1')
94 | const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
95 | const redirectBreadcrumb = breadcrumbArray.at(3)
96 | expect(redirectBreadcrumb.contains('a')).toBe(false)
97 | })
98 | })
99 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by PanJiaChen on 16/11/18.
3 | */
4 |
5 | /**
6 | * Parse the time to string
7 | * @param {(Object|string|number)} time
8 | * @param {string} cFormat
9 | * @returns {string | null}
10 | */
11 | export function parseTime(time, cFormat) {
12 | if (arguments.length === 0 || !time) {
13 | return null
14 | }
15 | const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
16 | let date
17 | if (typeof time === 'object') {
18 | date = time
19 | } else {
20 | if ((typeof time === 'string')) {
21 | if ((/^[0-9]+$/.test(time))) {
22 | // support "1548221490638"
23 | time = parseInt(time)
24 | } else {
25 | // support safari
26 | // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
27 | time = time.replace(new RegExp(/-/gm), '/')
28 | }
29 | }
30 |
31 | if ((typeof time === 'number') && (time.toString().length === 10)) {
32 | time = time * 1000
33 | }
34 | date = new Date(time)
35 | }
36 | const formatObj = {
37 | y: date.getFullYear(),
38 | m: date.getMonth() + 1,
39 | d: date.getDate(),
40 | h: date.getHours(),
41 | i: date.getMinutes(),
42 | s: date.getSeconds(),
43 | a: date.getDay()
44 | }
45 | const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
46 | const value = formatObj[key]
47 | // Note: getDay() returns 0 on Sunday
48 | if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
49 | return value.toString().padStart(2, '0')
50 | })
51 | return time_str
52 | }
53 |
54 | /**
55 | * @param {number} time
56 | * @param {string} option
57 | * @returns {string}
58 | */
59 | export function formatTime(time, option) {
60 | if (('' + time).length === 10) {
61 | time = parseInt(time) * 1000
62 | } else {
63 | time = +time
64 | }
65 | const d = new Date(time)
66 | const now = Date.now()
67 |
68 | const diff = (now - d) / 1000
69 |
70 | if (diff < 30) {
71 | return '刚刚'
72 | } else if (diff < 3600) {
73 | // less 1 hour
74 | return Math.ceil(diff / 60) + '分钟前'
75 | } else if (diff < 3600 * 24) {
76 | return Math.ceil(diff / 3600) + '小时前'
77 | } else if (diff < 3600 * 24 * 2) {
78 | return '1天前'
79 | }
80 | if (option) {
81 | return parseTime(time, option)
82 | } else {
83 | return (
84 | d.getMonth() +
85 | 1 +
86 | '月' +
87 | d.getDate() +
88 | '日' +
89 | d.getHours() +
90 | '时' +
91 | d.getMinutes() +
92 | '分'
93 | )
94 | }
95 | }
96 |
97 | /**
98 | * @param {string} url
99 | * @returns {Object}
100 | */
101 | export function param2Obj(url) {
102 | const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
103 | if (!search) {
104 | return {}
105 | }
106 | const obj = {}
107 | const searchArr = search.split('&')
108 | searchArr.forEach(v => {
109 | const index = v.indexOf('=')
110 | if (index !== -1) {
111 | const name = v.substring(0, index)
112 | const val = v.substring(index + 1, v.length)
113 | obj[name] = val
114 | }
115 | })
116 | return obj
117 | }
118 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-admin-template
2 |
3 | English | [简体中文](./README-zh.md)
4 |
5 | > A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
6 |
7 | **Live demo:** http://panjiachen.github.io/vue-admin-template
8 |
9 |
10 | **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`**
11 |
12 | ## Build Setup
13 |
14 | ```bash
15 | # clone the project
16 | git clone https://github.com/PanJiaChen/vue-admin-template.git
17 |
18 | # enter the project directory
19 | cd vue-admin-template
20 |
21 | # install dependency
22 | npm install
23 |
24 | # develop
25 | npm run dev
26 | ```
27 |
28 | This will automatically open http://localhost:9528
29 |
30 | ## Build
31 |
32 | ```bash
33 | # build for test environment
34 | npm run build:stage
35 |
36 | # build for production environment
37 | npm run build:prod
38 | ```
39 |
40 | ## Advanced
41 |
42 | ```bash
43 | # preview the release environment effect
44 | npm run preview
45 |
46 | # preview the release environment effect + static resource analysis
47 | npm run preview -- --report
48 |
49 | # code format check
50 | npm run lint
51 |
52 | # code format check and auto fix
53 | npm run lint -- --fix
54 | ```
55 |
56 | Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
57 |
58 | ## Demo
59 |
60 | 
61 |
62 | ## Extra
63 |
64 | If 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)
65 |
66 | For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
67 |
68 | ## Related Project
69 |
70 | - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
71 |
72 | - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
73 |
74 | - [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
75 |
76 | - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
77 |
78 | ## Browsers support
79 |
80 | Modern browsers and Internet Explorer 10+.
81 |
82 | | [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
83 | | --------- | --------- | --------- | --------- |
84 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
85 |
86 | ## License
87 |
88 | [MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
89 |
90 | Copyright (c) 2017-present PanJiaChen
91 |
--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
1 | # vue-admin-template
2 |
3 | > 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
4 |
5 | [线上地址](http://panjiachen.github.io/vue-admin-template)
6 |
7 | [国内访问](https://panjiachen.gitee.io/vue-admin-template)
8 |
9 | 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
10 |
11 | ## Extra
12 |
13 | 如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
14 |
15 | ## 相关项目
16 |
17 | - [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
18 |
19 | - [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
20 |
21 | - [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
22 |
23 | - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
24 |
25 | 写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
26 |
27 | - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
28 | - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
29 | - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
30 | - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
31 | - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
32 |
33 | ## Build Setup
34 |
35 | ```bash
36 | # 克隆项目
37 | git clone https://github.com/PanJiaChen/vue-admin-template.git
38 |
39 | # 进入项目目录
40 | cd vue-admin-template
41 |
42 | # 安装依赖
43 | npm install
44 |
45 | # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
46 | npm install --registry=https://registry.npm.taobao.org
47 |
48 | # 启动服务
49 | npm run dev
50 | ```
51 |
52 | 浏览器访问 [http://localhost:9528](http://localhost:9528)
53 |
54 | ## 发布
55 |
56 | ```bash
57 | # 构建测试环境
58 | npm run build:stage
59 |
60 | # 构建生产环境
61 | npm run build:prod
62 | ```
63 |
64 | ## 其它
65 |
66 | ```bash
67 | # 预览发布环境效果
68 | npm run preview
69 |
70 | # 预览发布环境效果 + 静态资源分析
71 | npm run preview -- --report
72 |
73 | # 代码格式检查
74 | npm run lint
75 |
76 | # 代码格式检查并自动修复
77 | npm run lint -- --fix
78 | ```
79 |
80 | 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
81 |
82 | ## 购买贴纸
83 |
84 | 你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。
85 |
86 | ## Demo
87 |
88 | 
89 |
90 | ## Browsers support
91 |
92 | Modern browsers and Internet Explorer 10+.
93 |
94 | | [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
95 | | --------- | --------- | --------- | --------- |
96 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
97 |
98 | ## License
99 |
100 | [MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
101 |
102 | Copyright (c) 2017-present PanJiaChen
103 |
--------------------------------------------------------------------------------
/src/layout/components/Navbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
32 |
33 |
34 |
61 |
62 |
140 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const defaultSettings = require('./src/settings.js')
4 |
5 | function resolve(dir) {
6 | return path.join(__dirname, dir)
7 | }
8 |
9 | const name = defaultSettings.title || 'vue Admin Template' // page title
10 |
11 | // If your port is set to 80,
12 | // use administrator privileges to execute the command line.
13 | // For example, Mac: sudo npm run
14 | // You can change the port by the following methods:
15 | // port = 9528 npm run dev OR npm run dev --port = 9528
16 | const port = process.env.port || process.env.npm_config_port || 9528 // dev port
17 |
18 | // All configuration item explanations can be find in https://cli.vuejs.org/config/
19 | module.exports = {
20 | /**
21 | * You will need to set publicPath if you plan to deploy your site under a sub path,
22 | * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
23 | * then publicPath should be set to "/bar/".
24 | * In most cases please use '/' !!!
25 | * Detail: https://cli.vuejs.org/config/#publicpath
26 | */
27 | publicPath: '/',
28 | outputDir: 'dist',
29 | assetsDir: 'static',
30 | lintOnSave: process.env.NODE_ENV === 'development',
31 | productionSourceMap: false,
32 | devServer: {
33 | port: port,
34 | open: true,
35 | overlay: {
36 | warnings: false,
37 | errors: true
38 | },
39 | before: require('./mock/mock-server.js')
40 | },
41 | configureWebpack: {
42 | // provide the app's title in webpack's name field, so that
43 | // it can be accessed in index.html to inject the correct title.
44 | name: name,
45 | resolve: {
46 | alias: {
47 | '@': resolve('src')
48 | }
49 | }
50 | },
51 | chainWebpack(config) {
52 | // it can improve the speed of the first screen, it is recommended to turn on preload
53 | config.plugin('preload').tap(() => [
54 | {
55 | rel: 'preload',
56 | // to ignore runtime.js
57 | // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
58 | fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
59 | include: 'initial'
60 | }
61 | ])
62 |
63 | // when there are many pages, it will cause too many meaningless requests
64 | config.plugins.delete('prefetch')
65 |
66 | // set svg-sprite-loader
67 | config.module
68 | .rule('svg')
69 | .exclude.add(resolve('src/icons'))
70 | .end()
71 | config.module
72 | .rule('icons')
73 | .test(/\.svg$/)
74 | .include.add(resolve('src/icons'))
75 | .end()
76 | .use('svg-sprite-loader')
77 | .loader('svg-sprite-loader')
78 | .options({
79 | symbolId: 'icon-[name]'
80 | })
81 | .end()
82 |
83 | config
84 | .when(process.env.NODE_ENV !== 'development',
85 | config => {
86 | config
87 | .plugin('ScriptExtHtmlWebpackPlugin')
88 | .after('html')
89 | .use('script-ext-html-webpack-plugin', [{
90 | // `runtime` must same as runtimeChunk name. default is `runtime`
91 | inline: /runtime\..*\.js$/
92 | }])
93 | .end()
94 | config
95 | .optimization.splitChunks({
96 | chunks: 'all',
97 | cacheGroups: {
98 | libs: {
99 | name: 'chunk-libs',
100 | test: /[\\/]node_modules[\\/]/,
101 | priority: 10,
102 | chunks: 'initial' // only package third parties that are initially dependent
103 | },
104 | elementUI: {
105 | name: 'chunk-elementUI', // split elementUI into a single package
106 | priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
107 | test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
108 | },
109 | commons: {
110 | name: 'chunk-commons',
111 | test: resolve('src/components'), // can customize your rules
112 | minChunks: 3, // minimum common number
113 | priority: 5,
114 | reuseExistingChunk: true
115 | }
116 | }
117 | })
118 | // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
119 | config.optimization.runtimeChunk('single')
120 | }
121 | )
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/src/styles/sidebar.scss:
--------------------------------------------------------------------------------
1 | #app {
2 |
3 | .main-container {
4 | min-height: 100%;
5 | transition: margin-left .28s;
6 | margin-left: $sideBarWidth;
7 | position: relative;
8 | }
9 |
10 | .sidebar-container {
11 | transition: width 0.28s;
12 | width: $sideBarWidth !important;
13 | background-color: $menuBg;
14 | height: 100%;
15 | position: fixed;
16 | font-size: 0px;
17 | top: 0;
18 | bottom: 0;
19 | left: 0;
20 | z-index: 1001;
21 | overflow: hidden;
22 |
23 | // reset element-ui css
24 | .horizontal-collapse-transition {
25 | transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
26 | }
27 |
28 | .scrollbar-wrapper {
29 | overflow-x: hidden !important;
30 | }
31 |
32 | .el-scrollbar__bar.is-vertical {
33 | right: 0px;
34 | }
35 |
36 | .el-scrollbar {
37 | height: 100%;
38 | }
39 |
40 | &.has-logo {
41 | .el-scrollbar {
42 | height: calc(100% - 50px);
43 | }
44 | }
45 |
46 | .is-horizontal {
47 | display: none;
48 | }
49 |
50 | a {
51 | display: inline-block;
52 | width: 100%;
53 | overflow: hidden;
54 | }
55 |
56 | .svg-icon {
57 | margin-right: 16px;
58 | }
59 |
60 | .sub-el-icon {
61 | margin-right: 12px;
62 | margin-left: -2px;
63 | }
64 |
65 | .el-menu {
66 | border: none;
67 | height: 100%;
68 | width: 100% !important;
69 | }
70 |
71 | // menu hover
72 | .submenu-title-noDropdown,
73 | .el-submenu__title {
74 | &:hover {
75 | background-color: $menuHover !important;
76 | }
77 | }
78 |
79 | .is-active>.el-submenu__title {
80 | color: $subMenuActiveText !important;
81 | }
82 |
83 | & .nest-menu .el-submenu>.el-submenu__title,
84 | & .el-submenu .el-menu-item {
85 | min-width: $sideBarWidth !important;
86 | background-color: $subMenuBg !important;
87 |
88 | &:hover {
89 | background-color: $subMenuHover !important;
90 | }
91 | }
92 | }
93 |
94 | .hideSidebar {
95 | .sidebar-container {
96 | width: 54px !important;
97 | }
98 |
99 | .main-container {
100 | margin-left: 54px;
101 | }
102 |
103 | .submenu-title-noDropdown {
104 | padding: 0 !important;
105 | position: relative;
106 |
107 | .el-tooltip {
108 | padding: 0 !important;
109 |
110 | .svg-icon {
111 | margin-left: 20px;
112 | }
113 |
114 | .sub-el-icon {
115 | margin-left: 19px;
116 | }
117 | }
118 | }
119 |
120 | .el-submenu {
121 | overflow: hidden;
122 |
123 | &>.el-submenu__title {
124 | padding: 0 !important;
125 |
126 | .svg-icon {
127 | margin-left: 20px;
128 | }
129 |
130 | .sub-el-icon {
131 | margin-left: 19px;
132 | }
133 |
134 | .el-submenu__icon-arrow {
135 | display: none;
136 | }
137 | }
138 | }
139 |
140 | .el-menu--collapse {
141 | .el-submenu {
142 | &>.el-submenu__title {
143 | &>span {
144 | height: 0;
145 | width: 0;
146 | overflow: hidden;
147 | visibility: hidden;
148 | display: inline-block;
149 | }
150 | }
151 | }
152 | }
153 | }
154 |
155 | .el-menu--collapse .el-menu .el-submenu {
156 | min-width: $sideBarWidth !important;
157 | }
158 |
159 | // mobile responsive
160 | .mobile {
161 | .main-container {
162 | margin-left: 0px;
163 | }
164 |
165 | .sidebar-container {
166 | transition: transform .28s;
167 | width: $sideBarWidth !important;
168 | }
169 |
170 | &.hideSidebar {
171 | .sidebar-container {
172 | pointer-events: none;
173 | transition-duration: 0.3s;
174 | transform: translate3d(-$sideBarWidth, 0, 0);
175 | }
176 | }
177 | }
178 |
179 | .withoutAnimation {
180 |
181 | .main-container,
182 | .sidebar-container {
183 | transition: none;
184 | }
185 | }
186 | }
187 |
188 | // when menu collapsed
189 | .el-menu--vertical {
190 | &>.el-menu {
191 | .svg-icon {
192 | margin-right: 16px;
193 | }
194 | .sub-el-icon {
195 | margin-right: 12px;
196 | margin-left: -2px;
197 | }
198 | }
199 |
200 | .nest-menu .el-submenu>.el-submenu__title,
201 | .el-menu-item {
202 | &:hover {
203 | // you can use $subMenuHover
204 | background-color: $menuHover !important;
205 | }
206 | }
207 |
208 | // the scroll bar appears when the subMenu is too long
209 | >.el-menu--popup {
210 | max-height: 100vh;
211 | overflow-y: auto;
212 |
213 | &::-webkit-scrollbar-track-piece {
214 | background: #d3dce6;
215 | }
216 |
217 | &::-webkit-scrollbar {
218 | width: 6px;
219 | }
220 |
221 | &::-webkit-scrollbar-thumb {
222 | background: #99a9bf;
223 | border-radius: 20px;
224 | }
225 | }
226 | }
227 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 |
4 | Vue.use(Router)
5 |
6 | /* Layout */
7 | import Layout from '@/layout'
8 |
9 | /**
10 | * Note: sub-menu only appear when route children.length >= 1
11 | * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
12 | *
13 | * hidden: true if set true, item will not show in the sidebar(default is false)
14 | * alwaysShow: true if set true, will always show the root menu
15 | * if not set alwaysShow, when item has more than one children route,
16 | * it will becomes nested mode, otherwise not show the root menu
17 | * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
18 | * name:'router-name' the name is used by
8 |
9 |
14 |
15 |
16 | Home
17 |
18 |
19 |
20 | Github
21 |
22 |
23 | Docs
24 |
25 |
26 | Log Out
27 |
28 |
29 |
30 |
31 |
10 | ![]()
11 |
12 |
13 |
3 |
21 |
22 |
23 |
34 |
35 |
229 |
--------------------------------------------------------------------------------
/src/views/login/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
20 |
5 | 
6 | 
7 |
8 |
9 |
10 |
6 |
7 |
8 |
9 |
11 |
19 | OOPS!
12 | All rights reserved
13 | wallstreetcn
14 |
15 | {{ message }}
16 | Please check that the URL you entered is correct, or click the button below to return to the homepage.
17 | Back to home
18 |
3 |
4 |
5 |
10 |
11 |
23 |
24 |
25 |
26 |
43 |
44 | Login
45 |
46 |
52 |
53 |
54 |
55 |
127 |
128 |
174 |
175 |
238 |
--------------------------------------------------------------------------------
6 |
8 |
9 | Login Form
7 |
47 | username: admin
48 | password: any
49 |
50 |
51 |