Merge branch 'feature/template' into develop

Author: felixpy

generator.js

@@ -3,25 +3,49 @@ const fs = require('fs')
 const removeFiles = (files = []) => {
   files.forEach(path => {
     if (fs.existsSync(path)) {
-      fs.unlinkSync(path);
+      fs.unlinkSync(path)
     }
   })
 }
 
+const filesToRemove = [
+  'src/components/HelloWorld.vue',
+  'src/router.js',
+  'src/store.js'
+]
+
+const importsToRemove = [
+  `import store from './store'`,
+  `import router from './router'`
+]
+
 module.exports = (api, options, rootOptions) => {
+  const {
+    entryFile,
+    generator: { imports }
+  } = api
+
   api.extendPackage({
     dependencies: {
-      'element-ui': '^2.4.11'
-    },
+      'element-ui': '^2.4.11',
+      'vuex-router-sync': '^5.0.0'
+    }
   })
 
-  api.injectImports(api.entryFile, `import './registerElementUI'`)
+  // api.injectImports(entryFile, `import './registerElementUI'`)
+
+  // Remove the default imports generated by vue-cli
+  if (imports[entryFile]) {
+    importsToRemove.forEach(itr => imports[entryFile].delete(itr))
+  }
 
+  // Remove the default files generated by vue-cli
+  api.render(function(files) {
+    filesToRemove.forEach(ftr => delete files[ftr])
+  })
   api.render('./template/structure')
 
   api.onCreateComplete(() => {
-    removeFiles([
-      api.resolve('src/components/HelloWorld.vue')
-    ])
+    removeFiles(filesToRemove.map(ftr => api.resolve(ftr)))
   })
 }

preset.json

@@ -4,10 +4,8 @@
     "@vue/cli-plugin-babel": {},
     "@vue/cli-plugin-pwa": {},
     "@vue/cli-plugin-eslint": {
-      "config": "airbnb",
-      "lintOn": [
-        "save"
-      ]
+      "config": "standard",
+      "lintOn": ["save"]
     },
     "@vue/cli-plugin-unit-jest": {}
   },

template/structure/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

template/structure/src/api/index.js

@@ -0,0 +1,104 @@
+import { delay, checkCode } from '@/utils/request'
+
+/* start of mocking user */
+const users = {
+  admin: {
+    id: 100001,
+    name: 'Administrator',
+    roles: ['USER', 'ADMIN']
+  },
+  codetrial: {
+    id: 100001,
+    name: 'Codetrial',
+    roles: ['USER']
+  }
+}
+
+export async function getUser(username) {
+  await delay(200)
+
+  const user = users[username]
+  const response = user
+    ? {
+      status: '1',
+      data: user
+    }
+    : {
+      status: '1100',
+      message: 'Wrong user or password'
+    }
+
+  return Promise.resolve(response).then(checkCode)
+}
+/* end of mocking user */
+
+/* start of mocking example list */
+const exampleSource = Array(235)
+  .fill(1)
+  .map((element, index) => {
+    const personal = index % 2 === 0
+    return {
+      id: index + 10000,
+      name: `Example - ${index} - ${personal ? 'felixpy' : 'codetrial'}`,
+      type: personal ? 1 : 2,
+      status: index % 5 === 0 ? 0 : 1,
+      url: personal ? 'https://felixpy.com' : 'https://codetrial.github.io',
+      createUser: 100001,
+      createUserName: 'Felix Yang',
+      updateUser: 100001,
+      updateUserName: 'Felix Yang',
+      createTime: '2018-12-22 11:00:00',
+      updateTime: '2018-12-22 11:00:00'
+    }
+  })
+
+export async function getExampleList({ filter = {}, page = {} }) {
+  const { pageNo = 1, pageSize = 20 } = page
+  const offset = (pageNo - 1) * pageSize
+  let list = exampleSource
+  let total = exampleSource.length
+
+  // filter
+  Object.keys(filter).forEach(key => {
+    const filterValue = filter[key]
+    if (filterValue != null && filterValue.length) {
+      list = list.filter(item => {
+        if (Array.isArray(filterValue)) {
+          return filterValue.map(String).indexOf(String(item[key])) > -1
+        }
+        return String(item[key]) === String(filterValue)
+      })
+    }
+  })
+
+  total = list.length
+
+  // sort
+  list = list.sort((a, b) => {
+    const { order, orderBy } = page
+
+    if (!order || !orderBy) {
+      return
+    }
+
+    const diff = (order === 'descending' ? -1 : 1) * (a[orderBy] - b[orderBy])
+    return diff > 0 ? 1 : -1
+  })
+
+  // pagination
+  list = list.slice(offset, offset + pageSize)
+
+  await delay(1000)
+
+  return Promise.resolve({
+    status: '1',
+    data: {
+      list,
+      page: {
+        ...page,
+        total
+      }
+    }
+  }).then(checkCode)
+}
+/* end of mocking example list */

template/structure/src/components/errors/403.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="error-page">
+    <div class="error-page__tip">403 Forbidden</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import './index';
+</style>
+
+<script>
+export default {
+  name: 'Forbidden'
+}
+</script>

template/structure/src/components/errors/404.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="error-page">
+    <div class="error-page__tip">404 Not Found</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import './index';
+</style>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>

template/structure/src/components/errors/500.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="error-page">
+    <div class="error-page__tip">500 Internal Server Error</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import './index';
+</style>
+
+<script>
+export default {
+  name: 'InternalServerError'
+}
+</script>

template/structure/src/components/errors/index.js

@@ -0,0 +1,5 @@
+import Forbidden from './403.vue'
+import NotFound from './404.vue'
+import InternalServerError from './500.vue'
+
+export { Forbidden, NotFound, InternalServerError }

template/structure/src/components/errors/index.scss

@@ -0,0 +1,9 @@
+.error-page {
+  padding: 100px 0;
+
+  .error-page__tip {
+    font-size: 48px;
+    font-weight: bold;
+    text-align: center;
+  }
+}

template/structure/src/components/layout/AppBreadcrumb.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="breadcrumb" v-if="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <template v-for="item in breadcrumb">
+        <el-breadcrumb-item
+          v-if="item.path"
+          :key="item.name"
+          :to="{ path: item.path }"
+        >{{ item.name }}</el-breadcrumb-item>
+        <el-breadcrumb-item v-else :key="item.name">{{ item.name }}</el-breadcrumb-item>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppBreadcrumb',
+
+  computed: {
+    ...mapState({
+      breadcrumb: state => {
+        const { breadcrumb } = state.route.meta
+
+        if (breadcrumb) {
+          return breadcrumb.map(item => {
+            if (typeof item === 'string') {
+              const [name, path = null] = item.split(' ')
+              return {
+                name,
+                path
+              }
+            }
+            return item
+          })
+        }
+
+        return null
+      },
+      route: 'route'
+    })
+  }
+}
+</script>