diff --git a/examples/App.vue b/examples/App.vue
index 05d8408..01b6af1 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -6,23 +6,31 @@
 -->
 <template>
   <div id="app">
-
     <TableDesignerDialog ref="table"></TableDesignerDialog>
     <FormDesignerDialog ref="form"></FormDesignerDialog>
-    <CrudTable tableName='dept'
-               :visibleList='{
-           tableTitle:false,
-         }'
-               fullHeight>
+    <CrudTable
+      tableName="users"
+      orderCondition="timestamp desc"
+      :visibleList="{
+        tableTitle: false,
+      }"
+      :actionColumnWidth="300"
+      :remoteFuncs="remoteFuncs"
+      fullHeight
+    >
     </CrudTable>
-    <el-button @click="showDialog('form')"
-               type="primary">打开表单设计器</el-button>
-    <el-button @click="showDialog('table')"
-               type="danger">打开表格设计器</el-button>
+    <el-button @click="showDialog('form')" type="primary"
+      >打开表单设计器</el-button
+    >
+    <el-button @click="showDialog('table')" type="danger"
+      >打开表格设计器</el-button
+    >
   </div>
 </template>
 
 <script>
+import { DML, crud } from '@/api/public/crud';
+
 export default {
   name: 'app',
   methods: {
@@ -30,6 +38,30 @@ export default {
       this.$refs[name].showDialog();
     },
   },
+  data() {
+    return {
+
+      remoteFuncs: {
+        // 请求角色
+        funcGetRole(resolve) {
+          crud(DML.SELECT, 'role').then((res) => {
+            const options = res.data.list.map(item => ({
+              label: item.roleName,
+              value: item.id,
+            }));
+            resolve(options);
+          });
+        },
+        // 请求部门tree
+        funcGetDeptTree: (resolve) => {
+          // 此处暂时写死 admin权限的账号可以看到全部部门
+          crud(DML.TREE, 'dept').then((res) => {
+            resolve(res.data);
+          });
+        },
+      },
+    };
+  },
 };
 </script>
 
diff --git a/public/favicon.ico b/examples/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to examples/favicon.ico
diff --git a/public/index.html b/examples/index.html
similarity index 77%
rename from public/index.html
rename to examples/index.html
index 8c876a7..a2f5809 100644
--- a/public/index.html
+++ b/examples/index.html
@@ -5,7 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>npmplugin</title>
+    <title>element-pro-crud</title>
+    <script>window.__HOST__URL__ = 'http://localhost:7788';</script>
+    <script>window.__PREFIX__URL__ = '/';</script>
   </head>
   <body>
     <noscript>
diff --git a/examples/main.ts b/examples/main.ts
index 4554862..c40f6de 100644
--- a/examples/main.ts
+++ b/examples/main.ts
@@ -4,10 +4,21 @@ import App from './App.vue';
 import plugin from '../src/index';
 // 引入ElementUI
 import './element';
+import axios from '../src/api/axios';
 
 Vue.use(plugin);
 Vue.config.productionTip = false;
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app');
+axios({
+  url: '/users/login',
+  method: 'post',
+  data: {
+    password: '123',
+    username: 'admin',
+  },
+}).then((res) => {
+  sessionStorage.setItem('token', res.data.token);
+  new Vue({
+    render: h => h(App),
+  }).$mount('#app');
+});
diff --git a/vue.config.js b/vue.config.js
index 56dd170..623d29c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,7 @@ module.exports = {
       // page 的入口
       entry: 'examples/main.ts',
       // 模板来源
-      template: 'public/index.html',
+      template: 'examples/index.html',
       // 输出文件名
       filename: 'index.html',
     },
