diff --git a/README.md b/README.md
index 79dbddc..32b23af 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,86 @@
 # vue-cli-plugin-element
 
-Quickly build a backend system with vue-cli and element-ui in seconds.
\ No newline at end of file
+[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+
+Quickly build a backend system with vue-cli and element-ui in seconds.
+
+This project is not only a vue-cli plugin but also a vue-cli preset. Have fun!
+
+:us: English | [:cn: 简体中文](README.zh-CN.md)
+
+## Getting Started
+
+### Prerequisites
+
+You must install Vue CLI 3 before you start:
+
+```bash
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+### Install
+
+You can create your project directly via preset, which already includes configurations such as ESLint and other plugins.
+
+```bash
+vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
+```
+
+If you don't want to use the preset , you can manually create an empty project via vue-cli.
+
+```bash
+# make sure the following features are selected:
+# - Babel
+# - PWA
+# - Router
+# - Vuex
+# - CSS Pre-processors
+# - Linter - Formatter
+vue create your-awesome-project
+```
+
+Then add the plugin to your project via vue.
+
+```bash
+vue add @codetrial/element
+```
+
+## Docs
+
+The full documentation: [:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
+
+## Example
+
+A complete example project: [:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
+
+Live Preview: [:telescope: element-admin.now.sh](https://element-admin.now.sh)
+
+## Core Features
+
+- :camera: Minimal dependencies
+- :tv: Project Structure
+- :telephone_receiver: View Layout
+- :pager: Data Processing Layer
+- :watch: Authorization
+- :radio: Error Pages
+- :mag_right: List Example
+- :ghost: Form Example
+
+## Contributing
+
+Looking forward to your pull requests.
+
+## Built With
+
+- [Vue.js](https://github.com/vuejs/vue)
+- [ElementUI](https://github.com/ElemeFE/element)
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2018 - present, Felix Yang
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..8fd92f5
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,93 @@
+# vue-cli-plugin-element
+
+[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
+
+使用 vue-cli 及 element-ui 闪电般构建一个后台管理系统。
+
+这个项目不仅仅是一个 vue-cli 插件，也是一个 vue-cli preset，希望能够帮到你！
+
+:cn: 简体中文 | [:us: English](README.md)
+
+## 入门指南
+
+### 前置依赖
+
+在开始前，你需要先安装 Vue CLI 3：
+
+```bash
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+### 安装
+
+你可以通过 preset 的方式直接创建你的项目，它已经包含了 ESLint 等插件的配置。
+
+```bash
+vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
+```
+
+如果你不想使用 preset 的方式，你也可以先通过 vue-cli 手动创建一个空的项目。
+
+```bash
+# 确保你创建的项目选择了以下功能：
+# - Babel
+# - PWA
+# - Router
+# - Vuex
+# - CSS Pre-processors
+# - Linter - Formatter
+vue create your-awesome-project
+```
+
+然后通过 vue 将插件添加到你的项目中。
+
+```bash
+vue add @codetrial/element
+```
+
+## 文档
+
+完整的参考文档：[:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
+
+## 示例
+
+一个使用该插件的完整示例：[:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
+
+在线预览：[:telescope: element-admin.now.sh](https://element-admin.now.sh)
+
+## 核心功能
+
+:camera: **最小依赖**：仅依赖 Vue 官方库及 ElementUI 组件库，未额外引入其它第三方库，为你提供自由发挥的空间。
+
+:tv: **目录结构**：根据项目实战经验，设计了合理、清晰的目录结构。
+
+:telephone_receiver: **页面布局**：使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
+
+:pager: **数据处理**：添加独立的 api 及 service 层，将业务逻辑从组件中抽离。
+
+:watch: **权限控制**：为路由添加配置式拦截器，默认支持用户登录鉴权及角色鉴权。
+
+:radio: **列表示例**：一个相对比较完整的列表页示例，包含字段查询（过滤），字段排序，页码跳转，批量操作等等。
+
+:mag_right: **表单示例**：一个相对比较完整的表单页示例，包含表单校验、提交等操作。
+
+:ghost: **错误页面**：内置简单的（其实是偷懒） 403、404 及 500 错误页。
+
+## 贡献
+
+期待你的 `pull requests`。如果你觉得有帮助，还请多多反馈！
+
+## 技术栈
+
+- [Vue.js](https://github.com/vuejs/vue)
+- [ElementUI](https://github.com/ElemeFE/element)
+
+## 许可
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2018 - present, Felix Yang
diff --git a/generator.js b/generator.js
index ad59ef7..31e9bea 100644
--- a/generator.js
+++ b/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)))
   })
 }
diff --git a/package.json b/package.json
index 3b2490f..e1395e6 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "vue-cli-plugin-element",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Quickly build a backend system with vue-cli and element-ui in seconds.",
   "main": "index.js",
   "scripts": {
-    "test": "yarn test"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -12,7 +12,11 @@
   },
   "keywords": [
     "vue",
-    "cli",
+    "vue-cli",
+    "vue-cli-plugin",
+    "vue-cli-preset",
+    "preset",
+    "plugin",
     "element",
     "layout",
     "structure"
diff --git a/preset.json b/preset.json
index 5633d40..66b7f6c 100644
--- a/preset.json
+++ b/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": {}
   },
