diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..00b0fbf18
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+indent_size = 2
+
+[*.vue]
+indent_size = 2
+
+[*.scss]
+indent_size = 4
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..8d1a11e8d
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+lib/
+dist/
+node_modules/
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..87b26dd49
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,25 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "semi": 0,
+    "max-len": 0,
+    "react/prefer-stateless-function": 0,
+    "comma-dangle": 0,
+    "func-names": 0,
+    "prefer-const": 0,
+    "arrow-body-style": 0,
+    "react/sort-comp": 0,
+    "react/no-multi-comp": 0,
+    "react/prop-types": 0,
+    "react/prefer-es6-class": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-no-bind": 0,
+    "no-param-reassign": 0,
+    "no-return-assign": 0,
+    "consistent-return": 0,
+    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
+    "no-use-before-define": ["error", { "functions": false }],
+    "no-underscore-dangle": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
index 4db9f4538..5306c013b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 .cache
 .DS_Store
 .idea
+.vscode
 packages/**/lib
 lib/*
 !lib/index.js
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..36a163fb8
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+registry=http://registry.npm.qima-inc.com
diff --git a/packages/cell/README.md b/CHANGELOG.md
similarity index 100%
rename from packages/cell/README.md
rename to CHANGELOG.md
diff --git a/Makefile b/Makefile
new file mode 100644
index 000000000..c43fcdff2
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,13 @@
+usage = "\
+Usage:                       make <option> \n\n\
+init componentname           初始化一个新组件，请忽视makefile的报错  \n\n\
+\n"
+
+
+default:
+	@echo $(usage)
+
+init:
+	node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
+
+
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 9cfc5dcb7..d46f914b1 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -8,21 +8,12 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
-import '../src/assets/font/iconfont.css';
 
 const install = function(Vue) {
   if (install.installed) return;
 
 {{install}}
-  Vue.use(InfiniteScroll);
-  Vue.use(Lazyload, {
-    loading: require('./assets/loading-spin.svg'),
-    try: 3
-  });
 
-  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
-  Vue.$toast = Vue.prototype.$toast = Toast;
-  Vue.$indicator = Vue.prototype.$indicator = Indicator;
 };
 
 // auto install
diff --git a/build/bin/init.js b/build/bin/init.js
new file mode 100644
index 000000000..314e46936
--- /dev/null
+++ b/build/bin/init.js
@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+const ch = require('child_process');
+const gulp = require('gulp');
+const runSequence = require('run-sequence');
+const gutil = require('gulp-util');
+const fileSave = require('file-save');
+const path = require('path');
+const exec = ch.exec;
+
+if (!process.argv[2]) {
+  console.error('[组件名]必填.');
+  process.exit(1);
+}
+
+const name = process.argv[2];
+
+
+// 项目规范文件拷贝
+gulp.task('copy', function(callback) {
+  gutil.log(gutil.colors.yellow('-------> 开始初始化'));
+
+  exec('cd packages && git clone git@gitlab.qima-inc.com:fe/vue-seed.git ' + name, function(err, stdout, stderr) {
+    gutil.log('-------> 拉取 vue-seed');
+    exec('rm -rf ./' + name + '/.git', function(err, stdout, stderr) {
+      gutil.log('-------> ' + name + '组件初始化成功');
+      callback();
+    });
+  });
+});
+
+
+// 添加到 components.json
+gulp.task('addComponents', function(callback) {
+  const componentsFile = require('../../components.json');
+  if (componentsFile[name]) {
+    console.error(`${name} 已存在.`);
+    process.exit(1);
+  }
+  componentsFile[name] = `./packages/${name}/index.js`;
+  fileSave(path.join(__dirname, '../../components.json'))
+    .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
+    .end('\n');
+  gutil.log('-------> components.json文件更新成功');
+  gutil.log(gutil.colors.yellow('-------> 请无视下面的make报错'));
+});
+
+runSequence('copy', 'addComponents');
+
diff --git a/components.json b/components.json
index adec1b0b2..5aa7a6e07 100644
--- a/components.json
+++ b/components.json
@@ -1,3 +1,6 @@
 {
-  "cell": "./packages/cell/index.js"
+  "sample": "./packages/sample/index.js",
+  "pangxie": "./packages/pangxie/index.js",
+  "pangxie1": "./packages/pangxie1/index.js",
+  "pangxie2": "./packages/pangxie2/index.js"
 }
diff --git a/package.json b/package.json
index 9d60834e6..b87b988d1 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,9 @@
     "packages"
   ],
   "scripts": {
-    "dev": "npm run bootstrap && npm run build:entry",
-    "bootstrap": "npm i",
-    "dist": "npm run clean && npm run build:entry",
-    "deploy": "npm run build:entry",
-    "build:entry": "node build/bin/build-entry",
-    "pub": "sh build/release.sh",
-    "pub:all": "node build/bin/build-all.js && lerna publish",
+    "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
+    "build:file": "node build/bin/build-entry.js",
+    "dev": "npm run bootstrap && npm run build:file",
     "clean": "rimraf lib && rimraf packages/*/lib"
   },
   "repository": {
@@ -35,28 +31,56 @@
     "wind-dom": "0.0.3"
   },
   "devDependencies": {
-    "css-loader": "^0.25.0",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-module-resolver": "^2.2.0",
+    "babel-plugin-syntax-jsx": "^6.8.0",
+    "babel-plugin-transform-vue-jsx": "^3.3.0",
+    "babel-preset-es2015": "^6.14.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "run-sequence": "^1.2.2",
+    "cp-cli": "^1.0.2",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.24.0",
+    "es6-promise": "^4.0.5",
+    "eslint": "^3.10.2",
     "extract-text-webpack-plugin": "^1.0.1",
-    "fastclick": "^1.0.6",
     "file-loader": "^0.9.0",
+    "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "highlight.js": "^9.3.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.22.0",
+    "inject-loader": "^3.0.0-beta2",
+    "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
     "lerna": "2.0.0-beta.31",
-    "my-local-ip": "^1.0.0",
-    "postcss": "^5.2.0",
-    "postcss-loader": "^0.13.0",
+    "lolex": "^1.5.1",
+    "markdown-it": "^6.1.1",
+    "markdown-it-anchor": "^2.5.0",
+    "markdown-it-container": "^2.0.0",
+    "postcss": "^5.1.2",
+    "postcss-loader": "^0.11.1",
+    "postcss-salad": "^1.0.5",
     "rimraf": "^2.5.4",
     "style-loader": "^0.13.1",
+    "theaterjs": "^3.0.0",
+    "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.1.7",
-    "vue-loader": "^9.5.3",
+    "vue": "^2.1.8",
+    "vue-loader": "^10.0.2",
+    "vue-markdown-loader": "^0.5.1",
     "vue-router": "^2.0.0",
+    "vue-template-compiler": "^2.1.8",
+    "vue-template-es2015-compiler": "^1.4.2",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",
-    "webpack-shell-plugin": "^0.4.3"
+    "webpack-node-externals": "^1.5.4"
   }
 }
