diff --git a/build.dev.js b/build.dev.js
index f433ef7..68a1e20 100755
--- a/build.dev.js
+++ b/build.dev.js
@@ -6,6 +6,7 @@ const babel = require('babel-core')
 const scss = require('node-sass')
 const chokidar = require('chokidar')
 const log = console.log
+const chalk = require('chalk')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
@@ -28,24 +29,44 @@ const compileJs = (entry, output) => {
       fs.cp(entry, output)
     }, 100)
   } else {
-    const { code } = babel.transformFileSync(entry, jsOpt)
-    fs.echo(code, output)
+    try {
+      const { code } = babel.transformFileSync(entry, jsOpt)
+      fs.echo(code, output)
+    } catch (err) {
+      return log(err)
+    }
   }
-  log('编译JS: %s, 耗时 %d ms', entry, Date.now() - t1)
+  log(
+    '编译JS: %s, 耗时 %s ms',
+    chalk.green(entry),
+    chalk.yellow(Date.now() - t1)
+  )
 }
 
 const compileCss = (entry, output) => {
-  let t1 = Date.now()
-  const { css } = scss.renderSync({ ...cssOpt, file: entry })
-  log('编译scss: %s, 耗时 %d ms', entry, Date.now() - t1)
-  fs.echo(css, output)
+  try {
+    let t1 = Date.now()
+    const { css } = scss.renderSync({ ...cssOpt, file: entry })
+    log(
+      '编译scss: %s, 耗时 %s ms',
+      chalk.green(entry),
+      chalk.yellow(Date.now() - t1)
+    )
+    fs.echo(css, output)
+  } catch (err) {
+    log(err)
+  }
 }
 
 const compileHtm = (entry, output) => {
   let t1 = Date.now()
   let htm = fs.cat(entry).toString('utf8')
   htm = htm.replace(/[\r\n\t]+/g, ' ').replace(/\s{2,}/g, ' ')
-  log('压缩HTML: %s, 耗时 %d ms', entry, Date.now() - t1)
+  log(
+    '压缩HTML: %s, 耗时 %s ms',
+    chalk.green(entry),
+    chalk.yellow(Date.now() - t1)
+  )
   fs.echo(htm, output)
 }
 
@@ -102,5 +123,5 @@ chokidar
     }
   })
   .on('ready', () => {
-    log('预处理完成,监听文件变化中,请勿关闭本窗口...')
+    log(chalk.red('预处理完成,监听文件变化中,请勿关闭本窗口...'))
   })
diff --git a/build.prod.js b/build.prod.js
index 4ec8ea3..19bdd6f 100755
--- a/build.prod.js
+++ b/build.prod.js
@@ -5,6 +5,7 @@ const path = require('path')
 const babel = require('babel-core')
 const scss = require('node-sass')
 const log = console.log
+const chalk = require('chalk')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
@@ -27,14 +28,22 @@ const compileJs = (entry, output) => {
     tmpOpt = Object.assign({}, jsOpt, { plugins: [] })
   }
   const { code } = babel.transformFileSync(entry, tmpOpt)
-  log('编译JS: %s, 耗时 %d ms', entry, Date.now() - t1)
+  log(
+    '编译JS: %s, 耗时 %s ms',
+    chalk.green(entry),
+    chalk.yellow(Date.now() - t1)
+  )
   fs.echo(code, output)
 }
 
 const compileCss = (entry, output) => {
   let t1 = Date.now()
   const { css } = scss.renderSync({ ...cssOpt, file: entry })
-  log('编译scss: %s, 耗时 %d ms', entry, Date.now() - t1)
+  log(
+    '编译scss: %s, 耗时 %s ms',
+    chalk.green(entry),
+    chalk.yellow(Date.now() - t1)
+  )
   fs.echo(css, output)
 }
 
@@ -42,7 +51,11 @@ const compileHtm = (entry, output) => {
   let t1 = Date.now()
   let htm = fs.cat(entry).toString('utf8')
   htm = htm.replace(/[\r\n\t]+/g, ' ').replace(/\s{2,}/g, ' ')
-  log('压缩HTML: %s, 耗时 %d ms', entry, Date.now() - t1)
+  log(
+    '压缩HTML: %s, 耗时 %s ms',
+    chalk.green(entry),
+    chalk.yellow(Date.now() - t1)
+  )
   fs.echo(htm, output)
 }
 
