├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── store
    │   ├── getters.js
    │   ├── index.js
    │   └── modules
    │   │   └── login.js
    ├── App.vue
    ├── api
    │   └── login.js
    ├── router
    │   └── index.js
    ├── components
    │   ├── login.vue
    │   └── index.vue
    └── main.js
├── .editorconfig
├── .postcssrc.js
├── .babelrc
├── index.html
├── README.md
├── LICENSE
├── .gitignore
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yanjao/vue-simple-template/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
1 | const getters = {
2 |   username: state => state.login.username,
3 |   role: state => state.login.role,
4 |   newrouter: state => state.login.newrouter,
5 | };
6 | export default getters


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app'
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     // to edit target browsers: use "browserslist" field in package.json
 6 |     "postcss-import": {},
 7 |     "autoprefixer": {}
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/api/login.js:
--------------------------------------------------------------------------------
1 | export const loginByUserInfo = [
2 |   {"id": 1, "username": "adan", "pew": 123456, "role": "A" , "introduce":"我可以看见全部页面"},
3 |   {"id": 2, "username": "barbara", "pew": 123456, "role": "B" , "introduce":"我可以看到red和yellow页面"},
4 |   {"id": 3, "username": "carrie", "pew": 123456, "role": "C" , "introduce":"我可以看见red和blue页面"},
5 | ]


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill'
 2 | import Vue from 'vue';
 3 | import Vuex from 'vuex';
 4 | import login from './modules/login';
 5 | import getters from './getters';
 6 | 
 7 | Vue.use(Vuex);
 8 | 
 9 | const store = new Vuex.Store({
10 |   modules: {
11 |     login,
12 |   },
13 |   getters
14 | });
15 | 
16 | export default store


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-simple-template</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-simple-template
 2 | ![](/Users/weven/mytest/sa.gif)
 3 | > vue+vuex+vue-router simple template
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 weven
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Login from '@/components/login'
 4 | import Index from '@/components/index'
 5 | Vue.use(Router)
 6 | 
 7 | 
 8 | const red = { template: '<div style="background-color:#de5b5b;color:#fff; font-size:30px;line-height:100px;text-align:center;">red页面</div>' }
 9 | const yellow = { template: '<div style="background-color:#dee066;color:#fff; font-size:30px;line-height:100px;text-align:center;">yellow页面</div>' }
