├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── dist
├── css
│ ├── chunk-vendors.2794e51f.css
│ └── index.ac309d22.css
├── favicon.ico
├── fonts
│ ├── element-icons.535877f5.woff
│ ├── element-icons.732389de.ttf
│ ├── fontawesome-webfont.674f50d2.eot
│ ├── fontawesome-webfont.af7ae505.woff2
│ ├── fontawesome-webfont.b06871f2.ttf
│ └── fontawesome-webfont.fee66e71.woff
├── img
│ └── fontawesome-webfont.912ec66d.svg
├── index.html
└── js
│ ├── chunk-vendors.c3df235d.js
│ ├── chunk-vendors.c3df235d.js.map
│ ├── index.b7065760.js
│ └── index.b7065760.js.map
├── feihong_2019-12-20.png
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
└── index.html
├── src
├── App.vue
├── api
│ ├── index.js
│ └── user.js
├── assets
│ ├── css
│ │ ├── animation.less
│ │ ├── app-view.css
│ │ ├── app-view.less
│ │ ├── main.css
│ │ └── main.less
│ ├── logo-img.png
│ ├── logo.ai
│ ├── logo.png
│ ├── logo.svg
│ └── user.jpg
├── components
│ ├── app-aside.vue
│ ├── app-header.vue
│ ├── app-view.vue
│ ├── dropdown
│ │ ├── dropdown.css
│ │ ├── dropdown.less
│ │ ├── dropdown.vue
│ │ └── index.js
│ ├── layout
│ │ ├── README.md
│ │ ├── container.vue
│ │ ├── footer.vue
│ │ ├── header.vue
│ │ ├── index.js
│ │ ├── layout.css
│ │ ├── layout.less
│ │ ├── main.vue
│ │ └── sider.vue
│ └── main-view.vue
├── main.js
├── router.js
├── store
│ ├── index.js
│ ├── modules
│ │ ├── index.js
│ │ └── user.js
│ └── types.js
├── utils
│ ├── http.js
│ ├── index.js
│ └── watermark.js
└── views
│ ├── admin
│ ├── dashboard.vue
│ ├── page1.vue
│ ├── page2.vue
│ └── page3.vue
│ ├── home.vue
│ ├── login.vue
│ └── logout.vue
├── vue.config.js
└── yarn.lock
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | 'extends': [
7 | 'plugin:vue/essential',
8 | '@vue/standard'
9 | ],
10 | rules: {
11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 | },
14 | parserOptions: {
15 | parser: 'babel-eslint'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 |
4 | # local env files
5 | .env.local
6 | .env.*.local
7 |
8 | # Log files
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 |
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw?
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-element-admin-tpl
2 |
3 | [Liev Demo](http://vadmin.lanyueos.com)
4 |
5 |
6 |
7 |
3 |
4 |
5 |
6 |
Admin Platform
7 |
8 |
19 |
6 |
7 |
8 |
20 |
21 |
22 |
23 |
9 | 
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | header
28 |
29 | footer
30 |
31 |
32 | ```
33 |
34 | ### Container
35 |
36 | 容器
37 |
38 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
39 | |---------- |-------- |---------- |------------- |-------- |
40 | | direction | 排列方向 | string | vertical/horizontal | vertical |
41 |
42 | ### Sider
43 |
44 | 侧边栏
45 |
46 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
47 | |---------- |-------- |---------- |------------- |-------- |
48 | | width | 宽度 | string | — | — |
49 | | background | 背景颜色 | string | — | — |
50 | | color | 字体颜色 | string | — | — |
51 |
52 | ### Header
53 |
54 | 头部
55 |
56 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
57 | |---------- |-------- |---------- |------------- |-------- |
58 | | height | 高度 | string | — | — |
59 | | background | 背景颜色 | string | — | — |
60 | | color | 字体颜色 | string | — | — |
61 |
62 | ### Footer
63 |
64 | 尾部
65 |
66 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
67 | |---------- |-------- |---------- |------------- |-------- |
68 | | height | 高度 | string | — | — |
69 | | background | 背景颜色 | string | — | — |
70 | | color | 字体颜色 | string | — | — |
71 |
72 | ### Main
73 |
74 | 主体
75 |
--------------------------------------------------------------------------------
/src/components/layout/container.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
11 |
19 |
--------------------------------------------------------------------------------
/src/components/layout/footer.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
29 |
--------------------------------------------------------------------------------
/src/components/layout/header.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
29 |
--------------------------------------------------------------------------------
/src/components/layout/index.js:
--------------------------------------------------------------------------------
1 | import Container from './container'
2 | import Main from './main'
3 | import Header from './header'
4 | import Footer from './footer'
5 | import Sider from './sider'
6 | import './layout.less'
7 |
8 | Container.install = function (Vue, options = {}) {
9 | Vue.component(options.containerName || Container.name, Container)
10 | Vue.component(options.mainName || Main.name, Main)
11 | Vue.component(options.headerName || Header.name, Header)
12 | Vue.component(options.footerName || Footer.name, Footer)
13 | Vue.component(options.silderName || Sider.name, Sider)
14 | }
15 |
16 | export const MContainer = Container
17 | export const MMain = Main
18 | export const MHeader = Header
19 | export const MFooter = Footer
20 | export const MSider = Sider
21 |
22 | export default Container
23 |
--------------------------------------------------------------------------------
/src/components/layout/layout.css:
--------------------------------------------------------------------------------
1 | .m-layout {
2 | display: flex;
3 | flex-direction: column;
4 | flex: auto;
5 | min-height: 0;
6 | box-sizing: border-box;
7 | }
8 | .m-layout.is-horizontal {
9 | flex-direction: row;
10 | }
11 | .m-layout .m-layout-sider {
12 | flex-direction: row;
13 | box-sizing: border-box;
14 | }
15 | .m-layout .m-layout-header {
16 | height: 50px;
17 | box-sizing: border-box;
18 | }
19 | .m-layout .m-layout-content {
20 | flex: 1;
21 | min-height: 0;
22 | box-sizing: border-box;
23 | overflow: auto;
24 | }
25 | .m-layout .m-layout-footer {
26 | height: 50px;
27 | box-sizing: border-box;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/layout/layout.less:
--------------------------------------------------------------------------------
1 | .m-layout {
2 | display: flex;
3 | flex-direction: column;
4 | flex: auto;
5 | min-height: 0;
6 | box-sizing: border-box;
7 |
8 | // &.is-vertical {}
9 | &.is-horizontal {
10 | flex-direction: row;
11 | }
12 |
13 | .m-layout-sider {
14 | flex-direction: row;
15 | box-sizing: border-box;
16 | }
17 | .m-layout-header {
18 | height: 50px;
19 | box-sizing: border-box;
20 | }
21 |
22 | .m-layout-content {
23 | flex: 1;
24 | min-height: 0;
25 | box-sizing: border-box;
26 | overflow: auto;
27 | }
28 |
29 | .m-layout-footer {
30 | height: 50px;
31 | box-sizing: border-box;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/layout/main.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
--------------------------------------------------------------------------------
/src/components/layout/sider.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
29 |
--------------------------------------------------------------------------------
/src/components/main-view.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Nprogress from 'nprogress'
3 | import App from './App.vue'
4 | import router from './router'
5 | import store from './store'
6 | import Message from 'vue-m-message'
7 | import MDialog from 'vue-m-dialog/dist'
8 | import ElementUI from 'element-ui'
9 | import { isProd } from './utils'
10 | import http from './utils/http'
11 |
12 | import 'normalize.css'
13 | import 'font-awesome/css/font-awesome.min.css'
14 | import 'nprogress/nprogress.css'
15 | import 'vue-m-dialog/dist/css/default.css'
16 | import 'element-ui/lib/theme-chalk/index.css'
17 | import '@dove-ui/menu/dist/index.css'
18 | import './assets/css/main.less'
19 |
20 | Vue.use(Message, { name: 'msg' }) // mount `Vue.prototype.$msg`
21 | Vue.use(MDialog, {
22 | dialogName: 'm-dialog',
23 | alertName: 'malert',
24 | confirmName: 'mconfirm'
25 | })
26 | Vue.use(ElementUI)
27 | Vue.config.productionTip = false
28 |
29 | // http config
30 | http.defaults.baseURL = '/'
31 |
32 | // // requeset before
33 | // http.interceptors.request.use(function (config) {
34 | // return config
35 | // })
36 |
37 | // requeset after
38 | http.interceptors.response.use(function (res) {
39 | console.log(res)
40 | // const NO_LOGIN_CODE = 100
41 | // const noLogin = res.data.code === NO_LOGIN_CODE
42 | // const noLogin = true
43 | // if (noLogin) {
44 | // app.$router.push({ name: 'login', params: { reload: 1 } })
45 | // return res
46 | // }
47 | return res
48 | }, function (err) {
49 | // Any status codes that falls outside the range of 2xx cause this function to trigger
50 | // Do something with response error
51 | return Promise.reject(err)
52 | })
53 |
54 | router.beforeEach(async (to, from, next) => {
55 | // console.log(from.path, to.path)
56 | Nprogress.start()
57 |
58 | const whiteList = ['login', 'logout', 'home']
59 |
60 | if (whiteList.indexOf(to.name) > -1) return next()
61 |
62 | const loginUser = store.state.user.loginUser
63 |
64 | if (!loginUser) {
65 | // 获取登录会话
66 | const loginUser = await store.dispatch('user/getLoginInfo')
67 |
68 | Nprogress.inc(0.5)
69 |
70 | if (!loginUser) {
71 | // 访客路由
72 | if (to.meta.isGuest) return next()
73 | return next({ name: 'login' })
74 | }
75 | }
76 |
77 | next()
78 | })
79 |
80 | router.afterEach(transition => {
81 | setTimeout(() => {
82 | Nprogress.done()
83 | }, 100)
84 | })
85 |
86 | Vue.prototype.$http = http
87 |
88 | const app = new Vue({
89 | router,
90 | store,
91 | render: h => h(App)
92 | }).$mount('#app')
93 |
94 | if (!isProd()) {
95 | window.app = app
96 | }
97 |
98 | if (!isProd()) {
99 | window.app = app
100 | }
101 |
102 | export default app
103 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Home from './views/home'
4 | import Login from './views/login'
5 | import Logout from './views/logout'
6 | import AppView from './components/app-view'
7 | import Dashboard from './views/admin/dashboard'
8 | import Pgae1 from './views/admin/page1'
9 | import Pgae2 from './views/admin/page2'
10 | import Pgae3 from './views/admin/page3'
11 |
12 | Vue.use(Router)
13 |
14 | const router = new Router({
15 | mode: 'history', // hash, history
16 | routes: [
17 | { path: '/', name: 'home', component: Home },
18 | { path: '/login', name: 'login', component: Login },
19 | { path: '/logout', name: 'logout', component: Logout },
20 | {
21 | path: '/admin',
22 | component: AppView,
23 | children: [
24 | { path: '', component: Dashboard },
25 | { path: '/page1', component: Pgae1 },
26 | { path: '/page2', component: Pgae2 },
27 | { path: '/page3', component: Pgae3 }
28 | ]
29 | }
30 | ]
31 | })
32 |
33 | export default router
34 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import modules from './modules'
4 | import { SET_WATERMARK } from './types'
5 | import { isProd, isTest } from '../utils'
6 |
7 | Vue.use(Vuex)
8 |
9 | const state = {
10 | env: isProd()
11 | ? 'prd'
12 | : isTest() ? 'test' : 'dev',
13 | watermark: null
14 | }
15 |
16 | console.log(process.env)
17 |
18 | const mutations = {
19 | [SET_WATERMARK] (state, img) {
20 | state.watermark = img
21 | }
22 | }
23 |
24 | const actions = {
25 | setWatermark ({ commit }, img) {
26 | commit(SET_WATERMARK, img)
27 | }
28 | }
29 |
30 | const store = new Vuex.Store({
31 | strict: true,
32 | state,
33 | actions,
34 | mutations,
35 | modules
36 | })
37 |
38 | export default store
39 |
--------------------------------------------------------------------------------
/src/store/modules/index.js:
--------------------------------------------------------------------------------
1 | import user from './user'
2 |
3 | export default {
4 | user
5 | }
6 |
--------------------------------------------------------------------------------
/src/store/modules/user.js:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs'
2 | import { login } from '../../api/user'
3 | import { SET_LOGIN } from '../types'
4 | import watermark from '../../utils/watermark'
5 |
6 | const state = {
7 | loginUser: null
8 | }
9 |
10 | const mutations = {
11 | [SET_LOGIN] (state, user) {
12 | state.loginUser = user
13 | }
14 | }
15 |
16 | const actions = {
17 | async login ({ commit }, payload) {
18 | const res = await login(payload.username, payload.password)
19 |
20 | // save to store
21 | localStorage.setItem('user', JSON.stringify(res.data))
22 | return res
23 | },
24 |
25 | async getLoginInfo ({ commit, dispatch }) {
26 | // get user from backend
27 | // const user = await getLoginInfo()
28 | // get user from store
29 | const user = JSON.parse(localStorage.getItem('user') || 'null')
30 | commit(SET_LOGIN, user)
31 |
32 | if (user) {
33 | watermark(user.username, {
34 | time: dayjs().format('YYYY-MM-DD HH:mm:ss')
35 | }).then(res => {
36 | dispatch('setWatermark', res, { root: true })
37 | })
38 | }
39 |
40 | return user
41 | }
42 | }
43 |
44 | export default {
45 | namespaced: true,
46 | state,
47 | mutations,
48 | actions
49 | }
50 |
--------------------------------------------------------------------------------
/src/store/types.js:
--------------------------------------------------------------------------------
1 | // types 定义所有操作类型
2 |
3 | // common
4 | export const SET_WATERMARK = 'SET_WATERMARK'
5 |
6 | // user
7 | export const SET_LOGIN = 'SET_LOGIN'
8 |
--------------------------------------------------------------------------------
/src/utils/http.js:
--------------------------------------------------------------------------------
1 | import Axios from 'axios'
2 |
3 | const instance = Axios.create()
4 |
5 | export default instance
6 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 |
2 | // 判断是否 build 之后环境
3 | export const isProd = () => process.env.NODE_ENV === 'production'
4 |
5 | // 判断是否 build 之后环境
6 | export const isTest = () => process.env.NODE_ENV === 'test'
7 |
8 | // 进入全屏
9 | export function requestFullScreen () {
10 | var elem = document.documentElement
11 | if (elem.requestFullscreen) {
12 | elem.requestFullscreen()
13 | } else if (elem.mozRequestFullScreen) {
14 | elem.mozRequestFullScreen()
15 | } else if (elem.webkitRequestFullScreen) {
16 | elem.webkitRequestFullScreen()
17 | } else if (elem.msRequestFullscreen) {
18 | // elem.msRequestFullscreen() 没有指定元素
19 | document.body.msRequestFullscreen()
20 | }
21 | }
22 | // 退出全屏
23 | export function exitFullscreen () {
24 | var doc = document
25 | if (doc.exitFullscreen) {
26 | doc.exitFullscreen()
27 | } else if (doc.mozCancelFullScreen) {
28 | doc.mozCancelFullScreen()
29 | } else if (doc.webkitCancelFullScreen) {
30 | doc.webkitCancelFullScreen()
31 | } else if (doc.msExitFullscreen) {
32 | document.msExitFullscreen()
33 | }
34 | }
35 |
36 | export const sleep = (time) => {
37 | return new Promise((resolve) => {
38 | setTimeout(resolve, time)
39 | })
40 | }
41 |
--------------------------------------------------------------------------------
/src/utils/watermark.js:
--------------------------------------------------------------------------------
1 | export default function Watermark (name, opts = {}) {
2 | return new Promise(function (resolve, reject) {
3 | const options = {
4 | color: '#3E3E50',
5 | env: 'development',
6 | time: new Date(),
7 | output: '',
8 | width: 200,
9 | height: 200,
10 | ...opts
11 | }
12 |
13 | const svg = ``
25 |
26 | if (options.output === 'svg') {
27 | resolve(svg)
28 | return false
29 | }
30 |
31 | const img = new Image()
32 | img.width = options.width
33 | img.height = options.height
34 |
35 | img.onload = function () {
36 | if (options.output === 'img') {
37 | resolve(img)
38 | return false
39 | }
40 |
41 | const canvas = document.createElement('canvas')
42 | canvas.width = options.width
43 | canvas.height = options.height
44 | let ctx = null
45 |
46 | try {
47 | ctx = canvas.getContext('2d')
48 | } catch (err) {
49 | reject(err.message)
50 | return false
51 | }
52 |
53 | ctx.drawImage(img, 0, 0)
54 |
55 | resolve(canvas.toDataURL('image/png'))
56 | }
57 |
58 | img.onerror = function (err) {
59 | reject(err)
60 | }
61 |
62 | const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }))
63 |
64 | // 不转图片svg做背景会存在一些兼容性
65 | img.src = url
66 | })
67 | }
68 |
--------------------------------------------------------------------------------
/src/views/admin/dashboard.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Home
5 | Overview
6 |
7 |
8 |
dashboard
9 |
Header1
10 |
Header2
11 |
Header3
12 |
Header4
13 |
Header5
14 |
Header6
15 |
16 |
3 |
4 | Home
5 | Page1
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | ![avatar]()
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
3 |
4 | Home
5 | Page2
6 |
7 |
Page2
8 |
3 |
4 | Home
5 | Page3
6 |
7 |
8 |
11 |
3 |
4 |
7 |
Admin Platform
8 |
9 |
10 |
11 |
12 |
13 |
3 |
4 |
10 |
Hi, Welcome here !
11 |
21 |
22 |
23 |
24 |
26 |
27 |
28 |