@@ -56,7 +69,7 @@ const cssFiles = fs.ls('./src/css/', true)
 
 if (fs.isdir(buildDir)) {
   fs.rm(buildDir, true)
-  log('清除旧目录 dist/')
+  log(chalk.cyan('清除旧目录 dist/'))
 }
 
 // 字体文件直接复制
diff --git a/package-lock.json b/package-lock.json
index 5599d6c..05e5c41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,10 +23,13 @@
       "dev": true
     },
     "ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+      "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+      "dev": true,
+      "requires": {
+        "color-convert": "1.9.1"
+      }
     },
     "anymatch": {
       "version": "1.3.2",
@@ -132,6 +135,33 @@
         "chalk": "1.1.3",
         "esutils": "2.0.2",
         "js-tokens": "3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
       }
     },
     "babel-core": {
@@ -985,16 +1015,14 @@
       "dev": true
     },
     "chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
+      "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
       "dev": true,
       "requires": {
-        "ansi-styles": "2.2.1",
+        "ansi-styles": "3.2.0",
         "escape-string-regexp": "1.0.5",
-        "has-ansi": "2.0.0",
-        "strip-ansi": "3.0.1",
-        "supports-color": "2.0.0"
+        "supports-color": "4.5.0"
       }
     },
     "chokidar": {
@@ -1005,6 +1033,7 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
+        "fsevents": "1.1.3",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -1030,6 +1059,21 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "color-convert": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
+      "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
     "combined-stream": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
@@ -1293,6 +1337,910 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
+    "fsevents": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
+      "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "nan": "2.8.0",
+        "node-pre-gyp": "0.6.39"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ajv": {
+          "version": "4.11.8",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "co": "4.6.0",
+            "json-stable-stringify": "1.0.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.2.9"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "bundled": true,
+          "dev": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        },
+        "boom": {
+          "version": "2.10.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.7",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "balanced-match": "0.4.2",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1"
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.8",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "extend": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.5",
+            "mime-types": "2.1.15"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.6.1"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fstream": "1.0.11",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.1.1",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true,
+          "dev": true
+        },
+        "har-schema": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "har-validator": {
+          "version": "4.2.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ajv": "4.11.8",
+            "har-schema": "1.0.5"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1",
+            "cryptiles": "2.0.5",
+            "hoek": "2.16.3",
+            "sntp": "1.0.9"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "bundled": true,
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "0.2.0",
+            "jsprim": "1.4.0",
+            "sshpk": "1.13.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true,
+          "dev": true
+        },
+        "ini": {
+          "version": "1.3.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "json-stable-stringify": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsonify": "0.0.0"
+          }
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jsonify": {
+          "version": "0.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.0.2",
+            "json-schema": "0.2.3",
+            "verror": "1.3.6"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "mime-db": {
+          "version": "1.27.0",
+          "bundled": true,
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.15",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "mime-db": "1.27.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true,
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.39",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.2",
+            "hawk": "3.1.3",
+            "mkdirp": "0.5.1",
+            "nopt": "4.0.1",
+            "npmlog": "4.1.0",
+            "rc": "1.2.1",
+            "request": "2.81.0",
+            "rimraf": "2.6.1",
+            "semver": "5.3.0",
+            "tar": "2.2.1",
+            "tar-pack": "3.4.0"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.0",
+            "osenv": "0.1.4"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "performance-now": {
+          "version": "0.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "bundled": true,
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "qs": {
+          "version": "6.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.4.2",
+            "ini": "1.3.4",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "request": {
+          "version": "2.81.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.5",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.1.4",
+            "har-validator": "4.2.1",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.15",
+            "oauth-sign": "0.8.2",
+            "performance-now": "0.2.0",
+            "qs": "6.4.0",
+            "safe-buffer": "5.0.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.2",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "semver": {
+          "version": "5.3.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "sshpk": {
+          "version": "1.13.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asn1": "0.2.3",
+            "assert-plus": "1.0.0",
+            "bcrypt-pbkdf": "1.0.1",
+            "dashdash": "1.14.1",
+            "ecc-jsbn": "0.1.1",
+            "getpass": "0.1.7",
+            "jodid25519": "1.0.2",
+            "jsbn": "0.1.1",
+            "tweetnacl": "0.14.5"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "block-stream": "0.0.9",
+            "fstream": "1.0.11",
+            "inherits": "2.0.3"
+          }
+        },
+        "tar-pack": {
+          "version": "3.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.8",
+            "fstream": "1.0.11",
+            "fstream-ignore": "1.0.5",
+            "once": "1.4.0",
+            "readable-stream": "2.2.9",
+            "rimraf": "2.6.1",
+            "tar": "2.2.1",
+            "uid-number": "0.0.6"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "punycode": "1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -1440,6 +2388,33 @@
         "commander": "2.12.2",
         "is-my-json-valid": "2.16.1",
         "pinkie-promise": "2.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
       }
     },
     "has-ansi": {
@@ -1451,6 +2426,12 @@
         "ansi-regex": "2.1.1"
       }
     },
+    "has-flag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+      "dev": true
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -2039,6 +3020,33 @@
         "sass-graph": "2.2.4",
         "stdout-stream": "1.4.0",
         "true-case-path": "1.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
       }
     },
     "nopt": {
@@ -2697,10 +3705,13 @@
       }
     },
     "supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+      "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+      "dev": true,
