vue-router vuex模块

Ljhhhhhh · Oct 8, 2019 · c9878c3 · c9878c3
1 parent 87498d8
commit c9878c3
Show file tree

Hide file tree

Showing 16 changed files with 310 additions and 119 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,17 @@
 module.exports = {
   presets: [
     '@vue/app'
+  ],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
   ]
 }
+/*
+'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    } */
diff --git a/package.json b/package.json
@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "lib-flexible": "^0.3.2",
+    "vant": "^2.2.5",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
@@ -18,9 +21,12 @@
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
     "@vue/eslint-config-standard": "^4.0.0",
+    "amfe-flexible": "^2.2.1",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.12.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "postcss-pxtorem": "^4.0.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.10"

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,11 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    autoprefixer: {
+      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
+    },
+    'postcss-pxtorem': {
+      rootValue: 75,
+      propList: ['*']
+    }
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>vue-cli-h5</title>
   </head>

diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/?id=3">Home</router-link> |
+      <router-link to="/about?id=1">About</router-link>
     </div>
     <router-view/>
   </div>
@@ -16,14 +16,4 @@
   text-align: center;
   color: #2c3e50;
 }
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import 'lib-flexible'
 import App from './App.vue'
 import router from './router'
 import store from './store'

diff --git a/src/router.js b/src/router.js
diff --git a/src/router/about.js b/src/router/about.js
@@ -0,0 +1,7 @@
+export default [
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(Router)
+
+let routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  }
+]
+
+const routerContext = require.context('./', true, /\.js$/)
+routerContext.keys().forEach(route => {
+  // 如果是根目录的 index.js 、不处理
+  if (route.startsWith('./index')) {
+    return
+  }
+  const routerModule = routerContext(route)
+  /**
+   * 兼容 import export 和 require module.export 两种规范
+   */
+  routes = routes.concat(routerModule.default || routerModule)
+})
+const myRouter = new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+myRouter.beforeEach((to, from, next) => {
+  if (to.params.direction) {
+    store.commit('updateDirection', to.params.direction)
+  } else {
+    const toIndex = history.getItem(to.path)
+    const fromIndex = history.getItem(from.path)
+    // 判断并记录跳转页面是否访问过，以此判断跳转过渡方式
+    if (toIndex) {
+      if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
+        store.commit('updateDirection', 'forward')
+      } else {
+        store.commit('updateDirection', 'back')
+      }
+    } else {
+      ++historyCount
+      history.setItem('count', historyCount)
+      to.path !== '/' && history.setItem(to.path, historyCount)
+      store.commit('updateDirection', 'forward')
+    }
+  }
+  next()
+})
+
+export default myRouter
diff --git a/src/store.js b/src/store.js
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import test from './modules/test'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    msg: 'hello vuex',
+    loading: false
+  },
+  getters: {
+    loading (state) {
+      return state.loading
+    }
+  },
+  mutations: {
+    setMsg (state, msg) {
+      state.msg = msg
+    },
+    setLoading (state, val) {
+      state.loading = val
+    }
+  },
+  actions: {
+
+  },
+  modules: {
+    test
+  }
+})
+
+/*
+this.$store.registerModule('d',{
+
+})
+*/
diff --git a/src/store/modules/test.js b/src/store/modules/test.js
@@ -0,0 +1,28 @@
+const state = {
+  number: 1
+}
+const actions = {
+  onePlusAction: async ({ commit }, { val }) => {
+    commit('setLoading', true, { root: true })
+    // loading状态
+    await setTimeout(() => {
+      commit('onePlus', val)
+      commit('setLoading', false, { root: true })
+    }, 1500)
+  }
+}
+const mutations = {
+  onePlus (state, val = 1) {
+    state.number = state.number + val
+  }
+}
+const getters = {
+
+}
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+  getters
+}
diff --git a/src/views/About.vue b/src/views/About.vue
@@ -3,3 +3,7 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+<script>
+export default {
+}
+</script>