10 | const blue = { template: '<div style="background-color:#6680e0;color:#fff; font-size:30px;line-height:100px;text-align:center;">blue页面</div>' }
11 | 
12 | export default new Router({
13 |   routes: [
14 |     {
15 |       path: '/login',
16 |       name: 'Login',
17 |       component: Login
18 |     }
19 |   ]  
20 | });
21 | 
22 | export const powerRouter =[    
23 |     { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
24 |       children: [
25 |         { path: '/red', name: 'red', component: red,},
26 |         { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
27 |         { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
28 |       ]
29 |     }
30 | ];


--------------------------------------------------------------------------------
/src/components/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="login_box">
 3 |     <el-form label-position="right" label-width="60px" :model="loginfrom">
 4 |       <el-form-item label="用户名">
 5 |         <el-input v-model="loginfrom.username"></el-input>
 6 |       </el-form-item>
 7 |       <el-form-item label="密码">
 8 |         <el-input type="password" v-model="loginfrom.pew"></el-input>
 9 |       </el-form-item>
10 |       <el-form-item>
11 |         <el-button type="primary" @click="submituUserInfo(loginfrom)">登录</el-button>
12 |       </el-form-item>
13 |     </el-form>
14 |   </div>
15 |   
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: 'login',
21 |   data () {
22 |     return {
23 |      loginfrom:{
24 |       username:'',
25 |       pew:'123456'
26 |      }
27 |     }
28 |   },
29 |   methods:{
30 |      submituUserInfo(data){
31 |         console.log(data);
32 |          this.$store.dispatch('Logins',data).then(res => { 
33 |           this.$router.push({ path: '/' });
34 |         }).catch(() => {
35 | 
36 |         })
37 |      }
38 |   }
39 | }
40 | </script>
41 | 
42 | <style scoped>
43 | .login_box{
44 |     width: 280px;
45 |     position: fixed;
46 |     left: 39%;
47 |     top: 200px;
48 |     border: 1px solid skyblue;
49 |     border-radius: 15px;
50 |     padding: 38px 60px 5px 25px;
51 |     text-align: center;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | import { powerRouter } from './router';
 5 | import store from './store';
 6 | import 'normalize.css'
 7 | import ElementUI from 'element-ui'
 8 | import 'element-ui/lib/theme-chalk/index.css'
 9 | 
10 | Vue.use(ElementUI)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | router.beforeEach((to, from, next) => {
15 |     if(store.getters.role){ //判断role 是否存在
16 |     	
17 |     	if(store.getters.newrouter.length !== 0){  
18 |        		next();
19 | 	    }else{
20 | 	    	let newrouter
21 |        		if (store.getters.role == 'A') {  //判断权限
22 |                 newrouter = powerRouter
23 |             } else {
24 |                 let newchildren = powerRouter[0].children.filter(route => {
25 |                     if(route.meta){
26 |                     	if(route.meta.role == store.getters.role){
27 |                     		return true
28 |                         }
29 |                         return false
30 |                     }else{
31 |                         return true
32 |                     }
33 |                 });
34 |                 newrouter = powerRouter
35 |                 newrouter[0].children = newchildren
36 |             }
37 |             router.addRoutes(newrouter) //添加动态路由
38 |             store.dispatch('Roles',newrouter).then(res => { 
39 |                 next({ ...to })
40 |             }).catch(() => {       
41 | 
42 |             })
43 | 	    }	  
44 |     }else{
45 |        	if (['/login'].indexOf(to.path) !== -1) { 
46 |            next()
47 |         } else {
48 |            next('/login')
49 |         }
50 | 	}
51 | })
52 | new Vue({
53 |   el: '#app',
54 |   router,
55 |   store,
56 |   template: '<App/>',
57 |   components: { App }
58 | })
59 | 


--------------------------------------------------------------------------------
/src/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container>
 3 |     <el-header class='header'>
 4 |       <el-row>
 5 |         <el-col :span="23">
 6 |           <el-menu :default-active="$route.path" mode="horizontal" class="nav_box" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" >
 7 |           	<template v-for="item in newrouter[0].children" v-if="!item.hidden">
 8 |           		<router-link v-if="!item.hidden&&!item.children" :to="item.path">
 9 |           	       <el-menu-item :index="item.path" >
10 |                     {{ item.name}}
11 |                    </el-menu-item>
12 |                </router-link>
13 |             </template>
14 |           </el-menu>
15 |         </el-col>
16 |         <el-col :span="1"> 
17 |           <div class="logout_box" @click="logout()">退出</div>
18 |         </el-col>
19 |       </el-row>
20 |     </el-header>
21 |     <el-main>
22 |       <router-view class="view"></router-view>
23 |    </el-main>
24 |   </el-container>
25 | </template>
26 | 
27 | <script>
28 | import { mapGetters } from 'vuex';
29 | export default {
30 |   name: 'index',
31 |   data () {
32 |     return {
33 |      
34 |     }
35 |   },
36 |   computed: {
37 |     ...mapGetters([
38 |         'newrouter'
39 |     ])
40 |   },
41 |   methods: {
42 |     logout(){
43 |     	this.$store.dispatch('Logout').then(() => {
44 |             this.$router.push({ path: '/login' });
45 |         }).catch(err => {
46 |             this.$message.error(err);
47 |         });
48 |     }
49 |   },
50 |   mounted(){
51 |   
52 |   }
53 | }
54 | </script>
55 | 
56 | <style scoped>
57 | .header{
58 | 	padding: 0px;
59 | }
60 | .nav_box{
61 | 	border-bottom: 0px;
62 | }
63 | .logout_box{
64 | 	background-color: #545c64;
65 | 	line-height: 60px;
66 |     width: 100%;
67 |     color:#fff;
68 | }
69 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-simple-template",
 3 |   "version": "1.0.0",
 4 |   "description": "vue+vuex+vue-router simple template",
 5 |   "author": "weven <weven77@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "babel-polyfill": "^6.26.0",
14 |     "element-ui": "^2.0.9",
15 |     "normalize.css": "^7.0.0",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1",
18 |     "vuex": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.2",
22 |     "babel-core": "^6.22.1",
23 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
24 |     "babel-loader": "^7.1.1",
25 |     "babel-plugin-syntax-jsx": "^6.18.0",
26 |     "babel-plugin-transform-runtime": "^6.22.0",
27 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
28 |     "babel-preset-env": "^1.3.2",
29 |     "babel-preset-stage-2": "^6.22.0",
30 |     "chalk": "^2.0.1",
31 |     "copy-webpack-plugin": "^4.0.1",
32 |     "css-loader": "^0.28.0",
33 |     "extract-text-webpack-plugin": "^3.0.0",
34 |     "file-loader": "^1.1.4",
35 |     "friendly-errors-webpack-plugin": "^1.6.1",
36 |     "html-webpack-plugin": "^2.30.1",
37 |     "node-notifier": "^5.1.2",
38 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
39 |     "ora": "^1.2.0",
40 |     "portfinder": "^1.0.13",
41 |     "postcss-import": "^11.0.0",
42 |     "postcss-loader": "^2.0.8",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 4.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/store/modules/login.js:
--------------------------------------------------------------------------------
 1 | import { loginByUserInfo }from '../../api/login'
 2 | const login = {
 3 |   state: {
 4 |   	username:sessionStorage.getItem('USERNAME'),
 5 |   	role:sessionStorage.getItem('ROLE'),
 6 |   	introduce:'',
 7 |   	newrouter:[],
 8 |   },
 9 |   mutations: {
10 |   	SET_USERNAME:(state, username) => {
11 |   		state.username = username;
12 |   	},
13 |   	SET_ROLE:(state, role) => {
14 |   		state.role = role;
15 |   	},
16 |   	SET_INTRODUCE:(state, introduce) =>{
17 |   		state.introduce = introduce;
18 |   	},
19 |   	SET_NEWROUER:(state, newrouter) =>{
20 |   		state.newrouter = newrouter;
21 |   	},
22 |   },
23 |   actions: {
24 |   	Logins({ commit }, info){
25 |   		return new Promise((resolve, reject) => {
26 |       		let data={};
27 |       		loginByUserInfo.map(function (item) { //获取所以用户信息
28 |       			if(info.username === item.username || info.pew === item.pew){
29 |       				commit('SET_USERNAME',item.username);  //将username和role进行存储
30 |       				sessionStorage.setItem('USERNAME', item.username); //存入 session 
31 |       				commit('SET_ROLE',item.role);
32 |       				sessionStorage.setItem('ROLE', item.role);
33 |       				return data={username:item.username,introduce:item.introduce};
34 |       			}else{
35 |       				return data;
36 |       			}
37 |             });  
38 |   		    resolve(data);
39 |         }).catch(error => {
40 |             reject(error);
41 |         });
42 |   	},
43 |   	Roles({ commit }, newrouter){
44 |         return new Promise((resolve, reject) => {
45 |       		commit('SET_NEWROUER',newrouter); //存储最新路由
46 |       		resolve(newrouter);
47 |         }).catch(error => {
48 |             reject(error);
49 |         });
50 |   	},
51 |   	Logout({ commit, state }) {
52 |       return new Promise((resolve, reject) => {
53 |         
54 |           commit('SET_USERNAME','');
55 |           commit('SET_ROLE','');
56 |           commit('SET_NEWROUER',[]);
57 |           location.reload();
58 |           sessionStorage.removeItem('USERNAME');
59 |           sessionStorage.removeItem('ROLE');
60 |           resolve();
61 |         }).catch(error => {
62 |           reject(error);
63 |         });
64 |     },
65 | 
66 |   }
67 | }
68 | export default login;


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.7
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     // CSS Sourcemaps off by default because relative paths are "buggy"
37 |     // with this option, according to the CSS-Loader README
38 |     // (https://github.com/webpack/css-loader#sourcemaps)
39 |     // In our experience, they generally work as expected,
40 |     // just be aware of this issue when enabling this option.
41 |     cssSourceMap: false,
42 |   },
43 | 
44 |   build: {
45 |     // Template for index.html
46 |     index: path.resolve(__dirname, '../dist/index.html'),
47 | 
48 |     // Paths
49 |     assetsRoot: path.resolve(__dirname, '../dist'),
50 |     assetsSubDirectory: 'static',
51 |     assetsPublicPath: '/',
52 | 
53 |     /**
54 |      * Source Maps
55 |      */
56 | 
57 |     productionSourceMap: true,
58 |     // https://webpack.js.org/configuration/devtool/#production
59 |     devtool: '#source-map',
60 | 
61 |     // Gzip off by default as many popular static hosts such as
62 |     // Surge or Netlify already gzip all static assets for you.
63 |     // Before setting to `true`, make sure to:
64 |     // npm install --save-dev compression-webpack-plugin
65 |     productionGzip: false,
66 |     productionGzipExtensions: ['js', 'css'],
67 | 
68 |     // Run the build command with an extra argument to
69 |     // View the bundle analyzer report after build finishes:
70 |     // `npm run build --report`
71 |     // Set to `true` or `false` to always turn it on or off
72 |     bundleAnalyzerReport: process.env.npm_config_report
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------