+      "requires": {
+        "has-flag": "2.0.0"
+      }
     },
     "tar": {
       "version": "2.2.1",
diff --git a/package.json b/package.json
index ff501ab..eb9ca41 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,10 @@
     "type": "git",
     "url": "git+https://github.com/yutent/doui.git"
   },
-  "keywords": ["doui", "yua"],
+  "keywords": [
+    "doui",
+    "yua"
+  ],
   "author": "yutent",
   "license": "MIT",
   "devDependencies": {
@@ -19,6 +22,7 @@
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-minify": "^0.2.0",
+    "chalk": "^2.3.0",
     "chokidar": "^1.7.0",
     "iofs": "^1.0.2",
     "node-sass": "^4.7.2"
diff --git a/src/js/anot.shim.js b/src/js/anot.shim.js
index ae59b6e..a8113e4 100644
--- a/src/js/anot.shim.js
+++ b/src/js/anot.shim.js
@@ -24,7 +24,11 @@
   /*********************************************************************
    *                    全局变量及方法                                   *
    **********************************************************************/
-
+  var bindingID = 1024
+  var IEVersion = 0
+  if (window.VBArray) {
+    IEVersion = document.documentMode || (window.XMLHttpRequest ? 7 : 6)
+  }
   var expose = generateID()
   //http://stackoverflow.com/questions/7290086/javascript-use-strict-and-nicks-find-global-function
   var DOC = window.document
@@ -83,11 +87,6 @@
     '[object Generator]': 'generator',
     '[object GeneratorFunction]': 'generatorfunction'
   }
-  var bindingID = 1024
-  var IEVersion = 0
-  if (window.VBArray) {
-    IEVersion = document.documentMode || (window.XMLHttpRequest ? 7 : 6)
-  }
 
   function noop() {}
   function scpCompile(array) {
@@ -190,6 +189,26 @@
     return new this('string')
   }
 
