添加vuex相关

界面优化

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/admin/',
+    assetsPublicPath: '/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "nprogress": "^0.2.0",
-    "vue": "^2.0.1"
+    "vue": "^2.0.1",
+    "vuex": "^2.0.0-rc.6"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
@@ -23,7 +24,7 @@
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.25.0",
-    "element-ui": "^1.0.0-rc.8",
+    "element-ui": "^1.0.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -43,7 +44,7 @@
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1"
+    "webpack-merge": "^0.16.0"
   },
   "engines": {
     "node": ">= 4.0.0",

src/components/Home.vue

@@ -15,7 +15,7 @@
 			<aside style="width:230px;">
 				<h5 class="admin">欢迎系统管理员：测试</h5>
 				<el-menu style="border-top: 1px solid #475669;" default-active="/page1" class="el-menu-vertical-demo" @open="handleopen"
-					@close="handleclose" @select="handleselect" theme="dark" unique-opened="true" router="true">
+					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
 					<el-submenu index="1">
 						<template slot="title"><i class="el-icon-message"></i>导航一</template>
 						<el-menu-item index="/page1">页面1</el-menu-item>
@@ -36,11 +36,11 @@
 			<section class="panel-c-c">
 				<div class="grid-content bg-purple-light">
 					<el-col :span="24" style="margin-bottom:15px;">
-						<strong style="width:200px;float:left;color: #475669;">{{$store.state.currentPathName}}</strong>
+						<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
 						<el-breadcrumb separator="/" style="float:right;">
 							<el-breadcrumb-item :to="{ path: '/page1' }">首页</el-breadcrumb-item>
-							<el-breadcrumb-item>{{$store.state.currentPathNameParent}}</el-breadcrumb-item>
-							<el-breadcrumb-item>{{$store.state.currentPathName}}</el-breadcrumb-item>
+							<el-breadcrumb-item>{{currentPathNameParent}}</el-breadcrumb-item>
+							<el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
 						</el-breadcrumb>
 					</el-col>
 					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
@@ -59,6 +59,8 @@
   export default {
     data() {
       return {
+		  currentPathName:'导航一',
+		  currentPathNameParent:'页面一',
         form: {
           name: '',
           region: '',
@@ -71,19 +73,23 @@
         }
       }
     },
+	watch: {
+		'$route' (to, from) {//监听路由改变
+			this.currentPathName=to.name;
+			this.currentPathNameParent=to.matched[0].name;
+		}
+	},
     methods: {
       onSubmit() {
         console.log('submit!');
       },
 			handleopen(){
-				console.log('handleopen');
+				//console.log('handleopen');
 			},
 			handleclose(){
-				console.log('handleclose');
+				//console.log('handleclose');
 			},
             handleselect:function(a,b){
-                    console.log(a);
-                     console.log(b);
             },
 			//退出登录
 			logout:function(){

src/components/Login.vue

@@ -1,18 +1,18 @@
 <template>
-	<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
-		<h3 class="title">系统登录</h3>
-		<el-form-item prop="account">
-			<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
-		</el-form-item>
-		<el-form-item prop="checkPass">
-			<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
-		</el-form-item>
-		<el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
-		<el-form-item style="width:100%;">
-			<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button>
-			<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
-		</el-form-item>
-	</el-form>
+  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
+    <h3 class="title">系统登录</h3>
+    <el-form-item prop="account">
+      <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
+    </el-form-item>
+    <el-form-item prop="checkPass">
+      <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
+    </el-form-item>
+    <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
+    <el-form-item style="width:100%;">
+      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button>
+      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
+    </el-form-item>
+  </el-form>
 </template>
 
 <script>
@@ -57,28 +57,28 @@
 </script>
 
 <style scoped>
-	.card-box {
-		padding: 20px;
-		/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		-moz-border-radius: 5px;
-		background-clip: padding-box;
-		margin-bottom: 20px;
-		background-color: #F9FAFC;
-		margin: 120px auto;
-		width: 400px;
-		border: 2px solid #8492A6;
-	}
+  .card-box {
+    padding: 20px;
+    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    background-clip: padding-box;
+    margin-bottom: 20px;
+    background-color: #F9FAFC;
+    margin: 120px auto;
+    width: 400px;
+    border: 2px solid #8492A6;
+  }
   
-	.title {
-		margin: 0px auto 40px auto;
-		text-align: center;
-		color: #505458;
-	}
+  .title {
+    margin: 0px auto 40px auto;
+    text-align: center;
+    color: #505458;
+  }
   
-	.loginform {
-		width: 350px;
-		padding: 35px 35px 15px 35px;
-	}
+  .loginform {
+    width: 350px;
+    padding: 35px 35px 15px 35px;
+  }
 </style>

src/components/nav1/Page1.vue

@@ -18,25 +18,17 @@
 				</el-form-item>
 			</el-form>
 		</el-col>
-		<el-table :data="tableData" style="width: 100%" border>
-			<el-table-column type="selection" width="50">
-			</el-table-column>
-			<el-table-column prop="name" label="姓名" width="150">
-			</el-table-column>
-			<el-table-column prop="sex" label="性别" width="150">
+
+		<el-table :data="tableData" style="width: 100%">
+			<el-table-column prop="date" label="日期" width="180">
 			</el-table-column>
-			<el-table-column prop="age" label="年龄" width="150">
+			<el-table-column prop="name" label="姓名" width="180">
 			</el-table-column>
 			<el-table-column prop="address" label="地址">
 			</el-table-column>
-			<el-table-column prop="date" label="日期" width="150">
-			</el-table-column>
-			<el-table-column inline-template label="操作" width="80">
-				<el-button type="text" size="small">编辑</el-button>
-			</el-table-column>
 		</el-table>
+
 		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
-			<el-button>删除</el-button>
 			<el-pagination :current-page="5" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
 				:total="400" style="float:right">
 			</el-pagination>
@@ -57,98 +49,24 @@
           }
         },
 				value1:'',
-				tableData: [{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
-          },{
-            date: '2016-05-02',
-            name: 'CHEN',
-            age: '50',
-            sex: '男',
-            address: '1231321321321321'
+        tableData: [{
+            date: '2016-11-02',
+            name: '123456',
+            address: '123456'
+          }, {
+            date: '2016-11-02',
+            name: '123456',
+            address: '123456'
+          }, {
+            date: '2016-11-02',
+            name: '123456',
+            address: '123456'
+          }, {
+            date: '2016-11-02',
+            name: '123456',
+            address: '123456'
           }]
-      }
+     }
     },
     methods: {
     }

src/components/nav2/Page4.vue

@@ -1,4 +1,32 @@
 <template>
-	<section>page4...
-	</section>
+	<div>
+		<h1>vuex 测试</h1>
+		Clicked: {{ getCount }} times
+		<button @click="increment">+</button>
+		<button @click="decrement">-</button>
+	</div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
+
+export default {
+	computed: {
+  	// 使用对象展开运算符将 getters 混入 computed 对象中
+    ...mapGetters([
+      'getCount'
+      // ...
+    ])
+  },
+   methods: {
+    ...mapActions([
+      'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
+	  'decrement'
+    ])
+    //...mapActions({
+    //  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
+    //})
+  }
+}
+</script>

src/main.js

@@ -3,7 +3,7 @@ import App from './App'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import VueRouter from 'vue-router'
-import store from './store/config'
+import store from './vuex/store'
 import Vuex from 'vuex'
 import NProgress from 'nprogress'//页面顶部进度条
 import 'nprogress/nprogress.css'
@@ -50,30 +50,20 @@ const routes = [
     component: Home,
     name: '导航三',
     children: [
-      { path: '/page6', component: Page4, name: '' }
+      { path: '/page6', component: Page6, name: '' }
     ]
   }
 ]
 
 const router = new VueRouter({
-  routes // （缩写）相当于 routes: routes
+  routes
 })
 
 router.beforeEach((to, from, next) => {
-  // to 和 from 都是 路由信息对象
-  console.log(to);
-  console.log(from);
-  store.state.currentPathNameParent = to.matched[0].name;
-  store.state.currentPathName = to.name;
-  //store.commit('setCurrentPath',to.path);
   NProgress.start();
   next()
 })
 