diff --git a/packages/cell/cooking.conf.js b/packages/cell/cooking.conf.js
deleted file mode 100644
index c23f782c5..000000000
--- a/packages/cell/cooking.conf.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var cooking = require('cooking');
-var path = require('path');
-var config = require('../../build/config');
-
-cooking.set({
-  entry: {
-    index: path.join(__dirname, 'index.js')
-  },
-  dist: path.join(__dirname, 'lib'),
-  template: false,
-  format: 'umd',
-  moduleName: 'OxygenCell',
-  extractCSS: 'style.css',
-  extends: config.extends,
-  alias: config.alias,
-  externals: config.externals
-});
-
-module.exports = cooking.resolve();
diff --git a/packages/cell/index.js b/packages/cell/index.js
deleted file mode 100644
index 895397c6f..000000000
--- a/packages/cell/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Cell from './src/cell.vue';
-module.exports = Cell;
diff --git a/packages/cell/package.json b/packages/cell/package.json
deleted file mode 100644
index c800e13c1..000000000
--- a/packages/cell/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "oxygen-cell",
-  "description": "",
-  "version": "0.1.5",
-  "main": "lib/index.js",
-  "author": "elemefe",
-  "dependencies": {}
-}
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
deleted file mode 100644
index 24c3603d8..000000000
--- a/packages/cell/src/cell.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-  <a class="oxygen-cell" :href="href">
-    <span class="oxygen-cell-mask" v-if="isLink"></span>
-    <div class="oxygen-cell-left">
-      <slot name="left"></slot>
-    </div>
-    <div class="oxygen-cell-wrapper">
-      <div class="oxygen-cell-title">
-        <slot name="icon">
-          <i v-if="icon" class="oxygenui" :class="'oxygenui-' + icon"></i>
-        </slot>
-        <slot name="title">
-          <span class="oxygen-cell-text" v-text="title"></span>
-          <span v-if="label" class="oxygen-cell-label" v-text="label"></span>
-        </slot>
-      </div>
-      <div class="oxygen-cell-value" :class="{ 'is-link' : isLink }">
-        <slot>
-          <span v-text="value"></span>
-        </slot>
-      </div>
-    </div>
-    <div class="oxygen-cell-right">
-      <slot name="right"></slot>
-    </div>
-    <i v-if="isLink" class="oxygen-cell-allow-right"></i>
-  </a>
-</template>
-
-<script>
-if (process.env.NODE_ENV === 'component') {
-  require('oxygen/packages/font/style.css');
-}
-
-/**
- * o2-cell
- * @module components/cell
- * @desc 单元格
- * @param {string|Object} [to] - 跳转链接，使用 vue-router 的情况下 to 会传递给 router.push，否则作为 a 标签的 href 属性处理
- * @param {string} [icon] - 图标，提供 more, back，或者自定义的图标（传入不带前缀的图标类名，最后拼接成 .oxygenui-xxx）
- * @param {string} [title] - 标题
- * @param {string} [label] - 备注信息
- * @param {boolean} [is-link=false] - 可点击的链接
- * @param {string} [value] - 右侧显示文字
- * @param {slot} - 同 value, 会覆盖 value 属性
- * @param {slot} [title] - 同 title, 会覆盖 title 属性
- * @param {slot} [icon] - 同 icon, 会覆盖 icon 属性，例如可以传入图片
- *
- * @example
- * <o2-cell title="标题文字" icon="back" is-link value="描述文字"></o2-cell>
- * <o2-cell title="标题文字" icon="back">
- *   <div slot="value">描述文字啊哈</div>
- * </o2-cell>
- */
-export default {
-  name: 'o2-cell',
-
-  props: {
-    to: [String, Object],
-    icon: String,
-    title: String,
-    label: String,
-    isLink: Boolean,
-    value: {}
-  },
-
-  computed: {
-    href() {
-      if (this.to && !this.added && this.$router) {
-        const resolved = this.$router.match(this.to);
-        if (!resolved.matched.length) return this.to;
-
-        this.$nextTick(() => {
-          this.added = true;
-          this.$el.addEventListener('click', this.handleClick);
-        });
-        return resolved.path;
-      }
-      return this.to;
-    }
-  },
-
-  methods: {
-    handleClick($event) {
-      $event.preventDefault();
-      this.$router.push(this.href);
-    }
-  }
-};
-</script>
-
-<style lang="css">
-  @import "../../../src/style/var.css";
-
-  @component-namespace oxygen {
-    @component cell {
-      background-color: $color-white;
-      box-sizing: border-box;
-      color: inherit;
-      min-height: 48px;
-      display: block;
-      overflow: hidden;
-      position: relative;
-      text-decoration: none;
-
-      &:first-child {
-        .oxygen-cell-wrapper {
-          background-origin: border-box;
-        }
-      }
-
-      &:last-child {
-        background-image: linear-gradient(0deg, $color-grey, $color-grey 50%, transparent 50%);
-        background-size: 100% 1px;
-        background-repeat: no-repeat;
-        background-position: bottom;
-      }
-
-      @descendent wrapper {
-        background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
-        background-size: 120% 1px;
-        background-repeat: no-repeat;
-        background-position: top left;
-        background-origin: content-box;
-        align-items: center;
-        box-sizing: border-box;
-        display: flex;
-        font-size: 16px;
-        line-height: 1;
-        min-height: inherit;
-        overflow: hidden;
-        padding: 0 10px;
-        width: 100%;
-      }
-
-      @descendent mask {
-        &::after {
-          background-color: #000;
-          content: " ";
-          opacity: 0;
-          position: absolute 0;
-        }
-
-        &:active::after {
-          opacity: .1;
-        }
-      }
-
-      @descendent text {
-        vertical-align: middle;
-      }
-
-      @descendent label {
-        color: #888;
-        display: block;
-        font-size: 12px;
-        margin-top: 6px;
-      }
-
-      img {
-        vertical-align: middle;
-      }
-
-      @descendent title {
-        flex: 1;
-      }
-
-      @descendent value {
-        color: $cell-value-color;
-        display: flex;
-        align-items: center;
-
-        @when link {
-          margin-right: 24px;
-        }
-      }
-
-      @descendent left {
-        position: absolute;
-        height: 100%;
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-      }
-
-      @descendent right {
-        position: absolute;
-        height: 100%;
-        right: 0;
-        top: 0;
-        transform: translate3d(100%, 0, 0);
-      }
-
-      @descendent allow-right::after {
-        border: solid 2px $border-color;
-        border-bottom-width: 0;
-        border-left-width: 0;
-        content: " ";
-        position: absolute 50% 20px * *;
-        size: 5px;
-        transform: translateY(-50%) rotate(45deg);
-      }
-    }
-  }
-</style>
diff --git a/packages/sample b/packages/sample
new file mode 160000
index 000000000..9bd455ccd
--- /dev/null
+++ b/packages/sample
@@ -0,0 +1 @@
+Subproject commit 9bd455ccd018f524071148107df4859077a6afb7
diff --git a/src/index.js b/src/index.js
index ea55d05e2..42dc4cdff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,33 +1,10 @@
-import Button from '../packages/button/index.js';
-import Cell from '../packages/cell/index.js';
-import Field from '../packages/field/index.js';
-import Popup from '../packages/popup/index.js';
-import Picker from '../packages/picker/index.js';
-import Toast from '../packages/toast/index.js';
-import Indicator from '../packages/indicator/index.js';
-import MessageBox from '../packages/message-box/index.js';
-import Lazyload from '../packages/lazyload/index.js';
-import Spinner from '../packages/spinner/index.js';
-import '../src/assets/font/iconfont.css';
+import Sample from '../packages/sample/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
 
-  Vue.component(Button.name, Button);
-  Vue.component(Cell.name, Cell);
-  Vue.component(Field.name, Field);
-  Vue.component(Popup.name, Popup);
-  Vue.component(Picker.name, Picker);
-  Vue.component(Spinner.name, Spinner);
-  Vue.use(InfiniteScroll);
-  Vue.use(Lazyload, {
-    loading: require('./assets/loading-spin.svg'),
-    try: 3
-  });
+  Vue.component(Sample.name, Sample);
 
-  Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
-  Vue.$toast = Vue.prototype.$toast = Toast;
-  Vue.$indicator = Vue.prototype.$indicator = Indicator;
 };
 
 // auto install
@@ -37,15 +14,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '1.0.0',
-  Button,
-  Cell,
-  Field,
-  Popup,
-  Picker,
-  Toast,
-  Indicator,
-  MessageBox,
-  Lazyload,
-  Spinner
+  version: '0.0.1',
+  Sample
 };