主要是升级到了webpack4, 还在准备升级babel7

.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     ["env", { "modules": false }],
     "stage-3"
+  ],
+  "plugins": [
+    "transform-runtime"
   ]
 }

.gitignore

@@ -2,6 +2,8 @@
 node_modules/
 npm-debug.log
 yarn-error.log
+dist/
+.cache/
 
 # Editor directories and files
 .idea

package.json

@@ -33,18 +33,22 @@
     "not ie <= 8"
   ],
   "devDependencies": {
+    "@vue/component-compiler-utils": "^2.2.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.3",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-3": "^6.24.1",
     "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
+    "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "vue-loader": "^15.4.1",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.6"
   }
 }

src/crud.js

@@ -0,0 +1,7 @@
+import crud from './crud.vue'
+
+if (typeof window !== 'undefined' && window.Vue) {
+  Vue.component('crud', crud)
+}
+
+export default crud

src/crud.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="grid-btn">
+			<span v-if="hasPermission(permissionPath + 'save')">
+            <a class="btn btn-primary" @click="$emit('add')"><i class="fa fa-plus"></i>&nbsp;新增</a>
+			</span>
+      <span v-if="hasPermission(permissionPath + 'update')">
+            <a class="btn btn-primary" @click="$emit('save')"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
+			</span>
+      <span v-if="hasPermission(permissionPath + 'delete')">
+            <a class="btn btn-primary" @click="$emit('del')"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
+			</span>
+    <slot name="headerButton"></slot>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="viewData"
+      :options="options"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @dialog-cancel="handleDialogCancel"
+      @row-add="handleRowAdd"
+      @row-edit="handleRowEdit"
+      selection-row
+      @selection-change="selectionChangeHandle"
+      :pagination="pagination">
+    </d2-crud>
+  </div>
+
+</template>
+
+<script>
+  // import d2Crud from './d2-crud'
+  // import element from './element.js'
+  import crud from './mixin/crud.js'
+
+  export default {
+    name: 'crud',
+    mixins:[crud],
+    data() {
+      return {
+        dataForm: {
+          key: ''
+        },
+        viewData: [],
+        dataList: [],
+        pageIndex: 0,
+        pageSize: 100,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        addOrUpdateVisible: false,
+        options: {
+          border: true,
+          size: 'mini'
+        },
+        pagination: {
+          pageSize: 10,
+          layout: '->, prev, pager, next, total'
+        },
+        formOptions: {
+          labelWidth: '90px',
+          labelPosition: 'right',
+          saveLoading: false,
+          gutter: 10
+        },
+        permissionPath:'',
+        columns:[],
+        formTemplate:{},
+        formRules:{}
+      }
+    },
+    computed: {
+
+    },
+    created() {
+      this.entityName = this.$parent.entityName
+      this.colModel = this.$parent.colModel
+      this.permissionPath = this.$parent.modulePath.replace(/\//g,':')
+      this.entityClass = spring.extend(this.entityName)
+      this.$on('add', this.toAdd)
+      this.$on('save', this.toUpdate)
+      this.$on('del', this.remove)
+    },
+    async mounted() {
+      const search = self.location.search
+      const id = search.substring(search.indexOf('=') + 1)
+      if (id) {this.id = id}
+
+      this.getDataList()
+
+      let columns = this.colModel.map(it => ({'title': it.label, key: it.name, showOverflowTooltip: true}))
+
+      const formColumns = columns.filter(it => it.key != 'id')
+      const formTemplate = {}
+      for( let it of formColumns){
+        formTemplate[it.key] = {
+          title: it.title, component: {
+            span: 12
+          }}
+      }
+
+      const formRules = {}
+      formColumns.forEach(it => formRules[it.key] = [{required: true, message: '请检查格式是否正确', trigger: 'blur'}])
+
+      if(this.$parent.dataModel){
+        this.columns = await this.$parent.dataModel(columns,formTemplate,formRules,this.id)
+      }
+      // else {
+      //   this.columns = columns
+      // }
+      if(!this.columns || !this.columns[0]){
+        this.columns = columns
+      }
+
+      this.formTemplate = formTemplate
+      this.formRules = formRules
+    },
+    methods: {
+      hasPermission: window.hasPermission,
+      // 每页数
+      sizeChangeHandle(val) {
+        this.pageSize = val
+        this.pageIndex = 0
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle(val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle(val) {
+        this.dataListSelections = val
+      },
+      toAdd() {
+        this.$refs.d2Crud.handleAdd()
+        this.current = new this.entityClass()
+      },
+      getSelectedRow(event) {
+        const selectedIDs = this.dataListSelections
+        if (selectedIDs.length == 0) {
+          alert('请选择一条记录')
+          return
+        }
+        if (selectedIDs.length > 1) {
+          alert('只能选择一条记录')
+          return
+        }
+
+        return selectedIDs[0]
+      },
+      toUpdate(event) {
+        const row = this.getSelectedRow()
+        if (!row) return
+        const d2Crud = this.$refs.d2Crud
+        if (d2Crud) {
+          d2Crud.handleEdit(row.id, row)
+        }
+        else {
+          this.current = row
+          this.showList = false
+          this.title = '修改'
+        }
+      },
+      handleRowAdd(row, done) {
+        this.formOptions.saveLoading = true
+        this.current.patchData(row)
+        if(this.$parent.handleBeforeCreate){
+          this.$parent.handleBeforeCreate(this.current)
+        }
+        this.addDate()
+        this.current.save().then(this.success(done)).catch(this.fail)
+        this.formOptions.saveLoading = false
+      },
+      handleRowEdit({index, row}, done) {
+        this.formOptions.saveLoading = true
+        this.current = row
+        this.addDate()
+        this.current.save().then(this.success(done)).catch(this.fail)
+        this.formOptions.saveLoading = false
+      },
+      remove() {
+        const row = this.getSelectedRow()
+        if (!row) return
+        confirm('确定要删除选中的记录？', () => {
+          row.remove().then(this.success).catch(this.fail)
+        })
+      },
+      handleDialogCancel(done) {
+        // this.$message({
+        //   message: '取消编辑',
+        //   type: 'warning'
+        // })
+        done()
+      },
+      // 获取数据列表
+      async getDataList() {
+        this.dataListLoading = true
+        const param = {
+          'page': this.pageIndex,
+          'size': this.pageSize
+          // 'key': this.dataForm.key
+        }
+        this.viewData = await this.findData(param)
+
+        this.totalPage = this.viewData.page.totalElements
+        this.dataListLoading = false
+      },
+      async findData(param) {
+        if (this.id) {
+          return this.searchData(param, this.id)
+        }
+        return await this.entityClass.findAll(param)
+      },
+      async searchData(param, id) {
+        return await this.entityClass.search('findByCustomerId', {customerId: id, ...param})
+      },
+      dateChange(val) {
+        val.value = val.picker.date
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>