+  Anot.PropsTypes.isNumber = function() {
+    return new this('number')
+  }
+
+  Anot.PropsTypes.isFunction = function() {
+    return new this('function')
+  }
+
+  Anot.PropsTypes.isArray = function() {
+    return new this('array')
+  }
+
+  Anot.PropsTypes.isObject = function() {
+    return new this('object')
+  }
+
+  Anot.PropsTypes.isBoolean = function() {
+    return new this('boolean')
+  }
+
   /*判定是否是一个朴素的javascript对象（Object），不是DOM对象，不是BOM对象，不是自定义类的实例*/
   Anot.isPlainObject = function(obj) {
     // 简单的 typeof obj === "object"检测，会致使用isPlainObject(window)在opera下通不过
@@ -3394,15 +3413,14 @@
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    $construct: function() {
-      return Anot.mix.apply(null, arguments)
+    construct: function(props, next) {
+      next(props)
     },
-    $ready: noop,
-    $init: noop,
-    $dispose: noop,
-    $container: null,
-    $childReady: noop,
-    $$template: function(str) {
+    componentWillMount: noop,
+    componentDidMount: noop,
+    childComponentDidMount: noop,
+    componentWillUnmount: noop,
+    render: function(str) {
       return str
     }
   }
@@ -3416,6 +3434,7 @@
       if (name === obj.name) {
         componentQueue.splice(i, 1)
         i--
+        // (obj, Anot.components[name], obj.element, obj.name)
         ;(function(host, hooks, elem, widget) {
           //如果elem已从Document里移除,直接返回
           if (!Anot.contains(DOC, elem) || elem.msResolved) {
@@ -3424,74 +3443,59 @@
           }
 
           var dependencies = 1
-          var global = componentHooks
+          var globalHooks = componentHooks
 
           //===========收集各种配置=======
-          if (elem.getAttribute(':attr-identifier')) {
+          if (elem.getAttribute(':attr-uuid')) {
             //如果还没有解析完,就延迟一下 #1155
             return
           }
-          var elemOpts = getOptionsFromTag(elem, host.vmodels)
-          var vmOpts = getOptionsFromVM(
-            host.vmodels,
-            elemOpts.config || host.name
-          )
-          var $id = elemOpts.$id || elemOpts.identifier || generateID(widget)
-          delete elemOpts.config
-          delete elemOpts.$id
-          delete elemOpts.identifier
-          var componentDefinition = {
-            $up: host.vmodels[0],
-            $ups: host.vmodels
-          }
+          var props = getOptionsFromTag(elem, host.vmodels)
+          var vmOpts = getOptionsFromVM(host.vmodels, props.config)
+          var $id = props.uuid || generateID(widget)
+          var componentDefinition = {}
 
-          Anot.mix(true, componentDefinition, hooks)
-
-          componentDefinition = Anot.components[name].$construct.call(
-            elem,
-            componentDefinition,
-            vmOpts,
-            elemOpts
-          )
+          props = Object.assign({}, vmOpts, props)
+          vmOpts = void 0
+          delete props.config
+          delete props.uuid
+          hooks.construct.call(elem, props, function next(val) {
+            Object.assign(hooks.props, val)
+            Object.assign(componentDefinition, hooks)
+          })
 
           componentDefinition.$refs = {}
           componentDefinition.$id = $id
 
           //==========构建VM=========
-          var keepContainer = componentDefinition.$container
-          var keepTemplate = componentDefinition.$template
-          delete componentDefinition.$up
-          delete componentDefinition.$ups
-          delete componentDefinition.$slot
-          delete componentDefinition.$replace
-          delete componentDefinition.$container
-          delete componentDefinition.$construct
+          var {
+            componentWillMount,
+            componentDidMount,
+            childComponentDidMount,
+            componentWillUnmount,
+            render
+          } = componentDefinition
+
+          delete componentDefinition.construct
+          delete componentDefinition.componentWillMount
+          delete componentDefinition.componentDidMount
+          delete componentDefinition.childComponentDidMount
+          delete componentDefinition.componentWillUnmount
+
+          var vmodel = Anot(componentDefinition)
 
-          var vmodel = Anot(componentDefinition) || {}
-          vmodel.$ups = host.vmodels
-          vmodel.$up = host.vmodels[0]
           elem.msResolved = 1 //防止二进扫描此元素
-          vmodel.$init(vmodel, elem)
-          global.$init(vmodel, elem)
-          var nodes = elem.childNodes
 
-          if (vmodel.$$template) {
+          componentWillMount.call(vmodel)
+          globalHooks.componentWillMount.call(null, vmodel)
+
+          if (!elem.content.firstElementChild) {
             Anot.clearHTML(elem)
-            elem.innerHTML = vmodel.$$template(keepTemplate)
+            elem.innerHTML = render()
           }
 
           // 组件所使用的标签是temlate,所以必须要要用子元素替换掉
-          var child = elem.content.firstChild
-
-          if (!child || serialize.call(child) === '[object Text]') {
-            var tmpDom = document.createElement('div')
-            if (child) {
-              tmpDom.appendChild(child)
-            }
-            child = tmpDom
-            tmpDom = null
-          }
-
+          var child = elem.content.firstElementChild
           elem.parentNode.replaceChild(child, elem)
 
           child.msResolved = 1
@@ -3503,40 +3507,39 @@
           if (className) {
             Anot(elem).addClass(className)
           }
-          //指定了组件的容器的话,则把组件节点转过去
-          if (keepContainer) {
-            keepContainer.appendChild(elem)
-          }
+
+          hideProperty(vmodel, '$elem', elem)
+
           Anot.fireDom(elem, 'datasetchanged', {
             vm: vmodel,
             childReady: 1
           })
           var children = 0
-          var removeFn = Anot.bind(elem, 'datasetchanged', function(e) {
-            if (e.childReady) {
-              dependencies += e.childReady
-              if (vmodel !== e.vm) {
-                vmodel.$refs[e.vm.$id] = e.vm
-                if (e.childReady === -1) {
+          var removeFn = Anot.bind(elem, 'datasetchanged', function(ev) {
+            if (ev.childReady) {
+              dependencies += ev.childReady
+              if (vmodel !== ev.vm) {
+                vmodel.$refs[ev.vm.$id] = ev.vm
+                if (ev.childReady === -1) {
                   children++
-                  vmodel.$childReady(vmodel, elem, e)
+                  childComponentDidMount.call(vmodel, elem, ev)
                 }
-                e.stopPropagation()
+                ev.stopPropagation()
               }
             }
             if (dependencies === 0) {
-              var id1 = setTimeout(function() {
-                clearTimeout(id1)
-
-                vmodel.$ready(vmodel, elem, host.vmodels)
-                global.$ready(vmodel, elem, host.vmodels)
+              var timer = setTimeout(function() {
+                clearTimeout(timer)
+                componentDidMount.call(vmodel)
+                globalHooks.componentDidMount(null, vmodel)
               }, children ? Math.max(children * 17, 100) : 17)
+
               Anot.unbind(elem, 'datasetchanged', removeFn)
               //==================
               host.rollback = function() {
                 try {
-                  vmodel.$dispose(vmodel, elem)
-                  global.$dispose(vmodel, elem)
+                  componentWillUnmount.call(vmodel)
+                  globalHooks.componentWillUnmount.call(null, vmodel)
                 } catch (e) {}
                 delete Anot.vmodels[vmodel.$id]
               }
@@ -3548,7 +3551,7 @@
               }
             }
           })
-          scanTag(elem, [vmodel].concat(host.vmodels))
+          scanTag(elem, [vmodel])
           Anot.vmodels[vmodel.$id] = vmodel
           if (!elem.childNodes.length) {
             Anot.fireDom(elem, 'datasetchanged', {
@@ -6457,9 +6460,6 @@
   Anot.config({
     loader: true
   })
-  Anot.ready(function() {
-    scanTag(DOC.body, [])
-  })
 
   if (typeof define === 'function' && define.amd) {
     define('Anot', [], function() {
diff --git a/src/js/lib/pages/main.htm b/src/js/lib/pages/main.htm
index 6054bae..38913a0 100644
--- a/src/js/lib/pages/main.htm
+++ b/src/js/lib/pages/main.htm
@@ -1,32 +1,32 @@
-<div class="do-pages do-fn-noselect" :class="{{theme}}">
+<div class="do-pages do-fn-noselect" :class="{{props.theme}}">
     <a class="normal"
-        :if="curr > 1 && !simpleMode"
+        :if="currPage > 1 && !simpleMode"
         :attr="{href: $setUrl(1)}"
-        :text="btns.home"
+        :text="props.btns.home"
         :click="$jump($event, 1)"></a>
     <a class="normal"
-        :if="curr > 1"
-        :attr="{href: $setUrl(curr - 1)}"
-        :text="btns.prev"
-        :click="$jump($event, curr - 1)"></a>
-    <a :if-loop="!simpleMode || curr === el"
+        :if="currPage > 1"
+        :attr="{href: $setUrl(currPage - 1)}"
+        :text="props.btns.prev"
+        :click="$jump($event, currPage - 1)"></a>
+    <a :if-loop="!simpleMode || currPage === el"
         :repeat="pageList"
         :attr="{href: $setUrl(el)}"
-        :class="{normal: curr !== el && '...' !== el, disabled: '...' === el, curr: curr === el}"
+        :class="{normal: currPage !== el && '...' !== el, disabled: '...' === el, curr: currPage === el}"
         :text="el"
         :click="$jump($event, el)"></a>
     <a class="normal"
-        :if="curr < total"
-        :attr="{href: $setUrl(curr + 1)}"
-        :click="$jump($event, curr + 1)">{{btns.next}}</a>
+        :if="currPage < totalPages"
+        :attr="{href: $setUrl(currPage + 1)}"
+        :click="$jump($event, currPage + 1)">{{props.btns.next}}</a>
     <a class="normal"
-        :if="curr < total && !simpleMode"
-        :attr="{href: $setUrl(total)}"
-        :click="$jump($event, total)">{{btns.end}}</a>
+        :if="currPage < totalPages && !simpleMode"
+        :attr="{href: $setUrl(totalPages)}"
+        :click="$jump($event, totalPages)">{{props.btns.end}}</a>
 
     <div class="input-box" :if="inputJump && !simpleMode">
-        <span>共{{total}}页，跳转到第</span>
-        <input type="text" :duplex-number="input" :keyup="$jump($event)">
+        <span>共{{totalPages}}页 {{totalItems}}条，跳转到第</span>
+        <input type="text" :duplex-number="inputPage" :keyup="$jump($event)">
         <span>页</span>
         <a class="normal" :attr="{href: $setUrl(input)}" :click="$jump($event, input)">确定</a>
     </div>
diff --git a/src/js/lib/pages/main.js b/src/js/lib/pages/main.js
index 31b5df8..f01cfbc 100644
--- a/src/js/lib/pages/main.js
+++ b/src/js/lib/pages/main.js
@@ -1,139 +1,151 @@
-"use strict";
-define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
+'use strict'
+import 'Anot'
+import tpl from 'text!./main.htm'
+import 'css!./main.css'
 
-    yua.ui.pages = '1.0.0'
-    var colors = {plain: 1, green: 1, blue: 1, red: 1, orange: 1, grey: 1},
-        themes = ['skin-1 ', 'skin-2 '];
-    //计算页码列表
-    function calculate(vm){
-        if (vm.total < 2)
-            return vm.pageList.clear();
+Anot.ui.pages = '1.0.0'
+var colors = { plain: 1, green: 1, blue: 1, red: 1, orange: 1, grey: 1 },
+  themes = ['skin-1 ', 'skin-2 ']
+//计算页码列表
+function calculate({ currPage, maxPageShow, totalPages }) {
+  let arr = []
+  let midPage =
+    currPage < maxPageShow / 2
+      ? maxPageShow - currPage
+      : Math.floor(maxPageShow / 2)
 
-        var arr = [],
-            mid = vm.curr < vm.max / 2 ? vm.max - vm.curr : Math.floor(vm.max / 2);
-
-        if(vm.curr - mid > 1){
-            arr.push('...')
-        }
-        for (var i = vm.curr - mid; i < vm.curr + mid + 1 && i <= vm.total; i++){
-            if(i > 0){
-                arr.push(i)
-            }
-        }
-        if(vm.curr + mid < vm.total){
-            arr.push('...')
-        }
-        vm.pageList.clear()
-        vm.pageList.pushArray(arr)
+  if (currPage - midPage > 1) {
+    arr.push('...')
+  }
+  for (
+    var i = currPage - midPage;
+    i < currPage + midPage + 1 && i <= totalPages;
+    i++
+  ) {
+    if (i > 0) {
+      arr.push(i)
     }
+  }
+  if (currPage + midPage < totalPages) {
+    arr.push('...')
+  }
+  return arr
+}
 
-    function update(pid, vm) {
-        if(pid < 1){
-            pid = vm.input = 1
-        }
-        if(pid > vm.total){
-            pid = vm.input = vm.total
-        }
-        if(pid !== vm.curr){
-            vm.curr = vm.input = pid
-            vm.$onJump(pid)
-        }
+function update(pid, vm) {
+  if (pid < 1) {
+    pid = vm.input = 1
+  }
+  if (pid > vm.total) {
+    pid = vm.input = vm.total
+  }
+  if (pid !== vm.curr) {
+    vm.curr = vm.input = pid
+    vm.$onJump(pid)
+  }
+}
+
+export default Anot.component('pages', {
+  construct: function(props, next) {
+    // console.log(props, this)
+    next(props)
+  },
+  render: function() {
+    return tpl
+  },
+  componentWillMount: function(vm) {
+    if (this.totalPages < 2) {
+      return
     }
+    const { currPage, totalPages, props } = this
+    this.pageList.clear()
+    this.pageList.pushArray(
+      calculate({ currPage, totalPages, maxPageShow: props.maxPageShow })
+    )
+  },
+  componentDidMount: function() {
+    this.props.onSuccess(this)
+  },
+  state: {
+    currPage: 1,
+    totalItems: 100,
+    perPage: 20,
+    inputJump: !1,
+    simpleMode: !1,
+    inputPage: 1,
+    pageList: []
+  },
+  computed: {
+    totalPages: function() {
+      return Math.ceil(this.totalItems / this.perPage)
+    }
+  },
+  props: {
+    url: 'javascript:;',
+    btns: {
+      prev: '<<',
+      next: '>>',
+      home: '首页',
+      end: '末页'
+    },
+    maxPageShow: 5,
+    theme: 'skin-2 red',
+    onPageChange: Anot.noop,
+    onSuccess: Anot.noop
+  },
+  watch: {
+    curr: function(val, old) {
+      val = val >>> 0 || 1
+      old = old >>> 0
+      if (val !== old) {
+        calculate(vm)
+      }
+    },
+    total: function(val, old) {
+      val = val >>> 0 || 1
+      old = old >>> 0
+      if (val !== old) {
+        calculate(vm)
+      }
+    }
+  },
+  methods: {
+    $setUrl: function(val) {
+      if (
+        !this.props.url ||
+        '...' === val ||
+        this.curr === val ||
+        val > this.total ||
+        1 > val
+      ) {
+        return 'javascript:;'
+      } else {
+        return this.props.url.replace('{id}', val)
+      }
+    },
+    $jump: function(ev, val) {
+      if ('...' !== val) {
+        var link = this.getAttribute('href') || this.getAttribute('xlink:href')
 
-    return yua.component('pages', {
-        $template: tpl,
-        $construct: function(a, b, c){
-            yua.mix(a, b, c)
-            a.theme = themes[a.theme>>0]
-            if(!a.theme){
-                a.theme = themes[0]
-            }
-            if(a.color && colors[a.color]){
-                a.theme += a.color
-            }else{
-                a.theme += 'plain'
-            }
-            delete a.color
-            return a
-        },
-        $init: function(vm) {
-
-            calculate(vm)
-
-            vm.$setUrl = function(val) {
-                if(!vm.url
-                    || '...' === val
-                    || vm.curr === val
-                    || val > vm.total
-                    || 1 > val) {
-
-                    return 'javascript:;'
-                }else{
-                    return vm.url.replace('{id}', val)
-                }
-            }
-            vm.$forceReset = function(){
-                vm.curr = 1
-                calculate(vm)
-            }
-
-            vm.$jump = function(ev, val) {
-                if ('...' !== val) {
-                    var link = this.getAttribute('href') || this.getAttribute('xlink:href')
-
-                    if (val !== void 0){
-                        if('javascript:;' !== link){
-                            location.href = link
-                        }
-                        var pid = val >> 0;
-                        update(pid, vm)
-                    } else {
-                        vm.input = vm.input >>> 0 || 1;
-                        if(13 == ev.keyCode){
-                            update(vm.input, vm)
-                        }
-                    }
-                }
-            }
-            vm.$watch('curr', function(val, old) {
-                val = (val >>> 0) || 1
-                old = old >>> 0
-                if(val !== old){
-                    calculate(vm)
-                }
-            })
-
-            vm.$watch('total', function(val, old) {
-                val = (val >>> 0) || 1
-                old = old >>> 0
-                if(val !== old){
-                    calculate(vm)
-                }
-            })
-        },
-        $ready: function(vm){
-            vm.$onSuccess(vm)
-        },
-        curr: 1,
-        total: 1,
-        max: 5,
-        url: "javascript:;",
-        inputJump: !1,
-        simpleMode: !1,
-        input: 1,
-        pageList: [],
-        btns: {
-            prev: "<<",
-            next: ">>",
-            home: "首页",
-            end: "末页"
-        },
-        theme: '',
-        $skipArray: ['max', 'btns', 'url', 'theme'],
-        $setUrl: yua.noop,
-        $jump: yua.noop,
-        $onJump: yua.noop,
-        $onSuccess: yua.noop,
-        $forceReset: yua.noop,
-    })
-});
\ No newline at end of file
+        if (val !== void 0) {
+          if ('javascript:;' !== link) {
+            location.href = link
+          }
+          var pid = val >> 0
+          update(pid, this)
+        } else {
+          this.input = this.input >>> 0 || 1
+          if (13 == ev.keyCode) {
+            update(this.input, this)
+          }
+        }
+      }
+    },
+    $onJump: Anot.noop,
+    $onSuccess: Anot.noop,
+    $forceReset: function() {
+      this.curr = 1
+      calculate(this)
+    }
+  }
+})