diff --git a/template/structure/src/App.vue b/template/structure/src/App.vue
new file mode 100644
index 0000000..3214fb0
--- /dev/null
+++ b/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>
diff --git a/template/structure/src/api/index.js b/template/structure/src/api/index.js
new file mode 100644
index 0000000..187831d
--- /dev/null
+++ b/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 */
diff --git a/template/structure/src/components/errors/403.vue b/template/structure/src/components/errors/403.vue
new file mode 100644
index 0000000..d11088b
--- /dev/null
+++ b/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>
diff --git a/template/structure/src/components/errors/404.vue b/template/structure/src/components/errors/404.vue
new file mode 100644
index 0000000..f621b40
--- /dev/null
+++ b/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>
diff --git a/template/structure/src/components/errors/500.vue b/template/structure/src/components/errors/500.vue
new file mode 100644
index 0000000..e20e086
--- /dev/null
+++ b/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>
diff --git a/template/structure/src/components/errors/index.js b/template/structure/src/components/errors/index.js
new file mode 100644
index 0000000..544d48d
--- /dev/null
+++ b/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 }
diff --git a/template/structure/src/components/errors/index.scss b/template/structure/src/components/errors/index.scss
new file mode 100644
index 0000000..f5a3409
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/template/structure/src/components/layout/AppBreadcrumb.vue b/template/structure/src/components/layout/AppBreadcrumb.vue
new file mode 100644
index 0000000..8a0f68f
--- /dev/null
+++ b/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>
diff --git a/template/structure/src/components/layout/AppFooter.vue b/template/structure/src/components/layout/AppFooter.vue
new file mode 100644
index 0000000..296cc03
--- /dev/null
+++ b/template/structure/src/components/layout/AppFooter.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="footer">
+    <div class="footer-copyright">MIT Licensed | Copyright © 2018-present Felix Yang</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  .footer-copyright {
+    text-align: center;
+    padding: 20px;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'AppFooter'
+}
+</script>
diff --git a/template/structure/src/components/layout/AppHeader.vue b/template/structure/src/components/layout/AppHeader.vue
new file mode 100644
index 0000000..836d382
--- /dev/null
+++ b/template/structure/src/components/layout/AppHeader.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="header">
+    <el-menu
+      class="header-nav-menu"
+      :default-active="path"
+      :router="true"
+      background-color="#f7f7f7"
+      mode="horizontal"
+    >
+      <el-menu-item index="/">首页</el-menu-item>
+      <template v-if="user.id">
+        <el-submenu index="/example" :show-timeout="300" :hide-timeout="0">
+          <template slot="title">示例模块</template>
+          <el-menu-item index="/example">列表页</el-menu-item>
+          <el-menu-item index="/example/new">表单页</el-menu-item>
+          <el-menu-item index="/example/admin-authorized">错误 - 403 无权限（管理员可见）</el-menu-item>
+          <el-menu-item index="/example/some-page">错误 - 404 页面找不到</el-menu-item>
+          <el-menu-item index="/500">错误 - 500 服务器内部错误</el-menu-item>
+        </el-submenu>
+        <el-menu-item index="/about">关于</el-menu-item>
+      </template>
+    </el-menu>
+    <div class="header-user-menu" v-if="user.id">
+      <el-dropdown class="header-user-menu__item" @command="handleUserCommand">
+        <span class="el-dropdown-link">
+          {{ user.name || 'Unkown User'}}
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="logout">注销登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  background-color: #f7f7f7;
+
+  .header-nav-menu {
+    flex-grow: 1;
+  }
+
+  .header-user-menu {
+    height: 60px;
+    line-height: 60px;
+    border-bottom: solid 1px #e6e6e6;
+
+    .header-user-menu__item {
+      padding: 0 20px;
+    }
+  }
+}
+</style>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'AppHeader',
+
+  computed: {
+    ...mapState({
+      path: state => {
+        const { route } = state
+        return route.from ? route.path : null
+      },
+
+      user: 'user'
+    })
+  },
+
+  methods: {
+    ...mapActions(['resetUser']),
+
+    handleUserCommand(cmd) {
+      switch (cmd) {
+        case 'logout':
+          this.$router.push('/login')
+          this.resetUser()
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
diff --git a/template/structure/src/components/layout/AppLayout.vue b/template/structure/src/components/layout/AppLayout.vue
index a930e75..6416377 100644
--- a/template/structure/src/components/layout/AppLayout.vue
+++ b/template/structure/src/components/layout/AppLayout.vue
@@ -1,3 +1,55 @@
 <template>
-  <div>This is the layout</div>
+  <div class="app-layout">
+    <el-container class="app-layout__container">
+      <el-header class="app-layout__header">
+        <app-header/>
+      </el-header>
+      <el-main class="app-layout__content">
+        <app-breadcrumb/>
+        <router-view/>
+      </el-main>
+      <el-footer class="app-layout__footer">
+        <app-footer/>
+      </el-footer>
+    </el-container>
+  </div>
 </template>
+
+<style lang="scss">
+.app-layout {
+  height: 100%;
+
+  .app-layout__container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .app-layout__header {
+      padding: 0;
+    }
+
+    .app-layout__content {
+      flex: 1 0 auto;
+    }
+
+    .app-layout__footer {
+      background-color: #f7f7f7;
+    }
+  }
+}
+</style>
+
+<script>
+import AppHeader from './AppHeader.vue'
+import AppFooter from './AppFooter.vue'
+import AppBreadcrumb from './AppBreadcrumb.vue'
+
+export default {
+  name: 'AppLayout',
+  components: {
+    AppHeader,
+    AppFooter,
+    AppBreadcrumb
+  }
+}
+</script>
diff --git a/template/structure/src/components/layout/BlankLayout.vue b/template/structure/src/components/layout/BlankLayout.vue
new file mode 100644
index 0000000..673e3b8
--- /dev/null
+++ b/template/structure/src/components/layout/BlankLayout.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="app-blank-layout">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+.app-blank-layout {
+  height: 100%;
+}
+</style>
+
+<script>
+export default {
+  name: 'BlankLayout'
+}
+</script>
diff --git a/template/structure/src/constants/index.js b/template/structure/src/constants/index.js
new file mode 100644
index 0000000..e8617c6
--- /dev/null
+++ b/template/structure/src/constants/index.js
@@ -0,0 +1,5 @@
+export const RESPONSE_STATUS = {
+  SUCCESS: '1',
+  SERVER_ERROR: '1000',
+  NETWORK_ERROR: '1001'
+}
diff --git a/template/structure/src/main.js b/template/structure/src/main.js
new file mode 100644
index 0000000..35c7b1c
--- /dev/null
+++ b/template/structure/src/main.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { sync } from 'vuex-router-sync'
+import App from './App.vue'
+import router from './router/'
+import store from './store/'
+import './registerServiceWorker'
+
+import './registerElementUI'
+
+import './styles/app/index.scss'
+
+Vue.config.productionTip = false
+
+sync(store, router)
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/template/structure/src/router/index.js b/template/structure/src/router/index.js
new file mode 100644
index 0000000..c59f25e
--- /dev/null
+++ b/template/structure/src/router/index.js
@@ -0,0 +1,95 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import BlankLayout from '@/components/layout/BlankLayout.vue'
+import Home from '@/views/Home.vue'
+import Login from '@/views/Login.vue'
+import { Forbidden, NotFound, InternalServerError } from '@/components/errors'
+
+import UserInterceptor from './interceptors/user'
+import RoleInterceptor from './interceptors/role'
+
+Vue.use(Router)
+
+const router = new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/login',
+      component: BlankLayout,
+      children: [{ path: '', name: 'login', component: Login }]
+    },
+    {
+      path: '/',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'home',
+          meta: {
+            requiresUser: true
+          },
+          component: Home
+        },
+        {
+          path: '/about',
+          name: 'about',
+          meta: {
+            requiresUser: true
+          },
+          component: () =>
+            import(/* webpackChunkName: "about" */ '@/views/About.vue')
+        },
+        {
+          path: '/example',
+          name: 'example-list',
+          meta: {
+            requiresUser: true,
+
+            breadcrumb: [
+              { name: '示例模块', path: '/example' },
+              { name: '列表页' }
+            ]
+            // breadcrumb: ['示例模块 /example', '列表页']
+          },
+          component: () =>
+            import(/* webpackChunkName: "example" */ '@/views/example/Table.vue')
+        },
+        {
+          path: '/example/new',
+          name: 'example-form',
+          meta: {
+            requiresUser: true,
+
+            breadcrumb: ['示例模块 /example', '表单页']
+          },
+          component: () =>
+            import(/* webpackChunkName: "example" */ '@/views/example/Form.vue')
+        },
+        {
+          path: '/example/admin-authorized',
+          name: 'example-admin-authorized',
+          meta: {
+            requiresUser: true,
+            requiresRole: 'ADMIN',
+
+            breadcrumb: ['示例模块 /example', '管理员权限']
+          },
+          component: () =>
+            import(/* webpackChunkName: "example" */ '@/views/example/AdminAuthorized.vue')
+        },
+
+        { path: '/403', component: Forbidden },
+        { path: '/404', component: NotFound },
+        { path: '/500', component: InternalServerError },
+        { path: '*', component: NotFound }
+      ]
+    }
+  ]
+})
+
+router.beforeEach(UserInterceptor)
+router.beforeEach(RoleInterceptor)
+
+export default router
diff --git a/template/structure/src/router/interceptors/role.js b/template/structure/src/router/interceptors/role.js
new file mode 100644
index 0000000..18ce518
--- /dev/null
+++ b/template/structure/src/router/interceptors/role.js
@@ -0,0 +1,21 @@
+import store from '@/store/'
+
+export default function checkRoles(to, from, next) {
+  const { state } = store
+  const { requiresRole } = to.meta
+
+  if (!requiresRole) {
+    next()
+  } else {
+    if (!state.user.id) {
+      next('/login')
+    } else {
+      const { roles = [] } = state.user
+      if (roles.indexOf(requiresRole) > -1) {
+        next()
+      } else {
+        next('/403')
+      }
+    }
+  }
+}
diff --git a/template/structure/src/router/interceptors/user.js b/template/structure/src/router/interceptors/user.js
new file mode 100644
index 0000000..f750313
--- /dev/null
+++ b/template/structure/src/router/interceptors/user.js
@@ -0,0 +1,15 @@
+import store from '@/store/'
+
+export default function checkUser(to, from, next) {
+  const { state } = store
+
+  if (to.matched.some(record => record.meta.requiresUser)) {
+    if (state.user.id) {
+      next()
+    } else {
+      next('/login')
+    }
+  } else {
+    next()
+  }
+}
diff --git a/template/structure/src/services/index.js b/template/structure/src/services/index.js
new file mode 100644
index 0000000..882a71c
--- /dev/null
+++ b/template/structure/src/services/index.js
@@ -0,0 +1,30 @@
+import * as api from '@/api'
+
+export async function getUser(username) {
+  return api.getUser(username)
+}
+
+export async function getExampleList(param) {
+  const TYPES = {
+    '1': '个人',
+    '2': '组织'
+  }
+
+  const STATUS = {
+    '0': '离线',
+    '1': '在线'
+  }
+
+  return api.getExampleList(param).then(data => {
+    return {
+      ...data,
+      list: data.list.map(item => {
+        return {
+          ...item,
+          typeText: TYPES[item.type],
+          statusText: STATUS[item.status]
+        }
+      })
+    }
+  })
+}
diff --git a/template/structure/src/store/index.js b/template/structure/src/store/index.js
new file mode 100644
index 0000000..f8e5a59
--- /dev/null
+++ b/template/structure/src/store/index.js
@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as service from '@/services'
+
+import example from './modules/example'
+
+Vue.use(Vuex)
+
+function initialState() {
+  return {
+    user: {
+      id: 0,
+      name: '',
+      roles: []
+    }
+  }
+}
+
+export default new Vuex.Store({
+  state: initialState(),
+  mutations: {
+    get(state, payload) {
+      state.user = payload.data || {}
+    }
+  },
+  actions: {
+    async getUser({ commit }, username) {
+      const data = await service.getUser(username)
+
+      commit({
+        type: 'get',
+        data
+      })
+    },
+
+    resetUser({ commit }) {
+      const { user } = initialState()
+      commit({
+        type: 'get',
+        data: user
+      })
+    }
+  },
+
+  modules: {
+    example
+  }
+})
diff --git a/template/structure/src/store/modules/example.js b/template/structure/src/store/modules/example.js
new file mode 100644
index 0000000..f8da839
--- /dev/null
+++ b/template/structure/src/store/modules/example.js
@@ -0,0 +1,47 @@
+import * as service from '@/services'
+
+export const example = {
+  namespaced: true,
+  state: {
+    loading: true,
+    exampleList: {
+      page: {
+        order: 'descending',
+        orderBy: 'id',
+        pageNo: 1,
+        pageSize: 20,
+        total: 0
+      },
+      list: []
+    }
+  },
+  mutations: {
+    loading(state, loading) {
+      state.loading = loading
+    },
+
+    search(state, payload) {
+      state.exampleList = payload.data
+    }
+  },
+  actions: {
+    async searchExampleList({ commit }, param) {
+      commit('loading', true)
+
+      try {
+        const data = await service.getExampleList(param)
+
+        commit({
+          type: 'search',
+          data
+        })
+      } catch (err) {
+        throw err
+      } finally {
+        commit('loading', false)
+      }
+    }
+  }
+}
+
+export default example
diff --git a/template/structure/src/styles/app/base/index.scss b/template/structure/src/styles/app/base/index.scss
new file mode 100644
index 0000000..8a3b1cf
--- /dev/null
+++ b/template/structure/src/styles/app/base/index.scss
@@ -0,0 +1,9 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+
+  #app {
+    height: 100%;
+  }
+}
diff --git a/template/structure/src/styles/app/form/index.scss b/template/structure/src/styles/app/form/index.scss
new file mode 100644
index 0000000..50fee9e
--- /dev/null
+++ b/template/structure/src/styles/app/form/index.scss
@@ -0,0 +1,19 @@
+.standard-form-container {
+  .standard-form {
+    width: 600px;
+
+    .el-radio-group .el-radio,
+    .el-checkbox-group .el-checkbox {
+      float: left;
+      width: 160px;
+      padding-right: 20px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .el-radio-group .el-radio + .el-radio,
+    .el-checkbox-group .el-checkbox + .el-checkbox {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/template/structure/src/styles/app/helper/index.scss b/template/structure/src/styles/app/helper/index.scss
new file mode 100644
index 0000000..e0cea79
--- /dev/null
+++ b/template/structure/src/styles/app/helper/index.scss
@@ -0,0 +1,24 @@
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.bottom-gutter {
+  margin-bottom: 20px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+}
+.clearfix:after {
+  clear: both;
+}
diff --git a/template/structure/src/styles/app/index.scss b/template/structure/src/styles/app/index.scss
new file mode 100644
index 0000000..177b18d
--- /dev/null
+++ b/template/structure/src/styles/app/index.scss
@@ -0,0 +1,4 @@
+@import './base/index';
+@import './form/index';
+@import './table/index';
+@import './helper/index';
diff --git a/template/structure/src/styles/app/table/index.scss b/template/structure/src/styles/app/table/index.scss
new file mode 100644
index 0000000..f9ddff8
--- /dev/null
+++ b/template/structure/src/styles/app/table/index.scss
@@ -0,0 +1,37 @@
+.standard-table {
+  .standard-table-filter {
+    margin-bottom: 20px;
+  }
+
+  .standard-table-toolbar {
+    margin-bottom: 20px;
+
+    .standard-table-toolbar__row {
+      display: flex;
+
+      .standard-table-toolbar__buttons {
+        flex-grow: 1;
+      }
+
+      .standard-table-toolbar__pagination {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .standard-table-list {
+    .standard-table-list__expand {
+      font-size: 0;
+
+      label {
+        width: 120px;
+        color: #99a9bf;
+      }
+      .el-form-item {
+        margin-right: 0;
+        margin-bottom: 0;
+        width: 33%;
+      }
+    }
+  }
+}
diff --git a/template/structure/src/styles/theme/element-variables.scss b/template/structure/src/styles/theme/element-variables.scss
index 819f795..a7c568a 100644
--- a/template/structure/src/styles/theme/element-variables.scss
+++ b/template/structure/src/styles/theme/element-variables.scss
@@ -2,4 +2,4 @@ $--color-primary: #409eff;
 
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
diff --git a/template/structure/src/utils/request.js b/template/structure/src/utils/request.js
new file mode 100644
index 0000000..fe569a1
--- /dev/null
+++ b/template/structure/src/utils/request.js
@@ -0,0 +1,18 @@
+import { RESPONSE_STATUS } from '@/constants'
+
+export function delay(t = 500, resolved = true) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolved ? resolve() : reject(new Error('delay error'))
+    }, t)
+  })
+}
+
+export function checkCode(response) {
+  if (RESPONSE_STATUS.SUCCESS === response.status) {
+    return response.data
+  } else {
+    const { status = 0, message = 'request failed' } = response
+    throw new Error(`Error ${status}: ${message}`)
+  }
+}
diff --git a/template/structure/src/views/About.vue b/template/structure/src/views/About.vue
new file mode 100644
index 0000000..6e4df83
--- /dev/null
+++ b/template/structure/src/views/About.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="about">
+    <el-row class="bottom-gutter">
+      <el-card shadow="hover">
+        <div class="about-content">
+          <h3>关于此站点</h3>
+          <p>这是一个使用 @codetrial/vue-cli-plugin-element 插件创建的轻量级后台管理系统。核心技术为 Vue CLI 3 及 ElementUI。</p>
+          <p>如果你觉得有帮助，还请多多反馈！</p>
+          <p>
+            项目源码：
+            <a
+              target="_blank"
+              href="https://github.com/codetrial/element-admin"
+            >@codetrial/element-admin</a>
+          </p>
+          <p>
+            插件源码：
+            <a
+              target="_blank"
+              href="https://github.com/codetrial/vue-cli-plugin-element"
+            >@codetrial/vue-cli-plugin-element</a>
+          </p>
+          <p>
+            开发人员：
+            <a target="_blank" href="https://github.com/felixpy">felixpy@github</a>
+          </p>
+          <h4>项目特点</h4>
+          <p>麻雀虽小，五脏俱全。下面是它的一些主要特点。</p>
+          <p>
+            <b>最小依赖</b>：仅依赖 Vue 官方库及 ElementUI 组件库，未额外引入其它第三方库，为你提供自由发挥的空间。
+          </p>
+          <p>
+            <b>目录结构</b>：根据项目实战经验，设计了合理、清晰的目录结构。
+          </p>
+          <p>
+            <b>页面布局</b>：使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
+          </p>
+          <p>
+            <b>数据处理</b>：添加独立的 api 及 service 层，将业务逻辑从组件中抽离。
+          </p>
+          <p>
+            <b>权限控制</b>：为路由添加配置式拦截器，默认支持用户登录鉴权及角色鉴权。
+          </p>
+          <p>
+            <b>列表示例</b>：一个相对比较完整的列表页示例，包含字段查询（过滤），字段排序，页码跳转，批量操作等等。
+          </p>
+          <p>
+            <b>表单示例</b>：一个相对比较完整的表单页示例，包含表单校验、提交等操作。
+          </p>
+          <p>
+            <b>错误页面</b>：内置简单的（其实是偷懒） 403、404 及 500 错误页。
+          </p>
+        </div>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.about {
+  .about-content {
+    padding: 0 120px;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'about'
+}
+</script>
diff --git a/template/structure/src/views/Home.vue b/template/structure/src/views/Home.vue
index 33e2961..e85b771 100644
--- a/template/structure/src/views/Home.vue
+++ b/template/structure/src/views/Home.vue
@@ -1,11 +1,122 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+  <div class="home-content">
+    <el-row class="home-content__row bottom-gutter">
+      <el-card shadow="hover">
+        <div>
+          <p>
+            Hi，开发者，欢迎使用 @codetrial/vue-cli-plugin-element 插件搭建你的后台！
+            <a
+              target="_blank"
+              href="https://github.com/codetrial/vue-cli-plugin-element"
+            >插件源码</a> |
+            <a target="_blank" href="https://codetrial.github.io/element-admin">插件文档</a>
+          </p>
+        </div>
+      </el-card>
+    </el-row>
+    <el-row class="home-content__row bottom-gutter" :gutter="20">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div slot="header">统计 A</div>
+          <div class="text-center">
+            <el-progress type="circle" :percentage="50"></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div slot="header">统计 B</div>
+          <div class="text-center">
+            <el-progress type="circle" :percentage="25"></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div slot="header">统计 C</div>
+          <div class="text-center">
+            <el-progress type="circle" :percentage="75"></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div slot="header">统计 D</div>
+          <div class="text-center">
+            <el-progress type="circle" status="success" :percentage="100"></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row class="home-content__row" :gutter="20">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <div slot="header">进度 A</div>
+          <div>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="70"
+            ></el-progress>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="35"
+            ></el-progress>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="90"
+            ></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <div slot="header">进度 B</div>
+          <div>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="20"
+            ></el-progress>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="100"
+              status="success"
+            ></el-progress>
+            <el-progress
+              class="home-content__progress"
+              :text-inside="true"
+              :stroke-width="18"
+              :percentage="50"
+              status="exception"
+            ></el-progress>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
+<style lang="scss" scoped>
+.home-content {
+  .home-content__row {
+    .home-content__progress {
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>
+
 <script>
 export default {
-  name: "home"
-};
+  name: 'home'
+}
 </script>
diff --git a/template/structure/src/views/Login.vue b/template/structure/src/views/Login.vue
new file mode 100644
index 0000000..c0f51d8
--- /dev/null
+++ b/template/structure/src/views/Login.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="login">
+    <el-card class="login-card">
+      <div slot="header">
+        <span>示例系统</span>
+        <div class="pull-right">
+          <a target="_blank" href="https://codetrial.github.io">@Codetrial</a>
+        </div>
+      </div>
+      <div class="login-form">
+        <el-form :model="formValues" status-icon :rules="rules" ref="loginForm">
+          <el-form-item prop="usr">
+            <el-input
+              type="text"
+              placeholder="普通用户 codetrial / 管理员 admin"
+              v-model="formValues.usr"
+              autocomplete="off"
+            >
+              <template slot="prepend">账号</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="pwd">
+            <el-input
+              type="password"
+              placeholder="请输入任意密码"
+              v-model="formValues.pwd"
+              autocomplete="off"
+            >
+              <template slot="prepend">密码</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item class="pull-right">
+            <el-button @click="resetForm('loginForm')">重置</el-button>
+            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .login-card {
+    width: 480px;
+    margin-bottom: 100px;
+
+    .el-form-item {
+      margin-bottom: 36px;
+
+      & /deep/ .el-form-item__error {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'login',
+
+  data() {
+    return {
+      formValues: {
+        usr: '',
+        pwd: ''
+      },
+
+      rules: {
+        usr: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      }
+    }
+  },
+
+  methods: {
+    ...mapActions(['getUser']),
+
+    login() {
+      const { usr } = this.formValues
+
+      return this.getUser(usr)
+        .then(() => {
+          this.$notify.success({
+            duration: 1000,
+            title: '成功',
+            message: '登录成功！'
+          })
+          this.$router.push('/')
+        })
+        .catch(err => {
+          this.$notify.error({
+            title: '失败',
+            message: err.message || '登录失败！'
+          })
+        })
+    },
+
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.login()
+        } else {
+          return false
+        }
+      })
+    },
+
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
diff --git a/template/structure/src/views/example/AdminAuthorized.vue b/template/structure/src/views/example/AdminAuthorized.vue
new file mode 100644
index 0000000..256d07b
--- /dev/null
+++ b/template/structure/src/views/example/AdminAuthorized.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="admin-authorized">
+    <el-row class="bottom-gutter">
+      <el-card shadow="hover">
+        <p>此页面需要
+          <code>ADMIN</code> 角色才能访问。
+        </p>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'admin-authorized'
+}
+</script>
diff --git a/template/structure/src/views/example/Form.vue b/template/structure/src/views/example/Form.vue
new file mode 100644
index 0000000..b848777
--- /dev/null
+++ b/template/structure/src/views/example/Form.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="standard-form-container">
+    <el-card shadow="never">
+      <el-form
+        class="standard-form"
+        :model="formValues"
+        :rules="rules"
+        ref="exampleForm"
+        label-width="150px"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="formValues.name"></el-input>
+        </el-form-item>
+        <el-form-item label="地区" prop="region">
+          <el-select v-model="formValues.region" placeholder="请选择地区">
+            <el-option label="北京" value="BJ"></el-option>
+            <el-option label="上海" value="SH"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间" required>
+          <el-col :span="11">
+            <el-form-item prop="date">
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="formValues.date"
+                style="width: 100%;"
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col class="text-center" :span="2">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="time">
+              <el-time-picker
+                type="fixed-time"
+                placeholder="选择时间"
+                v-model="formValues.time"
+                style="width: 100%;"
+              ></el-time-picker>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="即时分发" prop="delivery">
+          <el-switch v-model="formValues.delivery"></el-switch>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-checkbox-group v-model="formValues.type">
+            <el-checkbox label="1" name="type">个人</el-checkbox>
+            <el-checkbox label="2" name="type">组织</el-checkbox>
+            <el-checkbox label="3" name="type">团队</el-checkbox>
+            <el-checkbox label="4" name="type">公司</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formValues.status">
+            <el-radio label="在线"></el-radio>
+            <el-radio label="离线"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="详细描述" prop="desc">
+          <el-input type="textarea" v-model="formValues.desc"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('exampleForm')">立即创建</el-button>
+          <el-button @click="resetForm('exampleForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<script>
+import { rules } from './config'
+
+export default {
+  name: 'example-form',
+
+  data() {
+    return {
+      rules,
+      formValues: {
+        name: '',
+        region: '',
+        date: '',
+        time: '',
+        delivery: false,
+        type: [],
+        status: '',
+        desc: ''
+      }
+    }
+  },
+
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$notify.success({
+            title: '成功',
+            message: '保存成功！'
+          })
+          this.$router.push('/example')
+        } else {
+          this.$notify.error({
+            title: '错误',
+            message: '请检查表单填写错误项！'
+          })
+          return false
+        }
+      })
+    },
+
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
diff --git a/template/structure/src/views/example/Table.vue b/template/structure/src/views/example/Table.vue
new file mode 100644
index 0000000..5f9917c
--- /dev/null
+++ b/template/structure/src/views/example/Table.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="standard-table">
+    <!-- 查询表单 -->
+    <el-card shadow="never" class="standard-table-filter">
+      <el-form :inline="true" :model="filter" class="standard-table-filter__form">
+        <el-form-item label="ID">
+          <el-input v-model="filter.id" placeholder="精确匹配"></el-input>
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="filter.type" placeholder="请选择">
+            <el-option label="全部" value></el-option>
+            <el-option label="个人" value="1"></el-option>
+            <el-option label="组织" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 翻页、工具栏 -->
+    <el-card shadow="never" class="standard-table-toolbar">
+      <div class="standard-table-toolbar__row">
+        <div class="standard-table-toolbar__buttons">
+          <el-button
+            type="primary"
+            @click="showMultipleModal = true"
+            :disabled="!multipleSelection.length"
+          >批量操作</el-button>
+          <el-button icon="el-icon-plus" @click="$router.push('/example/new')">新增条目</el-button>
+        </div>
+        <el-pagination
+          class="standard-table-toolbar__pagination"
+          @size-change="size => updatePageAndSearch({ pageSize: size })"
+          @current-change="current => updatePageAndSearch({ pageNo: current })"
+          :page-sizes="[10, 20, 40, 80]"
+          :current-page="exampleList.page.pageNo"
+          :page-size="exampleList.page.pageSize"
+          :total="exampleList.page.total"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+        ></el-pagination>
+      </div>
+    </el-card>
+
+    <!-- 表格 -->
+    <el-card shadow="never" class="standard-table-list">
+      <el-table
+        stripe
+        style="width: 100%;"
+        ref="exampleTable"
+        tooltip-effect="dark"
+        v-loading="loading"
+        :data="exampleList.list"
+        :default-sort="{prop: exampleList.page.orderBy, order: exampleList.page.order}"
+        @filter-change="updateFilterAndSearch"
+        @sort-change="({ prop, order}) => updatePageAndSearch({ orderBy: prop, order})"
+        @selection-change="rows => multipleSelection = rows"
+      >
+        <el-table-column type="selection" min-width="60"></el-table-column>
+        <el-table-column prop="id" sortable="custom" label="ID (可排序)" min-width="120"></el-table-column>
+        <el-table-column prop="name" label="名称" min-width="240">
+          <template slot-scope="scope">
+            <a target="_blank" :href="scope.row.url">{{ scope.row.name }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="typeText" label="类型" min-width="80"></el-table-column>
+        <el-table-column
+          prop="statusText"
+          label="状态 (可筛选)"
+          min-width="120"
+          columnKey="status"
+          :filters="[{text: '在线', value: '1'}, {text: '离线', value: '0'}]"
+        ></el-table-column>
+        <el-table-column prop="updateUser" label="更新用户 ID" min-width="120"></el-table-column>
+        <el-table-column prop="updateUserName" label="更新用户" min-width="120"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间" min-width="200"></el-table-column>
+        <el-table-column label="操作" min-width="80">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showExample(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column type="expand" label="更多">
+          <template slot-scope="scope">
+            <el-form label-position="left" inline class="standard-table-list__expand">
+              <el-form-item label="名称">
+                <span>{{ scope.row.name }}</span>
+              </el-form-item>
+              <el-form-item label="创建用户 ID">
+                <span>{{ scope.row.createUser }}</span>
+              </el-form-item>
+              <el-form-item label="创建用户">
+                <span>{{ scope.row.createUserName }}</span>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <span>{{ scope.row.createTime }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 单个操作对话框 -->
+      <el-dialog title="查看详情" v-if="currentRow" :visible="!!currentRow">
+        <el-form label-width="150px">
+          <el-form-item label="ID">
+            <span>{{ currentRow.id }}</span>
+          </el-form-item>
+          <el-form-item label="名称">
+            <span>{{ currentRow.name }}</span>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="currentRow = null">确 定</el-button>
+        </div>
+      </el-dialog>
+
+      <!-- 批量操作对话框 -->
+      <el-dialog title="批量操作" :visible.sync="showMultipleModal">
+        <el-table max-height="300" :data="multipleSelection">
+          <el-table-column property="id" label="ID" min-width="100"></el-table-column>
+          <el-table-column property="name" label="名称" min-width="200"></el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="showMultipleModal = false">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+
+export default {
+  name: 'example-table',
+
+  data() {
+    return {
+      filter: this.getInitialFilter(),
+
+      page: {},
+
+      currentRow: null,
+
+      showMultipleModal: false,
+
+      multipleSelection: []
+    }
+  },
+
+  computed: {
+    ...mapState('example', {
+      loading: 'loading',
+      exampleList: 'exampleList'
+    })
+  },
+
+  created() {
+    this.page = {
+      ...this.exampleList.page
+    }
+    this.search()
+  },
+
+  methods: {
+    ...mapActions('example', ['searchExampleList']),
+
+    updatePageAndSearch(payload) {
+      this.page = {
+        ...this.page,
+        ...payload
+      }
+
+      this.search(false)
+    },
+
+    updateFilterAndSearch(payload) {
+      this.filter = {
+        ...this.filter,
+        ...payload
+      }
+
+      this.search()
+    },
+
+    getInitialFilter() {
+      return {
+        id: '',
+        type: '',
+
+        status: []
+      }
+    },
+
+    reset() {
+      this.filter = this.getInitialFilter()
+      this.search()
+    },
+
+    search(resetPageNo = true) {
+      const { page, filter } = this
+      const param = {
+        page: {
+          ...page
+        },
+        filter: {
+          ...filter
+        }
+      }
+
+      if (resetPageNo) {
+        param.page.pageNo = 1
+      }
+
+      this.searchExampleList(param)
+    },
+
+    showExample(row) {
+      this.currentRow = row
+    }
+  }
+}
+</script>
diff --git a/template/structure/src/views/example/config.js b/template/structure/src/views/example/config.js
new file mode 100644
index 0000000..4fcbf97
--- /dev/null
+++ b/template/structure/src/views/example/config.js
@@ -0,0 +1,33 @@
+export const rules = {
+  name: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
+  ],
+  region: [{ required: true, message: '请选择地区', trigger: 'change' }],
+  date: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择日期',
+      trigger: 'change'
+    }
+  ],
+  time: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择时间',
+      trigger: 'change'
+    }
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: '请至少选择一个类型',
+      trigger: 'change'
+    }
+  ],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+  desc: [{ required: true, message: '请填写详细描述', trigger: 'blur' }]
+}
diff --git a/template/structure/tests/unit/example.spec.js b/template/structure/tests/unit/example.spec.js
new file mode 100644
index 0000000..7673c17
--- /dev/null
+++ b/template/structure/tests/unit/example.spec.js
@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils'
+import AppFooter from '@/components/layout/AppFooter.vue'
+
+describe('AppFooter.vue', () => {
+  it('render app footer', () => {
+    const wrapper = shallowMount(AppFooter, {})
+    expect(wrapper.text()).toMatch('Copyright')
+  })
+})