├── .gitignore ├── .babelrc ├── src ├── assets │ └── logo.png ├── components │ ├── common │ │ ├── Nothing.vue │ │ ├── SideNav.vue │ │ └── DataHeader.vue │ ├── help │ │ └── Help.vue │ ├── feedback │ │ └── Feedback.vue │ ├── userGroup │ │ └── UserGroup.vue │ ├── user │ │ └── UserList.vue │ └── testManagement │ │ ├── TestManagement.vue │ │ ├── TestUser.vue │ │ └── TestProject.vue ├── main.js ├── router.js ├── App.vue └── mock │ ├── testProject.js │ └── userGroup.js ├── dist ├── a61be9cda5272a0c94b957cb630cc970.eot ├── b02bdc1b846fd65473922f5f62832108.ttf ├── d2f69a92faa6fe990d2e613c358be705.woff └── element-icons.svg ├── README.md ├── index.html ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/ 3 | node_modules/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monster1935/vue-element/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /dist/a61be9cda5272a0c94b957cb630cc970.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monster1935/vue-element/HEAD/dist/a61be9cda5272a0c94b957cb630cc970.eot -------------------------------------------------------------------------------- /dist/b02bdc1b846fd65473922f5f62832108.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monster1935/vue-element/HEAD/dist/b02bdc1b846fd65473922f5f62832108.ttf -------------------------------------------------------------------------------- /dist/d2f69a92faa6fe990d2e613c358be705.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monster1935/vue-element/HEAD/dist/d2f69a92faa6fe990d2e613c358be705.woff -------------------------------------------------------------------------------- /src/components/common/Nothing.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /src/components/help/Help.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-element 2 | >Vue2.0+Vue-router+ElementUI实现的后台管理系统模板 3 | 4 | ## Online Demo 5 | [在线演示,请戳这里~](http://monster1935.github.io/vue-element) 6 | 7 | ## How to use 8 | ```shell 9 | npm install 10 | npm run dev 11 | npm run build 12 | ``` 13 | ## Introduction 14 | 该项目为本人学习Vue的练手项目,使用ElementUI实现。目前仅仅给出了一个后台管理系统的雏形。模板中出现的数据均为模拟数据,后期打算在此基础上配合Nodejs实现一个完整的单页应用。欢迎技术交流~ 15 | -------------------------------------------------------------------------------- /src/components/feedback/Feedback.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /src/components/userGroup/UserGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /src/components/user/UserList.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 23 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ElementUI from 'element-ui' 3 | // import '../theme/index.css' 4 | import 'element-ui/lib/theme-default/index.css' 5 | import App from './App.vue' 6 | import VueRouter from 'vue-router' 7 | import routerMap from './router.js' 8 | 9 | Vue.use(VueRouter); 10 | Vue.use(ElementUI); 11 | 12 | const router = new VueRouter({routes: routerMap}) 13 | 14 | const app = new Vue({ 15 | router 16 | }).$mount('#app'); 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue-element 6 | 7 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/testManagement/TestManagement.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /src/components/common/SideNav.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-element", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "monster1935 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "element-ui": "^1.0.5", 13 | "vue": "^2.1.0", 14 | "vue-router": "^2.1.1" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-es2015": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.26.1", 22 | "file-loader": "^0.9.0", 23 | "style-loader": "^0.13.1", 24 | "vue-loader": "^10.0.0", 25 | "vue-template-compiler": "^2.1.0", 26 | "webpack": "^2.1.0-beta.25", 27 | "webpack-dev-server": "^2.1.0-beta.0" 28 | } 29 | } -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | // the config of app router 2 | 3 | import TestManagement from './components/testManagement/TestManagement.vue'; 4 | import UserGroup from './components/userGroup/UserGroup.vue'; 5 | import Help from './components/help/Help.vue'; 6 | import Feedback from './components/feedback/Feedback.vue'; 7 | import UserList from './components/user/UserList.vue'; 8 | import App from './App.vue' 9 | export default [{ 10 | path: '/index', 11 | component: App, 12 | children: [{ 13 | name: '测试管理', 14 | path: 'testManagement', 15 | component: TestManagement 16 | }, 17 | { 18 | name: '用户分群管理', 19 | path: 'userGroup', 20 | component:UserGroup 21 | }, 22 | { 23 | name: '用户管理', 24 | path: 'userList', 25 | component: UserList 26 | }, 27 | { 28 | name: '帮助中心', 29 | path: 'help', 30 | component:Help 31 | }, 32 | { 33 | name: '意见反馈', 34 | path: 'feedback', 35 | component:Feedback 36 | }, 37 | ] 38 | }, 39 | { 40 | path: '*', 41 | redirect: '/index/testManagement' 42 | } 43 | ] 44 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | // vue-loader options go here 18 | } 19 | }, 20 | { 21 | test: /\.js$/, 22 | loader: 'babel-loader', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.(png|jpg|gif|svg)$/, 27 | loader: 'file-loader', 28 | options: { 29 | name: '[name].[ext]?[hash]' 30 | } 31 | }, 32 | { 33 | test: /\.css$/, 34 | loader: "style-loader!css-loader" 35 | }, 36 | { 37 | test: /\.(eot|woff|woff2|ttf)([\?]?.*)$/, 38 | loader: "file-loader" 39 | 40 | } 41 | 42 | 43 | 44 | ] 45 | }, 46 | resolve: { 47 | alias: { 48 | 'vue$': 'vue/dist/vue.common.js' 49 | } 50 | }, 51 | devServer: { 52 | historyApiFallback: true, 53 | noInfo: true 54 | }, 55 | devtool: '#eval-source-map' 56 | } 57 | 58 | if (process.env.NODE_ENV === 'production') { 59 | module.exports.devtool = '#source-map' 60 | // http://vue-loader.vuejs.org/en/workflow/production.html 61 | module.exports.plugins = (module.exports.plugins || []).concat([ 62 | new webpack.DefinePlugin({ 63 | 'process.env': { 64 | NODE_ENV: '"production"' 65 | } 66 | }), 67 | new webpack.optimize.UglifyJsPlugin({ 68 | sourceMap: true, 69 | compress: { 70 | warnings: false 71 | } 72 | }), 73 | new webpack.LoaderOptionsPlugin({ 74 | minimize: true 75 | }) 76 | ]) 77 | } 78 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 50 | 51 | 90 | -------------------------------------------------------------------------------- /src/components/testManagement/TestUser.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 88 | 89 | 92 | -------------------------------------------------------------------------------- /src/components/common/DataHeader.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 67 | 68 | 69 | 98 | -------------------------------------------------------------------------------- /src/mock/testProject.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 3 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 4 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 5 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 6 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 7 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 8 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 9 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 10 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 11 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 12 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 13 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 14 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 15 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 16 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 17 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 18 | {id: '1',testName: '测试名称', types: 'APP', testUser: '全部,100%',projectID: '1、原始方案,10% 2、优化方案,90%',create: 'monster1935',lastUpdate: '2016-12-09 15:53:10', status: '草稿'}, 19 | ] 20 | -------------------------------------------------------------------------------- /src/mock/userGroup.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | name:'分群名称', 3 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 4 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 5 | create: '张三丰', 6 | lastUpdate: '2016-11-12 10:20:20', 7 | action: '' 8 | },{ 9 | name:'分群名称', 10 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 11 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 12 | create: '张三丰', 13 | lastUpdate: '2016-11-12 10:20:20', 14 | action: '' 15 | },{ 16 | name:'分群名称', 17 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 18 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 19 | create: '张三丰', 20 | lastUpdate: '2016-11-12 10:20:20', 21 | action: '' 22 | },{ 23 | name:'分群名称', 24 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 25 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 26 | create: '张三丰', 27 | lastUpdate: '2016-11-12 10:20:20', 28 | action: '' 29 | },{ 30 | name:'分群名称', 31 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 32 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 33 | create: '张三丰', 34 | lastUpdate: '2016-11-12 10:20:20', 35 | action: '' 36 | },{ 37 | name:'分群名称', 38 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 39 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 40 | create: '张三丰', 41 | lastUpdate: '2016-11-12 10:20:20', 42 | action: '' 43 | },{ 44 | name:'分群名称', 45 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 46 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 47 | create: '张三丰', 48 | lastUpdate: '2016-11-12 10:20:20', 49 | action: '' 50 | },{ 51 | name:'分群名称', 52 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 53 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 54 | create: '张三丰', 55 | lastUpdate: '2016-11-12 10:20:20', 56 | action: '' 57 | },{ 58 | name:'分群名称', 59 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 60 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 61 | create: '张三丰', 62 | lastUpdate: '2016-11-12 10:20:20', 63 | action: '' 64 | },{ 65 | name:'分群名称', 66 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 67 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 68 | create: '张三丰', 69 | lastUpdate: '2016-11-12 10:20:20', 70 | action: '' 71 | },{ 72 | name:'分群名称', 73 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 74 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 75 | create: '张三丰', 76 | lastUpdate: '2016-11-12 10:20:20', 77 | action: '' 78 | },{ 79 | name:'分群名称', 80 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 81 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 82 | create: '张三丰', 83 | lastUpdate: '2016-11-12 10:20:20', 84 | action: '' 85 | },{ 86 | name:'分群名称', 87 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 88 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 89 | create: '张三丰', 90 | lastUpdate: '2016-11-12 10:20:20', 91 | action: '' 92 | },{ 93 | name:'分群名称', 94 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 95 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 96 | create: '张三丰', 97 | lastUpdate: '2016-11-12 10:20:20', 98 | action: '' 99 | },{ 100 | name:'分群名称', 101 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 102 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 103 | create: '张三丰', 104 | lastUpdate: '2016-11-12 10:20:20', 105 | action: '' 106 | },{ 107 | name:'分群名称', 108 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 109 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 110 | create: '张三丰', 111 | lastUpdate: '2016-11-12 10:20:20', 112 | action: '' 113 | },{ 114 | name:'分群名称', 115 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 116 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 117 | create: '张三丰', 118 | lastUpdate: '2016-11-12 10:20:20', 119 | action: '' 120 | },{ 121 | name:'分群名称', 122 | condition: '【平台:iOS、Android】OR【时间:6:00-12:00、18:00-24:00】OR【网速:低速、中速】', 123 | testHome: '测试方案名称、测试方案名称、测试方案名称、测试方', 124 | create: '张三丰', 125 | lastUpdate: '2016-11-12 10:20:20', 126 | action: '' 127 | }] 128 | -------------------------------------------------------------------------------- /src/components/testManagement/TestProject.vue: -------------------------------------------------------------------------------- 1 | 91 | 92 | 150 | 151 | 159 | -------------------------------------------------------------------------------- /dist/element-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Tue Sep 6 12:16:07 2016 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 57 | 60 | 63 | 66 | 69 | 72 | 75 | 77 | 79 | 83 | 85 | 87 | 90 | 93 | 96 | 99 | 101 | 104 | 107 | 109 | 112 | 117 | 121 | 125 | 128 | 131 | 134 | 138 | 142 | 145 | 146 | 147 | --------------------------------------------------------------------------------