-// router.beforeEach(transition => {
-//   NProgress.done();
-// });
-
 router.afterEach(transition => {
   NProgress.done();
 });
@@ -84,6 +74,7 @@ new Vue({
   router,
   store,
   components: { App }
+  //render: h => h(Login)
 }).$mount('#app')
 
 router.replace('/login')

src/store/config.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-const config = new Vuex.Store({
-    state: {
-        count: 0,
-        //currentPath: '/login',
-        currentPathName: '登录',
-        currentPathNameParent: '导航一',
-        apiUrl: 'http://localhost:5683/WebForm1.aspx'
-    },
-    mutations: {
-        increment(state) {
-            state.count++
-        },
-        setCurrentPath: function (state, path) {
-            state.currentPath = path
-        },
-    }
-})
-
-export default config

src/vuex/actions.js

@@ -0,0 +1,7 @@
+//test
+export const increment = ({commit}) => {
+    commit('INCREMENT')
+}
+export const decrement = ({commit}) => {
+    commit('DECREMENT')
+}

src/vuex/getters.js

@@ -0,0 +1,4 @@
+//test
+export const getCount = state => {
+    return state.count
+}

src/vuex/store.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as actions from './actions'
+import * as getters from './getters'
+
+Vue.use(Vuex)
+
+// 应用初始状态
+const state = {
+    count: 10
+}
+
+// 定义所需的 mutations
+const mutations = {
+    INCREMENT(state) {
+        state.count++
+    },
+    DECREMENT(state) {
+        state.count--
+    }
+}
+
+// 创建 store 实例
+export default new Vuex.Store({
+    actions,
+    getters,
+    state,
+    mutations
+})