diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js
index ff61ffe5..6c442115 100644
--- a/build/webpack.dev.config.js
+++ b/build/webpack.dev.config.js
@@ -4,7 +4,7 @@
 
 var path = require('path');
 var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+// var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
diff --git a/package.json b/package.json
index 19f661ed..23aa8688 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "vue-loader": "^11.0.0",
     "vue-router": "^2.2.1",
     "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.2.1",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1"
   }
diff --git a/src/components/steps/step.vue b/src/components/steps/step.vue
index 7a211fc9..99917224 100644
--- a/src/components/steps/step.vue
+++ b/src/components/steps/step.vue
@@ -21,11 +21,11 @@
 
     export default {
         props: {
-            status: {
-                validator (value) {
-                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
-                }
-            },
+            // status: {
+            //     validator (value) {
+            //         return oneOf(value, ['wait', 'process', 'finish', 'error']);
+            //     }
+            // },
             title: {
                 type: String,
                 default: ''
@@ -42,7 +42,8 @@
                 prefixCls: prefixCls,
                 stepNumber: '',
                 nextError: false,
-                total: 1
+                total: 1,
+                status: ''
             };
         },
         computed: {
diff --git a/src/components/steps/steps.vue b/src/components/steps/steps.vue
index 53a04401..906c2fd6 100644
--- a/src/components/steps/steps.vue
+++ b/src/components/steps/steps.vue
@@ -43,7 +43,7 @@
                 ];
             }
         },
-        ready () {
+        mounted () {
             this.updateChildProps(true);
             this.setNextError();
             this.updateCurrent(true);
diff --git a/src/index.js b/src/index.js
index 7f062497..e4e0ef40 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,7 +31,7 @@ import Radio from './components/radio';
 // import Rate from './components/rate';
 // import Slider from './components/slider';
 // import Spin from './components/spin';
-// import Steps from './components/steps';
+import Steps from './components/steps';
 // import Switch from './components/switch';
 // import Table from './components/table';
 // import Tabs from './components/tabs';
@@ -96,8 +96,8 @@ const iview = {
     // iSelect: Select,
     // Slider,
     // Spin,
-    // Step: Steps.Step,
-    // Steps,
+    Step: Steps.Step,
+    Steps,
     // Switch,
     // iTable: Table,
     // Tabs: Tabs,
diff --git a/test/app.vue b/test/app.vue
index 60c82c31..8f207128 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -2,26 +2,15 @@
     @import "../src/styles/index.less";
 </style>
 <style scoped>
-nav {
-    margin-bottom: 40px;
-}
-
-li {
-    display: inline-block;
-}
-
-li + li {
-    border-left: solid 1px #bbb;
-    padding-left: 5px;
-    margin-left: 5px;
-}
-
-.v-link-active {
-    color: #bbb;
-}
+nav { margin-bottom: 40px; }
+ul { display: flex; flex-wrap: wrap; }
+li { display: inline-block; }
+li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
+.container{ padding: 10px 40px; }
+.v-link-active { color: #bbb; }
 </style>
 <template>
-    <div>
+    <div class="container">
         <nav>
             <ul>
                 <li><router-link to="/affix">Affix</router-link></li>
@@ -30,6 +19,7 @@ li + li {
                 <li><router-link to="/input">Input</router-link></li>
                 <li><router-link to="/radio">Radio</router-link></li>
                 <li><router-link to="/checkbox">Checkbox</router-link></li>
+                <li><router-link to="/steps">Steps</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 9500e84f..57ec7a9d 100644
--- a/test/main.js
+++ b/test/main.js
@@ -40,6 +40,10 @@ const router = new VueRouter({
         {
             path: '/checkbox',
             component: require('./routers/checkbox.vue')
+        },
+        {
+          path: '/steps',
+          component: require('./routers/steps.vue')
         }
     ]
 });
diff --git a/test/routers/step.vue b/test/routers/steps.vue
similarity index 92%
rename from test/routers/step.vue
rename to test/routers/steps.vue
index 21cc00dd..f18a0425 100644
--- a/test/routers/step.vue
+++ b/test/routers/steps.vue
@@ -1,7 +1,5 @@
-<style>
-
-</style>
 <template>
+<div>
     <Steps :current="1" size="small">
         <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
         <Step title="进行中" content="这里是该步骤的描述信息"></Step>
@@ -41,8 +39,9 @@
         <Step title="步骤3"></Step>
         <Step title="步骤4"></Step>
     </Steps>
-    <i-button type="primary" @click="next">下一步</i-button>
-    <br><br>
+    <br>
+    <Button type="primary" @click.native="next">下一步</Button>
+    <br><br><br>
     <Steps :current="1" direction="vertical" size="small">
         <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
         <Step title="进行中" content="这里是该步骤的描述信息"></Step>
@@ -56,18 +55,18 @@
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
     </Steps>
+</div>
 </template>
 <script>
-    import { Page, Steps, iButton } from 'iview';
+    import { Steps, Button } from 'iview';
 
     const Step = Steps.Step;
 
     export default {
         components: {
-            Page,
             Steps,
             Step,
-            iButton
+            Button
         },
         props: {
 
@@ -82,9 +81,6 @@
 
         },
         methods: {
-            setPage (page) {
-                console.log(page)
-            },
             next () {
                 if (this.current == 3) {
                     this.current = 0;