增加了vuex和一些全局的东西

build/webpack.base.conf.js

@@ -19,7 +19,7 @@ const createLintingRule = () => ({
   }
 })
 
-module.exports = {
+let exportObj = {
   context: path.resolve(__dirname, '../'),
   entry: {
     app: './src/main.js'
@@ -90,3 +90,21 @@ module.exports = {
     child_process: 'empty'
   }
 }
+if(process.env.NODE_ENV !== 'production'){
+  let babelLoader = exportObj.module.rules.find(v => v.loader == "babel-loader");
+  if(babelLoader){
+    babelLoader.options = {
+      presets:[
+        [
+          "env",
+          {
+            "targets": {
+              "chrome":76
+            }
+          }
+        ]
+      ]
+    }
+  }
+}
+module.exports = exportObj;

config/index.js

@@ -37,7 +37,7 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval',
 
     // If you have problems debugging vue-files in devtools,
     // set this to false - it *may* help

package.json

@@ -27,7 +27,8 @@
     "jstree": "^3.3.10",
     "popper.js": "^1.16.1",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/common/errorHandler.js

@@ -0,0 +1,14 @@
+
+
+export let handleVueError = (err, vm, info) => {
+  console.error(...arguments);
+}
+export let handleVueWarning = (msg, vm, trace) => {
+  console.warn(...arguments);
+}
+export let handleGlobalError = (message, source, lineno, colno, error) => {
+  console.error(...arguments);
+}
+export let handleGlobalRejection = (e) => {
+  console.error(...arguments);
+}

src/common/globalMixins.js

@@ -1,8 +1,16 @@
-import {sendRequest} from "./service-utils"
+import {sendRequest} from "./service-utils";
+import {Result} from "../common/Result.js";
+import {handleVueError,handleVueWarning,handleGlobalError,handleGlobalRejection} from "./errorHandler.js";
+window.Result = Result;
 export const globalPlugin = {
   install(Vue){
     Vue.config.productionTip = false;
-    Vue.prototype.sendRequest = sendRequest.bind(Vue.prototype,Vue.prototype);
+    Vue.prototype.$sendRequest = sendRequest.bind(Vue.prototype,Vue.prototype);
+    Vue.prototype.$isDev = process.env.NODE_ENV == 'development';
+    Vue.config.errorHandler = handleVueError;
+    Vue.config.warnHandler = handleVueWarning;
+    window.onerror = handleGlobalError;
+    window.onunhandledrejection = handleGlobalRejection;
   }
 }
 export const globalMixins = {
@@ -13,6 +21,9 @@ export const globalMixins = {
   },
   methods:{},
   mounted(){
-    (window.comps || (window.comps = {}))[this.$options.name || "anonymous"] = this;
+    if(this.$isDev){
+      (window.comps || (window.comps = {}))[this.$options.name || "anonymous"] = this;
+    }
   }
 }
+

src/common/index-db.js

@@ -0,0 +1,131 @@
+const { Result } = require("./Result");
+const { cat } = require("shelljs");
+const { data } = require("jquery");
+
+let tableNames = {
+  "REQUESTS":"REQUESTS"
+};
+let dbConfig = {
+  databaseName:"test1",
+  version:Date.now(),
+  tables:{
+    [tableNames.REQUESTS]:{
+      keyPath: 'id'
+    }
+  }
+}
+
+class IndexedDB{
+  dbConfig = dbConfig;
+  db = null;
+  tables = {};
+  constructor(){
+    this.init()
+
+  }
+  async init(){
+    return new Promise((resolve,reject) => {
+      try{
+        if(!window.indexedDB){
+          return resolve(Result.fail({msg:"浏览器不支持indexdb"}));
+        }
+        let request = window.indexedDB.open(dbConfig.databaseName, dbConfig.version);
+        request.onerror = event => resolve(Result.fail({msg:"数据库打开报错"}));
+        request.onsuccess = event => {
+          // this.db = request.result;
+          // resolve(Result.success({msg:"数据库打开成功",data:request.result}));
+        };
+        request.onupgradeneeded = event => {
+          this.db = request.result;
+          for(let tablename in this.dbConfig.tables){
+            let objectStore = null;
+            if(!this.db.objectStoreNames.contains(tablename)){
+              objectStore = this.db.createObjectStore(tablename,this.dbConfig.tables[tablename]);
+            }
+            this.tables[tablename] = objectStore;
+          }
+          resolve(Result.success({msg:"数据库打开成功",data:request.result}));
+        };
+      }catch(e){
+        resolve(Result.fail({msg:"程序错误",data:e}))
+      }
+    })
+  }
+  async add(tablename,data){
+    return new Promise((resolve,reject) => {
+      if(this.db.objectStoreNames.contains(tablename)){
+        let request = this.db
+          .transaction([tablename], 'readwrite')
+          .objectStore(tablename)
+          .add(data);
+        request.onsuccess = function (event) {
+          resolve(Result.success({msg:"数据写入成功",data:data}));
+        };
+        request.onerror = function (event) {
+          resolve(Result.success({msg:"数据写入失败",data:data}));
+        }
+      }else{
+        resolve(Result.fail({msg:`表${tablename}不存在`}))
+      }
+    });
+  }
+  async get(tablename,key){
+    return new Promise((resolve,reject) => {
+      if(this.db.objectStoreNames.contains(tablename)){
+        let request = this.db
+          .transaction([tablename], 'readwrite')
+          .objectStore(tablename)
+          .get(key);
+        request.onerror = function(event) {
+          resolve(Result.fail({msg:"失败"}))
+        };
+        request.onsuccess = function( event) {
+          resolve(Result.success({msg:"查询成功",data:request.result||{}}))
+        };
+      }else{
+        resolve(Result.fail({msg:`表${tablename}不存在`}))
+      }
+    });
+  }
+  async put(tablename,data){
+    return new Promise((resolve,reject) => {
+      if(this.db.objectStoreNames.contains(tablename)){
+        let request = this.db
+          .transaction([tablename], 'readwrite')
+          .objectStore(tablename)
+          .put(data);
+        request.onerror = function(event) {
+          resolve(Result.fail({msg:`${tablename}更新失败`,data:data}));
+        };
+        request.onsuccess = function( event) {
+          resolve(Result.success({msg:`${tablename}更新成功`,data:data}));
+        };
+      }else{
+        resolve(Result.fail({msg:`表${tablename}不存在`}))
+      }
+    });
+  }
+  async delete(tablename,key){
+    return new Promise((resolve,reject) => {
+      if(this.db.objectStoreNames.contains(tablename)){
+        let request = this.db
+          .transaction([tablename], 'readwrite')
+          .objectStore(tablename)
+          .delete(key);
+        request.onerror = function(event) {
+          resolve(Result.fail({msg:`${tablename}删除${key}失败`}));
+        };
+        request.onsuccess = function( event) {
+          resolve(Result.success({msg:`${tablename}删除${key}成功`,data:key}));
+        };
+      }else{
+        resolve(Result.fail({msg:`表${tablename}不存在`}))
+      }
+    });
+  }
+}
+let indexdb = new IndexedDB();
+export {
+  indexdb,
+  tableNames
+};

src/common/service-utils.js

@@ -8,7 +8,7 @@ export const sendRequest = (ins,url,params,showLoading=true,showError=true) => {
       loadingIns = ins.$loading();
     }
     let o = {
-      type: "get",
+      type: "POST",
       data:params,
       dataType:"JSON",
       xhrFields: {withCredentials: true},

src/main.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import Vuex from 'vuex'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
@@ -8,6 +9,8 @@ import 'element-ui/lib/theme-chalk/index.css'
 import 'bootstrap3/dist/css/bootstrap.min.css'
 import 'font-awesome/css/font-awesome.css'
 import {globalMixins,globalPlugin} from "./common/globalMixins.js"
+import {store} from "./store/index.js";
+
 
 
 Vue.use(ElementUI);
@@ -18,6 +21,7 @@ Vue.mixin(globalMixins);
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/store/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import {plugin} from "./plugin.js"
+Vue.use(Vuex)
+
+
+let initState = {
+  count: 0
+}
+let state = JSON.parse(localStorage.getItem("state")) || initState;
+export const store = new Vuex.Store({
+  plugins: [plugin],
+  state: state,
+  mutations: {
+    increment (state) {
+      state.count++
+    }
+  }
+})

src/store/plugin.js

@@ -0,0 +1,5 @@
+export const plugin = store => {
+  store.subscribe((mutation, state) => {
+    localStorage.setItem("state",JSON.stringify(state));
+  })
+}