update

README.md

@@ -1,3 +1,5 @@
+# guors-goldenhome
+> dudududududu
 # vue-webpack-boilerplate
 
 > A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

template/README.md

@@ -1,6 +1,10 @@
-# {{ name }}
+# githubtemp
 
-> {{ description }}
+默认使用vux,vuex,axios,vue-router
+
+封装axios请求，添加拦截，公共处理请求。
+
+> A Vue.js project
 
 ## Build Setup
 
@@ -16,21 +20,6 @@ npm run build
 
 # build for production and view the bundle analyzer report
 npm run build --report
-{{#unit}}
-
-# run unit tests
-npm run unit
-{{/unit}}
-{{#e2e}}
-
-# run e2e tests
-npm run e2e
-{{/e2e}}
-{{#if_or unit e2e}}
-
-# run all tests
-npm test
-{{/if_or}}
 ```
 
 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).

template/src/App.vue

@@ -1,25 +1,27 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    {{#router}}
+    <!-- <img src="./assets/logo.png"> -->
     <router-view/>
-    {{else}}
-    <HelloWorld/>
-    {{/router}}
   </div>
 </template>
 
 <script>
-{{#unless router}}
-import HelloWorld from './components/HelloWorld'
-
-{{/unless}}
 export default {
-  name: 'App'{{#router}}{{else}},
-  components: {
-    HelloWorld
-  }{{/router}}
-}
+    name: 'App',
+    created () {
+        // 在页面加载时读取sessionStorage里的状态信息
+        if (sessionStorage.getItem('store')) {
+            console.log('getitem event');
+            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
+        }
+
+        // 在页面刷新时将vuex里的信息保存到sessionStorage里
+        window.addEventListener('beforeunload', () => {
+            console.log('beforeunload event');
+            sessionStorage.setItem('store', JSON.stringify(this.$store.state));
+        });
+    }
+};
 </script>
 
 <style>
@@ -29,6 +31,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

template/src/api/test.js

@@ -0,0 +1,16 @@
+import fetch from '../utils/fetch';
+
+export function testRequest (id) {
+    return fetch({
+        url: process.env.BASE_API + '/jeegoldenhome/jrest/goldenhomecrm/dictApi/getDictList?type=' + id,
+        method: 'get'
+    });
+}
+
+export function request (params) {
+    return fetch({
+        url: process.env.BASE_API + '/grs/guors',
+        method: 'post',
+        data: params
+    });
+}

template/src/components/HelloWorld.vue

@@ -1,97 +1,42 @@
 <template>
   <div class="hello">
-    <h1>\{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
+    <h1>MY NAME IS {{ name }}</h1>
+    <router-link to="/test">run</router-link>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+import { testRequest } from '../api/test';
+
 export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
+    name: 'HelloWorld',
+    data () {
+        return {
+        };
+    },
+    created () {
+        console.log(this.name);
+        this.$store.commit('CHANGE_NAME');
+        console.log(this.name);
+    },
+    computed: {
+        ...mapState([
+            'name', // this.$store.name 映射 this.name
+            'userInfo'
+        ]),
+        ...mapGetters([
+            'sex'
+        ])
+    },
+    methods: {
+        axiosTest () {
+            testRequest('crm_access_type1').then(response => {
+                console.log(JSON.stringify(response));
+            });
+        }
     }
-  }
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

template/src/main.js

@@ -1,26 +1,26 @@
-{{#if_eq build "standalone"}}
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-{{/if_eq}}
-import Vue from 'vue'
-import App from './App'
-{{#router}}
-import router from './router'
-{{/router}}
+import Vue from 'vue';
+import App from './App';
+import router from './router';
+import axios from 'axios';
+import store from './store';
+import { AlertPlugin, ToastPlugin, ConfirmPlugin, LoadingPlugin } from 'vux';
+Vue.use(AlertPlugin);
+Vue.use(ToastPlugin);
+Vue.use(ConfirmPlugin);
+Vue.use(LoadingPlugin);
 
-Vue.config.productionTip = false
+Vue.prototype.$http = axios;
 
+Vue.config.productionTip = false;
+
+console.log(process.env.BASE_API);
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
-  {{#router}}
-  router,
-  {{/router}}
-  {{#if_eq build "runtime"}}
-  render: h => h(App)
-  {{/if_eq}}
-  {{#if_eq build "standalone"}}
-  components: { App },
-  template: '<App/>'
-  {{/if_eq}}
-})
+    el: '#app',
+    store,
+    router,
+    components: { App },
+    template: '<App/>'
+});

template/src/router/index.js

@@ -1,15 +1,21 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Vue from 'vue';
+import Router from 'vue-router';
+import HelloWorld from '@/components/HelloWorld';
+import Test from '@/components/Test';
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
-  ]
-})
+    routes: [
+        {
+            path: '/',
+            name: 'HelloWorld',
+            component: HelloWorld
+        },
+        {
+            path: '/Test',
+            name: 'Test',
+            component: Test
+        }
+    ]
+});

template/src/store/actions.js

@@ -0,0 +1,12 @@
+const actions = {
+    changeName ({commit}, payload) { // 自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                commit('CHANGE_NAME');
+                resolve();
+            }, 500);
+        });
+    }
+};
+
+export default actions;

template/src/store/getters.js

@@ -0,0 +1,8 @@
+const getters = {
+    name: state => state.name,
+    age: state => state.age,
+    sex: (state, getters) => {
+        return getters.name + state.sex;
+    }
+};
+export default getters;

template/src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions';
+
+Vue.use(Vuex);
+
+const state = {
+    name: '1',
+    age: '',
+    sex: 'boy',
+    userInfo: { mobile: '12345678901' }
+};
+
+const store = new Vuex.Store({
+    state,
+    getters,
+    mutations,
+    actions,
+    modules: {}
+});
+
+export default store;

template/src/store/mutations.js

@@ -0,0 +1,11 @@
+const mutations = {
+    CHANGE_NAME: (state, payload) => {
+        // return new Promise((resolve, reject) => {
+        // console.log(payload);
+        state.name++;
+        // resolve();
+        // });
+    }
+};
+
+export default mutations;