diff --git a/packages/babel-plugin-chameleon-import/src/Plugin.js b/packages/babel-plugin-chameleon-import/src/Plugin.js
index dac965cc3cac2800a6bbf59068ca3a8e5dbfcd92..fdb1e9f5198a9a79e312a64a7ebffa69c54b146a 100644
--- a/packages/babel-plugin-chameleon-import/src/Plugin.js
+++ b/packages/babel-plugin-chameleon-import/src/Plugin.js
@@ -188,7 +188,13 @@ class Plugin {
 
     if (pluginState.libraryObjs[node.object.name]) {
       // antd.Button -> _Button
-      path.replaceWith(this.importMethod(node.property.name, file, pluginState));
+      if (node.property.type === 'Identifier') {
+        //antd.Button
+        path.replaceWith(this.importMethod(node.property.name, file, pluginState));
+      } else if (node.property.type === 'Literal') {
+        //antd['Button']
+        path.replaceWith(this.importMethod(node.property.value, file, pluginState));
+      }
     } else if (pluginState.specified[node.object.name]) {
       node.object = this.importMethod(pluginState.specified[node.object.name], file, pluginState);
     }
diff --git a/packages/chameleon-css-loader/handler/lines.js b/packages/chameleon-css-loader/handler/lines.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e4d8707ad4e7ea9aafc8715317a8c2c4458b4d0
--- /dev/null
+++ b/packages/chameleon-css-loader/handler/lines.js
@@ -0,0 +1,6 @@
+// 静态编译和运行时 web和小程序端对lines属性特殊处理
+
+module.exports = function(linesNumber) {
+  // 作为一个属性注意最后不能添加分号
+  return `display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${linesNumber}; overflow: hidden`
+}
diff --git a/packages/chameleon-css-loader/parser/miniapp.js b/packages/chameleon-css-loader/parser/miniapp.js
index cd1629aa828ece22f35a0d1c1602ef467b98301b..9b3dbffad7db2d3e7a6ed832f203255ef433b4c6 100644
--- a/packages/chameleon-css-loader/parser/miniapp.js
+++ b/packages/chameleon-css-loader/parser/miniapp.js
@@ -1,6 +1,10 @@
 
 const cpx = require('../postcss/cpx.js');
+const weexPlus = require('../postcss/weex-plus');
+const postcss = require('postcss');
+
 module.exports = function(source, options = {}) {
   options.cpxType = 'rpx';
-  return cpx(source, options);
+  return postcss([cpx(options), weexPlus()]).process(source).css;
+
 }
diff --git a/packages/chameleon-css-loader/parser/web.js b/packages/chameleon-css-loader/parser/web.js
index 2b4db3083efa51dea773cbdf50d77667027335cc..440b7703a8321eace2af8ad8cc369caa68afa696 100644
--- a/packages/chameleon-css-loader/parser/web.js
+++ b/packages/chameleon-css-loader/parser/web.js
@@ -1,11 +1,13 @@
 
-const rem = require('../postcss/rem.js');
 const cpx = require('../postcss/cpx.js');
+const postcss = require('postcss');
+const px2rem = require('postcss-plugin-px2rem');
+const weexPlus = require('../postcss/weex-plus');
 module.exports = function(source, options = {}) {
   if (options.rem === true) {
-    return rem(source, options);
+    return postcss([px2rem(options.remOptions), weexPlus()]).process(source).css;
   } else {
     options.cpxType = 'scale';
-    return cpx(source, options);
+    return postcss([cpx(options), weexPlus()]).process(source).css;
   }
 }
diff --git a/packages/chameleon-css-loader/postcss/autoprefix.js b/packages/chameleon-css-loader/postcss/autoprefix.js
deleted file mode 100644
index 9592f20e47f31ffbbfb4d43ed03efe8f076cba88..0000000000000000000000000000000000000000
--- a/packages/chameleon-css-loader/postcss/autoprefix.js
+++ /dev/null
@@ -1,7 +0,0 @@
-
-const autoprefixer = require('autoprefixer');
-const postcss = require('postcss');
-module.exports = function (content, options) {
-  let ret = postcss(autoprefixer(options.autoprefixOptions)).process(content).css;
-  return ret;
-}
diff --git a/packages/chameleon-css-loader/postcss/cpx.js b/packages/chameleon-css-loader/postcss/cpx.js
index da7ab77e7b25325b5801c40504bb6b26c84664a8..6bdf1eae94e2dedb357b14937a5acae55d2f4ba0 100644
--- a/packages/chameleon-css-loader/postcss/cpx.js
+++ b/packages/chameleon-css-loader/postcss/cpx.js
@@ -1,6 +1,6 @@
 const postcss = require('postcss');
 // 非rem的cpx处理，rem的利用postcss-plugin-px2rem插件即可实现
-let scalePlugin = postcss.plugin('postcss-plugin-cpx-scale', function (options) {
+module.exports = postcss.plugin('postcss-plugin-cpx', function (options) {
   // parseType 参数决定cpx的转换
   let { unitPrecision = 5, scale = 1, cpxType = 'scale'} = options;
   const pxRegex = /(\d*\.?\d+)cpx/gi;
@@ -40,8 +40,3 @@ let scalePlugin = postcss.plugin('postcss-plugin-cpx-scale', function (options)
     });
   };
 });
-
-module.exports = function (content, options) {
-  let ret = postcss(scalePlugin(options)).process(content).css;
-  return ret;
-}
diff --git a/packages/chameleon-css-loader/postcss/rem.js b/packages/chameleon-css-loader/postcss/rem.js
deleted file mode 100644
index eaa4095fdae1082b91c7aaefbcc6194d41eddfdc..0000000000000000000000000000000000000000
--- a/packages/chameleon-css-loader/postcss/rem.js
+++ /dev/null
@@ -1,7 +0,0 @@
-
-const pxtorem = require('postcss-plugin-px2rem');
-const postcss = require('postcss');
-module.exports = function (content, options) {
-  let ret = postcss(pxtorem(options.remOptions)).process(content).css;
-  return ret;
-}
diff --git a/packages/chameleon-css-loader/postcss/weex-plus.js b/packages/chameleon-css-loader/postcss/weex-plus.js
new file mode 100644
index 0000000000000000000000000000000000000000..7031471bae581991b54d981b0019e37c30d051ed
--- /dev/null
+++ b/packages/chameleon-css-loader/postcss/weex-plus.js
@@ -0,0 +1,21 @@
+// 为web和小程序提供编译weex为标准的特殊样式
+
+const postcss = require('postcss');
+
+module.exports = postcss.plugin('postcss-weex-plus', function(options) {
+  return (root, result) => {
+    root.walkDecls((decl, i) => {
+      if (decl.prop === 'lines') {
+        const decllist = [
+          postcss.decl({prop: 'overflow', value: 'hidden'}),
+          postcss.decl({prop: 'text-overflow', value: 'ellipsis'}),
+          postcss.decl({prop: 'display', value: '-webkit-box'}),
+          postcss.decl({prop: '-webkit-line-clamp', value: decl.value}),
+          postcss.decl({prop: '-webkit-box-orient', value: 'vertical'})
+        ];
+        decl.parent.append(...decllist)
+      }
+      // decl.parent.removeChild(decl);
+    })
+  }
+})
diff --git a/packages/chameleon-css-loader/proxy/proxyMiniapp.js b/packages/chameleon-css-loader/proxy/proxyMiniapp.js
index 8ab39a4d771d4e4dd3dfb6889517e7e6c6174244..25a7dbd2915fdd82caadcc8bb7e1a4b35f992fc0 100644
--- a/packages/chameleon-css-loader/proxy/proxyMiniapp.js
+++ b/packages/chameleon-css-loader/proxy/proxyMiniapp.js
@@ -1,5 +1,5 @@
 const utils = require('../utils');
-
+const lines = require('../handler/lines');
 // 运行时的cpx2rpx不能使用postcss处理，因为$cmlStyle方法用到了该方法，在运行时使用postcss 会出现Cannot find module "fs"的错误
 module.exports = function(content) {
   content = utils.disappearCssComment(content);
@@ -16,6 +16,9 @@ module.exports = function(content) {
         };
       })
       .map(declaration => {
+        if (declaration.property === 'lines') {
+          return lines(declaration.value);
+        }
         declaration.value = handle(declaration.value);
         return declaration.property + ':' + declaration.value;
       })
diff --git a/packages/chameleon-css-loader/proxy/proxyWeb.js b/packages/chameleon-css-loader/proxy/proxyWeb.js
index ffd5d4cb1585ba9eb1b09548d7fd0aa233012183..415653605b126ffc7a1b7f3bbb594dd53e286ba0 100644
--- a/packages/chameleon-css-loader/proxy/proxyWeb.js
+++ b/packages/chameleon-css-loader/proxy/proxyWeb.js
@@ -1,7 +1,8 @@
 /** 提供编译时样式处理的方法 */
 // 运行时不能使用postcss 体积过大
-
+const lines = require('../handler/lines');
 const utils = require('../utils');
+
 module.exports = function(content, options) {
   if (typeof options === 'string') {
     options = JSON.parse(utils.singlequot2doublequot(options))
@@ -24,6 +25,9 @@ module.exports = function(content, options) {
         };
       })
       .map(declaration => {
+        if (declaration.property === 'lines') {
+          return lines(declaration.value);
+        }
         declaration.value = handle(declaration.value, options);
         return declaration.property + ':' + declaration.value;
       })
diff --git a/packages/chameleon-css-loader/test/parser-test/weex.test.js b/packages/chameleon-css-loader/test/parser-test/weex.test.js
index 10f08acbcd33b478a36e8aee20e574ac93dd815f..8c61782269e263399267a8a358dadd2d6a33b93c 100644
--- a/packages/chameleon-css-loader/test/parser-test/weex.test.js
+++ b/packages/chameleon-css-loader/test/parser-test/weex.test.js
@@ -17,4 +17,97 @@ describe('parse/weex', function() {
 
 })
 
+describe('parse/weex', function() {
+  let css = `
+  .a {
+    border: solid 1px red;
+  }
+  .b {
+    border: dotted 0 rgb(255,255, 255);
+  }
+  .c {
+    border-left: solid 1px #ccc;
+  }
+  
+`;
+
+  it('border', function() {
+
+    let result = parseCss(css);// body {width:1rem;}
+    console.log(result);
+    expect(result).to.equal(`.a {\n  border-style: solid;\n  border-width: 1px;\n  border-color: #ff0000;\n}\n\n.b {\n  border-style: dotted;\n  border-width: 0;\n  border-color: rgb(255,255,255);\n}\n\n.c {\n  border-left-style: solid;\n  border-left-width: 1px;\n  border-left-color: #ccc;\n}`);
+  })
+
+})
+
+
+describe('parse/weex', function() {
+  let css = `
+  .a {
+    margin-left: 10px;
+  }
+  .b {
+    margin: 10px;
+  }
+  .c {
+    margin: 10px 20px;
+  }
+  .d {
+    margin: 10px 20px 10px;
+  }
+  .e {
+    margin: 10px 20px 5px 15px;
+  }
+`;
+
+  it('margin', function() {
+
+    let result = parseCss(css);// body {width:1rem;}
+    console.log(result);
+    expect(result).to.equal(`.a {\n  margin-left: 10px;\n}\n\n.b {\n  margin-top: 10px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  margin-left: 10px;\n}\n\n.c {\n  margin-top: 10px;\n  margin-right: 20px;\n  margin-bottom: 10px;\n  margin-left: 20px;\n}\n\n.d {\n  margin-top: 10px;\n  margin-right: 20px;\n  margin-bottom: 10px;\n  margin-left: 20px;\n}\n\n.e {\n  margin-top: 10px;\n  margin-right: 20px;\n  margin-bottom: 5px;\n  margin-left: 15px;\n}`);
+  })
+
+})
 
+
+describe('parse/weex', function() {
+  let css = `
+    .a {
+      padding-left: 10px;
+    }
+    .b {
+      padding: 10px;
+    }
+  `;
+  it('padding', function() {
+    let result = parseCss(css);// body {width:1rem;}
+    console.log(result);
+    expect(result).to.equal(`.a {\n  padding-left: 10px;\n}\n\n.b {\n  padding-top: 10px;\n  padding-right: 10px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n}`);
+  })
+
+})
+
+
+describe('parse/weex', function() {
+  let css = `
+  .a {
+    background: #ccc
+                  url(img.png)
+                  no-repeat
+                  scroll
+                  center center / 50%
+                  content-box border-box;
+
+  }
+  .b {
+    background: url(img.png) #ccc;
+  }
+`;
+
+  it('background', function() {
+    let result = parseCss(css);// body {width:1rem;}
+    console.log(result);
+    expect(result).to.equal(`.a {\n  background-color: #ccc;\n  background-position: center center;\n  background-size: 50%;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  background-clip: border-box;\n  background-attachment: scroll;\n  background-image: url(img.png);\n}\n\n.b {\n  background-color: #ccc;\n  background-image: url(img.png);\n}`);
+  })
+
+})
diff --git a/packages/chameleon-css-loader/test/postcss-test/rem.test.js b/packages/chameleon-css-loader/test/postcss-test/rem.test.js
deleted file mode 100644
index ed33e6cefc68315e596c3a2ace8335729b96affe..0000000000000000000000000000000000000000
--- a/packages/chameleon-css-loader/test/postcss-test/rem.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const parseCss = require('../../postcss/rem.js');
-const expect = require('chai').expect;
-
-let source = `width:75cpx;font-size:26cpx;/* height:200cpx; */`;
-
-
-describe('postcss/rem', function() {
-  it('web-cssvalue : if options.rem to be truthy ,parse cpx to rem', function() {
-    let options = {
-      rem: true,
-      scale: 0.5,
-      remOptions: {
-        // base on 750px standard.
-        rootValue: {cpx: 75},
-        // to leave 1px alone.
-        minPixelValue: 1.01
-      }
-    }
-    let result = parseCss(source, options);
-    expect(/1rem/.test(result)).to.be.ok;
-  })
-})
-
-
diff --git a/packages/chameleon-css-loader/test/postcss-test/weex-plus.test.js b/packages/chameleon-css-loader/test/postcss-test/weex-plus.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba76755f128f760ed89d3291fa1f029178b993a3
--- /dev/null
+++ b/packages/chameleon-css-loader/test/postcss-test/weex-plus.test.js
@@ -0,0 +1,17 @@
+var postcss = require('postcss');
+var weexPlus = require('../../postcss/weex-plus');
+var content = `
+.class1 {
+  lines: 1;
+}
+`
+const expect = require('chai').expect;
+
+describe('postcss/weex-plus', function() {
+  it('convert lines', function() {
+
+    let ret = postcss(weexPlus()).process(content).css;
+    console.log(ret)
+    expect(ret).to.equal(`\n.class1 {\n  lines: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n}\n`);
+  })
+})
diff --git a/packages/chameleon-css-loader/test/proxy-test/proxyMiniapp.test.js b/packages/chameleon-css-loader/test/proxy-test/proxyMiniapp.test.js
index 61b4c8f826d0e3d6a3b9e3d6620b332cc13ebee8..c006a54ef947685d1b7da55b058de6f531047db7 100644
--- a/packages/chameleon-css-loader/test/proxy-test/proxyMiniapp.test.js
+++ b/packages/chameleon-css-loader/test/proxy-test/proxyMiniapp.test.js
@@ -7,6 +7,11 @@ describe('proxy/miniapp', function() {
     let result = parseCss(source);
     expect(/75rpx/.test(result)).to.be.ok;
   })
+
+  it('lines', function() {
+    let result = parseCss('lines:1;');
+    expect(result).to.equal('display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden');
+  })
 })
 
 
diff --git a/packages/chameleon-css-loader/test/proxy-test/proxyWeb.test.js b/packages/chameleon-css-loader/test/proxy-test/proxyWeb.test.js
index d3052adea21390eecf72063ff16b02b04395a11c..6292e4861cfe9555c42325651b0174054a624ae8 100644
--- a/packages/chameleon-css-loader/test/proxy-test/proxyWeb.test.js
+++ b/packages/chameleon-css-loader/test/proxy-test/proxyWeb.test.js
@@ -31,6 +31,12 @@ describe('parse/web', function() {
     expect(/1rem/.test(result1)).to.be.ok;
     expect(/37.5px/.test(result2)).to.be.ok;
   })
+
+
+  it('lines', function() {
+    let result = parseCss('lines:1;');
+    expect(result).to.equal('display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden');
+  })
 })
 
 
diff --git a/packages/chameleon-css-loader/test/transform/weex.test.js b/packages/chameleon-css-loader/test/transform/weex.test.js
index adf6d58d72aca68a7529451ecea1cc06b403f006..cf87276a8d7a18dfebc819d3ccb4574966eef572 100644
--- a/packages/chameleon-css-loader/test/transform/weex.test.js
+++ b/packages/chameleon-css-loader/test/transform/weex.test.js
@@ -1,16 +1,13 @@
 const parseCss = require('../../transform/weex.js');
 const expect = require('chai').expect;
-
 let source = `width:75cpx;border:1cpx solid red;`;
 
 
 describe('parse/weex', function() {
   it('if options.rem to be truthy ,parse px to rem,else multiply the px value by options.scale', function() {
-
     let result = parseCss.parse(source);// body {width:1rem;}
     console.log(result);
     expect(/75px/.test(result)).to.be.ok;
     expect(/1px/.test(result)).to.be.ok;
   })
-
 })
diff --git a/packages/chameleon-template-parse/src/common/process-template.js b/packages/chameleon-template-parse/src/common/process-template.js
index cac1e796beb7abbf9b7c266237065a63ae98a9c0..241b29851bc7e94c68a7648f09bb36ce740e281b 100644
--- a/packages/chameleon-template-parse/src/common/process-template.js
+++ b/packages/chameleon-template-parse/src/common/process-template.js
@@ -73,7 +73,7 @@ exports.preParseGtLt = function(content) {
     return exports._operationGtLt(match);
   })
 }
-
+// 预处理 标签内的 {{item.id}} 这种语法jsx无法识别，转化为 _cml{item.id}lmc_
 exports.preParseMustache = function (content) {
   let reg = />([\s\S]*?)<[a-zA-Z\/\-_]+?/g;
   return content.replace(reg, function (match, key) {
@@ -103,8 +103,8 @@ exports.preParseAnimation = function(source, type) {
   traverse(ast, {
     enter(path) {
       let node = path.node;
-      if (t.isJSXAttribute(node) && node.name.name === 'c-animation') {
-        let value = utils.trimCurly(node.value.value);
+      if (t.isJSXAttribute(node) && (node.name.name === 'c-animation' || node.name.name === 'v-animation')) {
+        let value = utils.trimCurly(node.value.value).trim();
         path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`c-bind:transitionend`), t.stringLiteral(`_animationCb('${value}',$event)`)))
       }
     }
diff --git a/packages/chameleon-template-parse/src/common/utils.js b/packages/chameleon-template-parse/src/common/utils.js
index f18ccd6e9fd3ab734aa4b7d8e6c8ee1cef5128c7..adfc7c735097d2b925832fa68342d6118b4e1811 100644
--- a/packages/chameleon-template-parse/src/common/utils.js
+++ b/packages/chameleon-template-parse/src/common/utils.js
@@ -163,15 +163,18 @@ _.transformWxDynamicStyleCpxToRpx = function(value) {
   return value;
 }
 _.transformNotInMustacheCpxToRpx = function(value) {
-  // 第一步
-  let isNotMustacheCpxToRpxReg = /}}[^{}]*?(cpx)/g;
-  return value.replace(isNotMustacheCpxToRpxReg, (match, key) => {
-    if (key === 'cpx') {
-      return match.replace(/cpx/, 'rpx')
+  let isNotMustacheCpxToRpxReg = /([^{}]+)?(\{\{[^{}]+\}\})?/g;
+  let temp = '';
+  const matches = value.match(isNotMustacheCpxToRpxReg);
+  value.replace(isNotMustacheCpxToRpxReg, (match, $1, $2, $3) => {
+    if ($1) {
+      temp += $1.replace(/cpx/g, 'rpx');
+    }
+    if ($2) {
+      temp += $2;
     }
-    return match;
   });
-
+  return temp
 }
 _.transformMustacheCpxToRpx = function(source) {
   const ast = babylon.parse(source, {
diff --git a/packages/chameleon-template-parse/src/parser/index.js b/packages/chameleon-template-parse/src/parser/index.js
index 388bec5623917a478646fbbe159d08bb4fe43209..fd1547639d08b398d352fc0e5ee7bd5420efb49d 100644
--- a/packages/chameleon-template-parse/src/parser/index.js
+++ b/packages/chameleon-template-parse/src/parser/index.js
@@ -105,10 +105,10 @@ exports.parseTextContentStatement = function parseTextContentStatement(path, typ
   //   parseTextContent.call({path,type,node})
   // }
 }
-exports.parseRefStatement = function parseRefStatement(path, type) {
+exports.parseRefStatement = function parseRefStatement(path, type, options) {
   let node = path.node;
-  if (t.isJSXAttribute(node) && node.name.name === 'ref') {
-    parseRef.call({path, type, node});
+  if (t.isJSXAttribute(node) && (node.name.name === 'ref' || node.name.name.name === 'ref')) {
+    parseRef.call({path, type, node, options});
   }
 }
 // web weex wx ...只处理cml语法  c-if c-else-if c-else
diff --git a/packages/chameleon-template-parse/src/parser/parse-condition.js b/packages/chameleon-template-parse/src/parser/parse-condition.js
index 622ccae36aa26e87b5aa8fda6736537338e2d05c..3e185a2094260badfa7be21ff4574c6aa6437fb3 100644
--- a/packages/chameleon-template-parse/src/parser/parse-condition.js
+++ b/packages/chameleon-template-parse/src/parser/parse-condition.js
@@ -37,7 +37,7 @@ parseCondition.tap('baidu', (args) => {
     let targetCondition = conditionMap[currentCondition] && conditionMap[currentCondition][type];
     if (targetCondition && currentCondition !== targetCondition) {
       node.name.name = targetCondition;
-      node.value.value = utils.trimCurly(node.value.value);
+      node.value && t.isStringLiteral(node.value) && (node.value.value = utils.trimCurly(node.value.value));
     }
   }
 })
diff --git a/packages/chameleon-template-parse/src/parser/parse-ref.js b/packages/chameleon-template-parse/src/parser/parse-ref.js
index f485de41acbaa92439a80f26a9bab8a9b89d9033..156bab253a4de2ac076b470a9cb45ce64d6d6880 100644
--- a/packages/chameleon-template-parse/src/parser/parse-ref.js
+++ b/packages/chameleon-template-parse/src/parser/parse-ref.js
@@ -3,9 +3,9 @@ const t = require('@babel/types');
 const { SyncHook } = require("tapable");
 
 let parseRef = new SyncHook(['args'])
-parseRef.tap('wx', (args) => {
-  let { path, type } = args;
-  if (type === 'wx' || type === 'alipay' || type === 'baidu') {
+parseRef.tap('wx-cml', (args) => {
+  let { path, type, options: { lang } } = args;
+  if (lang === 'cml' && (type === 'wx' || type === 'alipay' || type === 'baidu')) {
     let parentPath = path.parentPath;
     let attributes = parentPath.node.attributes;
     let idNode = attributes.find((attr) => attr.name.name === 'id');
@@ -23,6 +23,34 @@ parseRef.tap('wx', (args) => {
     }
 
 
+    path.remove();
+  }
+
+});
+parseRef.tap('wx-vue', (args) => {
+  let { path, type, options: { lang } } = args;
+  if (lang === 'vue' && (type === 'wx' || type === 'alipay' || type === 'baidu')) {
+    debugger;
+    let parentPath = path.parentPath;
+    let attributes = parentPath.node.attributes;
+    let idNode = attributes.find((attr) => attr.name.name === 'id');
+    let refNode = attributes.find((attr) => (attr.name.name === 'ref' || attr.name.name.name === 'ref'));
+    let isDynamicRef = t.isJSXNamespacedName(refNode.name);
+    let refNodeValue = isDynamicRef ? `{{${refNode.value.value}}}` : refNode.value.value
+    let classNode = attributes.find((attr) => attr.name.name === 'class');
+    if (idNode) {
+
+      idNode.value.value = refNodeValue;
+    } else {
+      attributes.push(t.jsxAttribute(t.jsxIdentifier('id'), t.stringLiteral(refNodeValue)))
+    }
+    if (!classNode) { // 不存在class节点
+      attributes.push(t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral('_cml_ref_lmc_')))
+    } else {
+      classNode.value.value = `${classNode.value.value}  _cml_ref_lmc_`
+    }
+
+
     path.remove();
   }
 
diff --git a/packages/chameleon-template-parse/test/common/process-template.test.js b/packages/chameleon-template-parse/test/common/process-template.test.js
index 083b595fa7c7f10bc6c92d1e98cf1d44745d9f4e..98b678f1a82fc68bb6e457e81ba327f58497f458 100644
--- a/packages/chameleon-template-parse/test/common/process-template.test.js
+++ b/packages/chameleon-template-parse/test/common/process-template.test.js
@@ -29,7 +29,7 @@ describe('process-template', function() {
   // preParseAnimation
   describe('preParseAnimation', function() {
     it(`preParse Animation add c-bind:transitionend="_animationCb(...)"`, function() {
-      expect(processTemplate.preParseAnimation(`<view><text c-animation="{{sss}}" c-bind:transitionend="_animationCb('sss',$event)">click</text></view>;`))
+      expect(processTemplate.preParseAnimation(`<view><text c-animation="{{ sss }}">click</text></view>`)).to.equal(`<view><text c-animation="{{ sss }}" c-bind:transitionend="_animationCb('sss',$event)">click</text></view>;`)
     })
   });
   describe('postParseMustache', function() {
@@ -47,4 +47,15 @@ describe('process-template', function() {
       expect(processTemplate.postParseUnicode(`\\u`)).to.equal(`%u`)
     })
   });
+  describe('postParseOriginTag', function() {
+    it('transform <origin-tag></origin-tag> to <tag></tag>', function() {
+      expect(processTemplate.postParseOriginTag(`<view><origin-input></origin-input></view>`)).to.equal(`<view><input></input></view>;`)
+    })
+  });
+  describe('analyzeTemplate', function() {
+    it('collect which build-in-tag is used in template', function() {
+      let options = {buildInComponents: {button: "cml-buildin-button"}};
+      expect(processTemplate.analyzeTemplate(`<view><button></button></view>`, options)).to.include.keys('usedBuildInTagMap')
+    })
+  });
 })
diff --git a/packages/chameleon-template-parse/test/common/utils.test.js b/packages/chameleon-template-parse/test/common/utils.test.js
index 1a9ec6e51befeade740ea44c92ee8817359b3e88..6975b0f18cbe90310e793e16d9e215edb1993e2f 100644
--- a/packages/chameleon-template-parse/test/common/utils.test.js
+++ b/packages/chameleon-template-parse/test/common/utils.test.js
@@ -57,19 +57,39 @@ describe('utils', function() {
       expect(utils.isOnlySpaceContent('   ')).to.be.ok;
     })
   });
+  describe('getReactiveValue', function() {
+    it('getReactiveValue for vue:such as {{value}} to (value)', function() {
+      expect(utils.getReactiveValue(`{{value1+value2}}`)).to.equal(`(value1+value2)`);
+    })
+  });
+  describe('getReactiveValue', function() {
+    it(`getReactiveValue for vue:such as main-{{index}} to 'main-'+(value)`, function() {
+      expect(utils.getReactiveValue(`main-{{value1+value2}}`)).to.equal(`'main-'+(value1+value2)`);
+    })
+  });
   describe('getStaticValueFromMixinValue', function() {
     it('getStaticValueFromMixinValue for cml', function() {
       let result = utils.getStaticValueFromMixinValue(`a b{{true? 'cls1':'cls2'}} {{variable}}b c `);
-      console.log('result', result)
       expect(result).to.equal(`a b   b c `);
     })
   });
   describe('getDynamicValuefromMixinValue', function() {
     it('getDynamicValuefromMixinValue for cml', function() {
       let result = utils.getDynamicValuefromMixinValue(`a b{{true? 'cls1':'cls2'}} {{variable}}b c `);
-      console.log('result', result)
       expect(result).to.equal(`{{true? 'cls1':'cls2'}}{{variable}}`);
     })
   });
+  describe('transformWxDynamicStyleCpxToRpx', function() {
+    it('cml-syanx:transformWxDynamicStyleCpxToRpx for wx dynamic style', function() {
+      let result = utils.transformWxDynamicStyleCpxToRpx(`height:100cpx;{{'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red;'}}height:200cpx;width:100cpx;`);
+      expect(result).to.equal(`height:100rpx;{{'width:' + cpx + 'rpx;' + 'height:' + cpx2 + 'rpx;background-color:red;'}}height:200rpx;width:100rpx;`);
+    })
+  });
+  describe('transformWxDynamicStyleCpxToRpx', function() {
+    it('vue-syanx:ransformWxDynamicStyleCpxToRpx for wx dynamic style', function() {
+      let result = utils.transformWxDynamicStyleCpxToRpx(`{{'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red'}}`);
+      expect(result).to.equal(`{{'width:' + cpx + 'rpx;' + 'height:' + cpx2 + 'rpx;background-color:red'}}`);
+    })
+  });
 
 })
diff --git a/packages/chameleon-template-parse/test/parser/cml.test.js b/packages/chameleon-template-parse/test/parser/cml.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d38e6d3d9c1bff02e0a74c6e578d80677e51f30
--- /dev/null
+++ b/packages/chameleon-template-parse/test/parser/cml.test.js
@@ -0,0 +1,202 @@
+// cml 或者vue语法整体单元测试
+const compileTemplate = require('../../src/index.js');
+const expect = require('chai').expect;
+
+let options = {lang: 'cml',
+  buildInComponents: {button: "cml-buildin-button"},
+  cmss: {
+    rem: true,
+    scale: 0.5,
+    remOptions: {
+    // base on 750px standard.
+      rootValue: 75,
+      // to leave 1px alone.
+      minPixelValue: 1.01
+    },
+    autoprefixOptions: {
+      browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
+    }
+  },
+  usingComponents: [{
+    tagName: 'thirdComp1',
+    refUrl: '/path/to/ref1',
+    filePath: 'path/to/real1',
+    isNative: true
+  }, {
+    tagName: 'thirdComp2',
+    refUrl: '/path/to/ref2',
+    filePath: 'path/to/real2',
+    isNative: false
+  }]
+};
+describe('parse-template-cml-all', function() {
+  // parseTag
+  describe('parse-tag-transform', function() {
+    let source = `<view><button></button><thirdComp1></thirdComp1><thirdComp2></thirdComp2></view>`;
+    it('test-tag-transform', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></view>`)
+    });
+  });
+  // directive
+  describe('parse-directive-transform', function() {
+    let source = `<view><button c-model="{{  value1}}"></button>
+    <thirdComp1 c-show="{{ vlaue2 }}"></thirdComp1>
+    <thirdComp2 c-text="{{ value3 }}"></thirdComp2>
+    <thirdComp2 c-animation="{{ value3 }}"></thirdComp2>
+    <thirdComp2 c-for="{{ value4 }}"></thirdComp2>
+    <thirdComp2 c-if="{{ value5 }}"></thirdComp2>
+    <thirdComp2 c-else-if="{{ value5 }}"></thirdComp2>
+    <thirdComp2 c-else></thirdComp2>
+    <view c-text="{{value6}}"></view>
+    </view>`;
+    it('test-directive-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-on:input="_cmlModelEventProxy($event,\'value1\')" v-bind:value="value1" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" v-show=" vlaue2 "></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'value3\',$event)" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-for="(item, index) in  value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <div class=" cml-base cml-view">{{value6}}</div>\n    </div>`);
+    });
+    it('test-directive-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-on:input="_cmlModelEventProxy($event,\'value1\')" v-bind:value="value1" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" v-bind:style="_cmlStyleProxy((\'display:\'+( vlaue2 ?\'\':\'none\')+\';\'+( vlaue2 ?\'\':\'height:0px;width:0px;overflow:hidden\')))"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'value3\',$event)" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-for="(item, index) in  value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <div class=" cml-base cml-view">{{value6}}</div>\n    </div>`)
+    });
+    it('test-directive-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindinput="_cmlModelEventProxy" value="{{  value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2 ? \'\' : \'none\'}};{{vlaue2 ? \'\' : \'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 animation="{{ value3 }}" bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:for="{{ value4 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:if="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:elif="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+    it('test-directive-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindInput="_cmlModelEventProxy" value="{{  value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2 ? \'\' : \'none\'}};{{vlaue2 ? \'\' : \'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 animation="{{ value3 }}" onTransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:for="{{ value4 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:if="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:elif="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+    it('test-directive-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindinput="_cmlModelEventProxy" value="{{  value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2 ? \'\' : \'none\'}};{{vlaue2 ? \'\' : \'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 animation="{{ value3 }}" bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-for=" value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-elif=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+  });
+  // parseEvent
+  describe('parse-event-transform', function() {
+    let source = `<view><origin-tag c-bind:tap="handleClick"></origin-tag><thirdComp1 c-bind:tap="handleClick(1,item,'str')"></thirdComp1><thirdComp2 c-bind:tap="handleClick(1,item,'str')"></thirdComp2></view>`;
+    it('test-event-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+    });
+    it('test-event-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+    });
+    it('test-event-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+    it('test-event-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view"><tag onTap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 onTap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 onTap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+    it('test-event-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+  });
+  // class
+  describe('parse-class-transform', function() {
+    let source = `<view><button class="cls1 {{true ? 'cls2':'cls3'}}"></button><thirdComp1 class="cls4"></thirdComp1></view>`;
+    it('parse-class-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:class="(\'cls1 \'+(true ? \'cls2\':\'cls3\')+\'  cml-base cml-button\')"></cml-buildin-button><thirdComp1 class="cls4  cml-base cml-thirdComp1"></thirdComp1></div>`);
+    });
+    it('parse-class-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:class="_weexClassProxy(\'cls1 \'+(true ? \'cls2\':\'cls3\')+\'  cml-base cml-button\')"></cml-buildin-button><thirdComp1 v-bind:class="_weexClassProxy(\'cls4  cml-base cml-thirdComp1\')"></thirdComp1></div>`);
+    });
+    // wx baidu alipay
+    it('parse-class-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="cls1 {{true ? \'cls2\':\'cls3\'}}  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-base cml-thirdComp1"></thirdComp1></view>`);
+    });
+  });
+  // style 以及 miniappp端cpx动态测试
+  describe('parse-style-transform', function() {
+    let source = `<view><button style="width:{{cpx}}cpx;height:100cpx;border-width:200cpx;{{'width:'+cpx+'cpx'}}"></button><thirdComp1 style="{{'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red'}}"></thirdComp1></view>`;
+    it('parse-style-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:style="_cmlStyleProxy((\'width:\'+(cpx)+\'cpx;height:100cpx;border-width:200cpx;\'+(\'width:\'+cpx+\'cpx\')),{\'rem\':true,\'scale\':0.5,\'remOptions\':{\'rootValue\':75,\'minPixelValue\':1.01},\'autoprefixOptions\':{\'browsers\':[\'> 0.1%\',\'ios >= 8\',\'not ie < 12\']}})" class=" cml-base cml-button"></cml-buildin-button><thirdComp1 v-bind:style="_cmlStyleProxy(((\'width:\'+cpx+\'cpx;\'+\'height:\'+cpx2+\'cpx;background-color:red\')),{\'rem\':true,\'scale\':0.5,\'remOptions\':{\'rootValue\':75,\'minPixelValue\':1.01},\'autoprefixOptions\':{\'browsers\':[\'> 0.1%\',\'ios >= 8\',\'not ie < 12\']}})" class=" cml-base cml-thirdComp1"></thirdComp1></div>`);
+    });
+    it('parse-style-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:style="_cmlStyleProxy((\'width:\'+(cpx)+\'cpx;height:100cpx;border-width:200cpx;\'+(\'width:\'+cpx+\'cpx\')))" class=" cml-base cml-button"></cml-buildin-button><thirdComp1 v-bind:style="_cmlStyleProxy(((\'width:\'+cpx+\'cpx;\'+\'height:\'+cpx2+\'cpx;background-color:red\')))" class=" cml-base cml-thirdComp1"></thirdComp1></div>`);
+    });
+    // wx baidu alipay
+    it('parse-style-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button style="width:{{cpx}}rpx;height:100rpx;border-width:200rpx;{{\'width:\' + cpx + \'rpx\'}}" class=" cml-base cml-button"></cml-buildin-button><thirdComp1 style="{{\'width:\' + cpx + \'rpx;\' + \'height:\' + cpx2 + \'rpx;background-color:red\'}}" class=" cml-base cml-thirdComp1"></thirdComp1></view>`);
+    });
+  });
+  // ref  动态
+  describe('parse-ref-transform', function() {
+    let source = `<view ref='{{ refVlaue }}'></view>`;
+    it('test-ref-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div v-bind:ref="( refVlaue )" class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div v-bind:ref="( refVlaue )" class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view  _cml_ref_lmc_" id="{{ refVlaue }}"></view>`);
+    });
+  });
+  // ref  静态
+  describe('parse-ref-transform', function() {
+    let source = `<view ref=' refVlaue '></view>`;
+    it('test-ref-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view  _cml_ref_lmc_" id=" refVlaue "></view>`);
+    });
+  });
+  // component is
+  describe('parse-component-is-transform', function() {
+    let source = `<component is="{{currentComp}}" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title"></component>`;
+    it('test-component-is-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<component v-bind:is="(currentComp)" shrinkComponents="comp1,comp2" v-bind:image-src="(chameleonSrc)" title="this is title" class=" cml-base cml-component"></component>`);
+    });
+    it('test-component-is-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<component v-bind:is="(currentComp)" shrinkComponents="comp1,comp2" v-bind:image-src="(chameleonSrc)" title="this is title" class=" cml-base cml-component"></component>`);
+    });
+    it('test-component-is-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<comp2 wx:if="{{currentComp === \'comp2\'}}" is="{{currentComp}}" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title" class=" cml-base cml-component  cml-base cml-comp1  cml-base cml-comp2"></comp2>;\n<comp1 wx:if="{{currentComp === \'comp1\'}}" is="{{currentComp}}" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title" class=" cml-base cml-component  cml-base cml-comp1  cml-base cml-comp2"></comp1>`);
+    });
+  });
+
+  // animation
+  describe('parse-c-animation-transform', function() {
+    let source = `<view c-animation='{{ animationData }}'></view>`;
+    it('test-c-animation-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div v-animation=" animationData " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'animationData\',$event)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-c-animation-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div v-animation=" animationData " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'animationData\',$event)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-c-animation-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view animation="{{ animationData }}" bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+    it('test-c-animation-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view animation="{{ animationData }}" bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+    it('test-c-animation-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view animation="{{ animationData }}" onTransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+  });
+  // attribute
+  describe('parse-attribute-transform', function() {
+    let source = `<view prop1="static" prop2="{{dynamic}}"></view>`;
+    it('test-attribute-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div prop1="static" v-bind:prop2="(dynamic)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-attribute-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div prop1="static" v-bind:prop2="(dynamic)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-attribute-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view prop1="static" prop2="{{dynamic}}" class=" cml-base cml-view"></view>`);
+    });
+  })
+  // 各种 <  > 的转化
+  describe('parse-gtlt-transform', function() {
+    let source = `<view><view prop="{{dynamic}}" id="{{5 < 6 ? '5':'6'}}">{{ 5 > 6 ? 'this is 5':'this is 6'}}</view><view name="{{5 < 6?'7':'8'}}"></view></view>`;
+    it('test-gtlt-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><div v-bind:prop="(dynamic)" v-bind:id="(5 < 6 ? \'5\':\'6\')" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</div><div v-bind:name="(5 < 6?\'7\':\'8\')" class=" cml-base cml-view"></div></div>`);
+    });
+    it('test-gtlt-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><div v-bind:prop="(dynamic)" v-bind:id="(5 < 6 ? \'5\':\'6\')" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</div><div v-bind:name="(5 < 6?\'7\':\'8\')" class=" cml-base cml-view"></div></div>`);
+    });
+    it('test-gtlt-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><view prop="{{dynamic}}" id="{{5 < 6 ? \'5\':\'6\'}}" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</view><view name="{{5 < 6?\'7\':\'8\'}}" class=" cml-base cml-view"></view></view>`);
+    });
+  })
+
+})
diff --git a/packages/chameleon-template-parse/test/parser/index.cml.test.js b/packages/chameleon-template-parse/test/parser/index.cml.test.js
index 56092b9732b94fc6339a7ce7cd8f8f36aa184ed6..33e66e8005bef1cbc906201860be1f876ed50a15 100644
--- a/packages/chameleon-template-parse/test/parser/index.cml.test.js
+++ b/packages/chameleon-template-parse/test/parser/index.cml.test.js
@@ -1,5 +1,5 @@
 
-// cml语法的单元测试
+// cml单个语法的单元测试
 
 
 const babylon = require('babylon');
@@ -37,6 +37,35 @@ describe('parse-template-cml', function() {
       expect(result).to.equal(`<div></div>`)
     });
   });
+  describe('afterParseTag', function() { // 各个端的标签转化单元测试不做全覆盖，逻辑相对简单
+    let source = `<block></block>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.afterParseTag;
+    it('test-after-tag-transform-web-weex', function() {
+      expect(compileTemplate(source, 'web', options, callback)).to.equal(`<template></template>`)
+    });
+    it('test-after-tag-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options, callback)).to.equal(`<block></block>`)
+    });
+  });
+  describe('parseBuildTag', function() { // 各个端的标签转化单元测试不做全覆盖，逻辑相对简单
+    let source = `<button></button>`;
+    let options = {lang: 'cml', buildInComponents: {button: "cml-buildin-button"} };
+    let callback = parseTemplate.parseBuildTag;
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-build-tag-transform', function() {
+      expect(result).to.equal(`<cml-buildin-button></cml-buildin-button>`)
+    });
+  });
+  describe('parseTagForSlider', function() {
+    let source = `<carousel><carousel-item></carousel-item></carousel>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseTagForSlider;
+    let result = compileTemplate(source, 'wx', options, callback);
+    it('parseTagForSlider for wx', function() {
+      expect(result).to.equal(`<swiper><swiper-item></swiper-item></swiper>`)
+    });
+  });
   // parseRefStatement:仅在所有的小程序端进行处理
   describe('parseRefStatement-wx-alipay-baidu', function() {
     let source = `<view ref="flag"></view>`;
@@ -49,68 +78,120 @@ describe('parse-template-cml', function() {
   });
   // parseConditionalStatement
   describe('parseConditionalStatement-web-weex', function() {
-    let source = `<view><view c-if="true"></view><view c-else-if="true"></view><view c-else="true"></view></view>`;
+    let source = `<view><view c-if="{{value1}}"></view><view c-else-if="{{value2}}"></view><view c-else></view></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseConditionalStatement;
     let result = compileTemplate(source, 'web', options, callback);
     it('test-condition-web-transform', function() {
-      expect(result).to.equal(`<view><view v-if="true"></view><view v-else-if="true"></view><view v-else="true"></view></view>`)
+      expect(result).to.equal(`<view><view v-if="value1"></view><view v-else-if="value2"></view><view v-else></view></view>`)
     });
   });
   describe('parseConditionalStatement-wx', function() {
-    let source = `<view><view c-if="true"></view><view c-else-if="true"></view><view c-else="true"></view></view>`;
+    let source = `<view><view c-if="{{value1}}"></view><view c-else-if="{{value2}}"></view><view c-else></view></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseConditionalStatement;
     let result = compileTemplate(source, 'wx', options, callback);
     it('test-condition-wx-transform', function() {
-      expect(result).to.equal(`<view><view wx:if="true"></view><view wx:elif="true"></view><view wx:else="true"></view></view>`)
+      expect(result).to.equal(`<view><view wx:if="{{value1}}"></view><view wx:elif="{{value2}}"></view><view wx:else></view></view>`)
     });
   });
   describe('parseConditionalStatement-alipay', function() {
-    let source = `<view><view c-if="true"></view><view c-else-if="true"></view><view c-else="true"></view></view>`;
+    let source = `<view><view c-if="{{value1}}"></view><view c-else-if="{{value2}}"></view><view c-else></view></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseConditionalStatement;
     let result = compileTemplate(source, 'alipay', options, callback);
     it('test-condition-alipay-transform', function() {
-      expect(result).to.equal(`<view><view a:if="true"></view><view a:elif="true"></view><view a:else="true"></view></view>`)
+      expect(result).to.equal(`<view><view a:if="{{value1}}"></view><view a:elif="{{value2}}"></view><view a:else></view></view>`)
     });
   });
   describe('parseConditionalStatement-baidu', function() {
-    let source = `<view><view c-if="true"></view><view c-else-if="true"></view><view c-else="true"></view></view>`;
+    let source = `<view><view c-if="{{value1}}"></view><view c-else-if="{{value2}}"></view><view c-else></view></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseConditionalStatement;
     let result = compileTemplate(source, 'baidu', options, callback);
     it('test-condition-baidu-transform', function() {
-      expect(result).to.equal(`<view><view s-if="true"></view><view s-elif="true"></view><view s-else="true"></view></view>`)
+      expect(result).to.equal(`<view><view s-if="value1"></view><view s-elif="value2"></view><view s-else></view></view>`)
     });
   });
   // parseEventListener
   describe('parseEventListener-web-weex', function() {
     let source = `<view><view c-bind:tap="tapHandle"></view></view>`;
-    let options = {lang: 'cml'};
+    let originSource = `<view><origin-tag c-bind:click="handleClick"></origin-tag><thirdComp1 c-bind:click="handleClick"></thirdComp1><thirdComp2 c-bind:click="handleClick"></thirdComp2></view>  `
+    let options = {lang: 'cml',
+      buildInComponents: {button: "cml-buildin-button"},
+      usingComponents: [{
+        tagName: 'thirdComp1',
+        refUrl: '/path/to/ref1',
+        filePath: 'path/to/real1',
+        isNative: true
+      }, {
+        tagName: 'thirdComp2',
+        refUrl: '/path/to/ref2',
+        filePath: 'path/to/real2',
+        isNative: false
+      }]
+    };
     let callback = parseTemplate.parseEventListener;
     let result = compileTemplate(source, 'web', options, callback);
     it('test-event-transform', function() {
       expect(result).to.equal(`<view><view v-on:click="_cmlEventProxy($event,'tapHandle')"></view></view>`)
     });
+    // 原生组件事件不进行代理
+    it('test-origin-tag-event-transform', function() {
+      expect(compileTemplate(originSource, 'web', options, callback)).to.equal(`<view><origin-tag v-on:click="handleClick"></origin-tag><thirdComp1 v-on:click="handleClick"></thirdComp1><thirdComp2 v-on:click="_cmlEventProxy($event,'handleClick')"></thirdComp2></view>`)
+    });
   });
   describe('parseEventListener-wx-baidu', function() {
     let source = `<view><view c-bind:tap="tapHandle"></view></view>`;
-    let options = {lang: 'cml'};
+    let originSource = `<view><origin-tag c-bind:click="handleClick"></origin-tag><thirdComp1 c-bind:click="handleClick"></thirdComp1><thirdComp2 c-bind:click="handleClick"></thirdComp2></view>  `
+    let options = {lang: 'cml',
+      buildInComponents: {button: "cml-buildin-button"},
+      usingComponents: [{
+        tagName: 'thirdComp1',
+        refUrl: '/path/to/ref1',
+        filePath: 'path/to/real1',
+        isNative: true
+      }, {
+        tagName: 'thirdComp2',
+        refUrl: '/path/to/ref2',
+        filePath: 'path/to/real2',
+        isNative: false
+      }]
+    };
     let callback = parseTemplate.parseEventListener;
     let result = compileTemplate(source, 'wx', options, callback);
     it('test-event-transform', function() {
       expect(result).to.equal(`<view><view bindtap="_cmlEventProxy" data-eventtap="tapHandle"></view></view>`)
     });
+    it('test-origin-tag-event-transform', function() {
+      expect(compileTemplate(originSource, 'wx', options, callback)).to.equal(`<view><origin-tag bindtap="handleClick"></origin-tag><thirdComp1 bindtap="handleClick"></thirdComp1><thirdComp2 bindtap="_cmlEventProxy" data-eventtap="handleClick"></thirdComp2></view>`)
+    });
   });
   describe('parseEventListener-alipay', function() {
     let source = `<view><view c-bind:tap="tapHandle"></view></view>`;
-    let options = {lang: 'cml'};
+    let originSource = `<view><origin-tag c-bind:click="handleClick"></origin-tag><thirdComp1 c-bind:click="handleClick"></thirdComp1><thirdComp2 c-bind:click="handleClick"></thirdComp2></view>  `
+    let options = {lang: 'cml',
+      buildInComponents: {button: "cml-buildin-button"},
+      usingComponents: [{
+        tagName: 'thirdComp1',
+        refUrl: '/path/to/ref1',
+        filePath: 'path/to/real1',
+        isNative: true
+      }, {
+        tagName: 'thirdComp2',
+        refUrl: '/path/to/ref2',
+        filePath: 'path/to/real2',
+        isNative: false
+      }]
+    };
     let callback = parseTemplate.parseEventListener;
     let result = compileTemplate(source, 'alipay', options, callback);
     it('test-event-transform', function() {
       expect(result).to.equal(`<view><view onTap="_cmlEventProxy" data-eventtap="tapHandle"></view></view>`)
     });
+    it('test-origin-tag-event-transform', function() {
+      expect(compileTemplate(originSource, 'alipay', options, callback)).to.equal(`<view><origin-tag onClick="handleClick"></origin-tag><thirdComp1 onClick="handleClick"></thirdComp1><thirdComp2 onClick="_cmlEventProxy" data-eventclick="handleClick"></thirdComp2></view>`)
+    });
   });
   // parseIterationStatement
   describe('parseIterationStatement-web-weex', function() {
@@ -122,14 +203,21 @@ describe('parse-template-cml', function() {
       expect(result).to.equal(`<view><view v-for="(item, index) in array"></view></view>`)
     });
   });
-  describe('parseIterationStatement-wx-alipay', function() {
+  describe('parseIterationStatement-wx', function() {
     let source = `<view><view c-for="{{array}}"></view></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseIterationStatement;
     let result1 = compileTemplate(source, 'wx', options, callback);
-    let result2 = compileTemplate(source, 'alipay', options, callback);
     it('test-Iteration-transform', function() {
       expect(result1).to.equal(`<view><view wx:for="{{array}}"></view></view>`)
+    });
+  });
+  describe('parseIterationStatement-alipay', function() {
+    let source = `<view><view c-for="{{array}}"></view></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseIterationStatement;
+    let result2 = compileTemplate(source, 'alipay', options, callback);
+    it('test-Iteration-transform', function() {
       expect(result2).to.equal(`<view><view a:for="{{array}}"></view></view>`)
     });
   });
@@ -142,6 +230,43 @@ describe('parse-template-cml', function() {
       expect(result).to.equal(`<view><view s-for="array"></view></view>`)
     });
   });
+  // parseIterationStatement c-for-inde c-for-item c-key的测试
+  describe('parseIterationStatement-web-weex', function() {
+    let source = `<view><view c-for="{{array}}" c-for-index="idx" c-for-item="item" c-key="id"></view></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseIterationStatement;
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view><view v-for="(item, idx) in array" :key="item.id"></view></view>`)
+    });
+  });
+  describe('parseIterationStatement-wx', function() {
+    let source = `<view><view c-for="{{array}}" c-for-index="idx" c-for-item="item" c-key="id"></view></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseIterationStatement;
+    let result1 = compileTemplate(source, 'wx', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result1).to.equal(`<view><view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item" wx:key="id"></view></view>`)
+    });
+  });
+  describe('parseIterationStatement-alipay', function() {
+    let source = `<view><view c-for="{{array}}" c-for-index="idx" c-for-item="item" c-key="id"></view></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseIterationStatement;
+    let result2 = compileTemplate(source, 'alipay', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result2).to.equal(`<view><view a:for="{{array}}" a:for-index="idx" a:for-item="item" a:key="id"></view></view>`)
+    });
+  });
+  describe('parseIterationStatement-baidu', function() {
+    let source = `<view><view c-for="{{array}}" c-for-index="idx" c-for-item="item" c-key="id"></view></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseIterationStatement;
+    let result = compileTemplate(source, 'baidu', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view><view s-for="array" s-for-index="idx" s-for-item="item" s-key="id"></view></view>`)
+    });
+  });
   // parseAttributeStatement
   describe('parseAttributeStatement-web-weex', function() {
     let source = `<view><view prop1="static" prop2="{{dynamic}}"></view></view>`;
@@ -278,7 +403,7 @@ describe('parse-template-cml', function() {
   });
   // parseDirectiveStatement:c-model
   describe('parseDirectiveStatement-web-weex', function() {
-    let source = `<view><input c-model="{{searchText}}" /><custom-input c-model="{{search}}"></custom-input></view>`;
+    let source = `<view><input c-model="{{ searchText }}" /><custom-input c-model="{{ search }}"></custom-input></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseDirectiveStatement;
     let result = compileTemplate(source, 'web', options, callback);
@@ -328,13 +453,27 @@ describe('parse-template-cml', function() {
     let result_baidu = compileTemplate(source, 'baidu', options, callback);
     let result_alipay = compileTemplate(source, 'alipay', options, callback);
 
-    it('test-class-transform', function() {
+    it('test-c-show-transform', function() {
       expect(result_wx).to.equal(`<view style="display:{{true?'':'none'}};{{true?'':'height:0px;width:0px;overflow:hidden'}}"></view>`)
       expect(result_baidu).to.equal(`<view style="display:{{true?'':'none'}};{{true?'':'height:0px;width:0px;overflow:hidden'}}"></view>`)
       expect(result_alipay).to.equal(`<view style="display:{{true?'':'none'}};{{true?'':'height:0px;width:0px;overflow:hidden'}}"></view>`)
     });
   });
-
+  // c-text
+  describe('parseDirectiveStatement-web-miniapp', function() {
+    let source = `<view c-text="{{value1}}">everything will be replaced</view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseDirectiveStatement;
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'web', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'wx', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'weex', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+  });
   describe('parse-vue2wx-wx', function() {
     let source = `<component is="{{comp}}" shrinkComponents="comp,comp1"></component>`;
     let options = {lang: 'cml'};
diff --git a/packages/chameleon-template-parse/test/parser/index.vue.test.js b/packages/chameleon-template-parse/test/parser/index.vue.test.js
index cd7eac2f36602fe648c8b6cba47bbd3194182bf3..f9b9b07c427a792298532bcd04ed683ce778104a 100644
--- a/packages/chameleon-template-parse/test/parser/index.vue.test.js
+++ b/packages/chameleon-template-parse/test/parser/index.vue.test.js
@@ -1,5 +1,5 @@
 
-// vue语法的单元测试
+// vue单个语法的单元测试
 const babylon = require('babylon');
 const t = require('@babel/types');
 const traverse = require('@babel/traverse')["default"];
@@ -25,6 +25,44 @@ function compileTemplate(source, type, options, callback) {
 }
 // cml语法的单元测试
 describe('parse-template-vue', function() {
+  describe('parseTag', function() { // 各个端的标签转化单元测试不做全覆盖，逻辑相对简单
+    let source = `<view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseTag;
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-tag-transform', function() {
+      expect(result).to.equal(`<div></div>`)
+    });
+  });
+  describe('afterParseTag', function() { // 各个端的标签转化单元测试不做全覆盖，逻辑相对简单
+    let source = `<block></block>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.afterParseTag;
+    it('test-after-tag-transform-web-weex', function() {
+      expect(compileTemplate(source, 'web', options, callback)).to.equal(`<template></template>`)
+    });
+    it('test-after-tag-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options, callback)).to.equal(`<block></block>`)
+    });
+  });
+  describe('parseBuildTag', function() { // 各个端的标签转化单元测试不做全覆盖，逻辑相对简单
+    let source = `<button></button>`;
+    let options = {lang: 'vue', buildInComponents: {button: "cml-buildin-button"} };
+    let callback = parseTemplate.parseBuildTag;
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-build-tag-transform', function() {
+      expect(result).to.equal(`<cml-buildin-button></cml-buildin-button>`)
+    });
+  });
+  describe('parseTagForSlider', function() {
+    let source = `<carousel><carousel-item></carousel-item></carousel>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseTagForSlider;
+    let result = compileTemplate(source, 'wx', options, callback);
+    it('parseTagForSlider for wx', function() {
+      expect(result).to.equal(`<swiper><swiper-item></swiper-item></swiper>`)
+    });
+  });
   // parseRefStatement:仅在所有的小程序端进行处理
   describe('parseRefStatement-miniapp', function() {
     let source = `<view ref="flag"></view>`;
@@ -50,19 +88,52 @@ describe('parse-template-vue', function() {
     });
   });
   // parseVue2WxStatement：测试v-for语法转化为小程序
-  describe('parseVue2WxStatement-miniapp', function() {
-    let source = `<view v-for="(m,i) in array"><view v-for="item in array"></view></view>`;
+  describe('parseVue2WxStatement-web', function() {
+    let source = `<view v-for="(m,i) in array" v-bind:key="item.id"><view v-for="item in array"></view></view>`;
     let options = {lang: 'vue'};
     let callback = parseTemplate.parseVue2WxStatement;
-    let result_wx = compileTemplate(source, 'wx', options, callback);
-    let result_alipay = compileTemplate(source, 'alipay', options, callback);
-    let result_baidu = compileTemplate(source, 'baidu', options, callback);
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view v-for="(m,i) in array" v-bind:key="item.id"><view v-for="item in array"></view></view>`)
+    });
+  });
+  describe('parseVue2WxStatement-weex', function() {
+    let source = `<view v-for="(m,i) in array" v-bind:key="id"><view v-for="item in array"></view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseVue2WxStatement;
+    let result = compileTemplate(source, 'weex', options, callback);
     it('test-Iteration-transform', function() {
-      expect(result_wx).to.equal(`<view wx:for-item="m" wx:for-index="i" wx:for="{{array}}"><view wx:for-item="item" wx:for-index="index" wx:for="{{array}}"></view></view>`)
-      expect(result_alipay).to.equal(`<view a:for-item="m" a:for-index="i" a:for="{{array}}"><view a:for-item="item" a:for-index="index" a:for="{{array}}"></view></view>`)
-      expect(result_baidu).to.equal(`<view s-for-item="m" s-for-index="i" s-for="array"><view s-for-item="item" s-for-index="index" s-for="array"></view></view>`)
+      expect(result).to.equal(`<view v-for="(m,i) in array" v-bind:key="id"><view v-for="item in array"></view></view>`)
     });
   });
+  describe('parseVue2WxStatement-wx', function() {
+    let source = `<view v-for="(m,i) in array" v-bind:key="id"><view v-for="item in array"></view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseVue2WxStatement;
+    let result = compileTemplate(source, 'wx', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view wx:for-item="m" wx:for-index="i" wx:for="{{array}}" wx:key="id"><view wx:for-item="item" wx:for-index="index" wx:for="{{array}}"></view></view>`)
+    });
+  });
+  describe('parseVue2WxStatement-alipay', function() {
+    let source = `<view v-for="(m,i) in array" v-bind:key="id"><view v-for="item in array"></view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseVue2WxStatement;
+    let result = compileTemplate(source, 'alipay', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view a:for-item="m" a:for-index="i" a:for="{{array}}" a:key="id"><view a:for-item="item" a:for-index="index" a:for="{{array}}"></view></view>`)
+    });
+  });
+  describe('parseVue2WxStatement-baidu', function() {
+    let source = `<view v-for="(m,i) in array" v-bind:key="id"><view v-for="item in array"></view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseVue2WxStatement;
+    let result = compileTemplate(source, 'baidu', options, callback);
+    it('test-Iteration-transform', function() {
+      expect(result).to.equal(`<view s-for-item="m" s-for-index="i" s-for="array" s-key="id"><view s-for-item="item" s-for-index="index" s-for="array"></view></view>`)
+    });
+  });
+
   // parseVue2WxStatement:测试 v-bind转化为小程序端的响应值
   describe('parseVue2WxStatement-miniapp', function() {
     let source = `<view><view prop1="static" v-bind:prop2="dynamic"></view></view>`;
@@ -77,6 +148,15 @@ describe('parse-template-vue', function() {
       expect(result_baidu).to.equal(`<view><view prop1="static" prop2="{{dynamic}}"></view></view>`)
     });
   });
+  describe('parseAttributeStatement-web-weex', function() {
+    let source = `<view><view prop1="static" v-bind:prop2="dynamic"></view></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseAttributeStatement;
+    let result = compileTemplate(source, 'web', options, callback);
+    it('test-attribute-transform', function() {
+      expect(result).to.equal(`<view><view prop1="static" v-bind:prop2="dynamic"></view></view>`)
+    });
+  });
   // vue语法下style只支持一个style；parseStyleStatement
   describe('parseStyleStatement-web', function() {
     let source = `<view v-bind:style="dynamicColor"><view style="color:red"></view></view>`;
@@ -176,7 +256,7 @@ describe('parse-template-vue', function() {
   });
   // parseDirectiveStatement
   describe('parseDirectiveStatement-web-weex', function() {
-    let source = `<view><input v-model="searchText" /><custom-input v-model="search"></custom-input></view>`;
+    let source = `<view><input v-model=" searchText " /><custom-input v-model="search"></custom-input></view>`;
     let options = {lang: 'vue'};
     let callback = parseTemplate.parseDirectiveStatement;
     let result = compileTemplate(source, 'web', options, callback);
@@ -185,16 +265,16 @@ describe('parse-template-vue', function() {
     });
   });
   describe('parseDirectiveStatement-wx-alipay-baidu', function() {
-    let source = `<view><input v-model="searchText" /><custom-input v-model="search"></custom-input></view>`;
+    let source = `<view><input v-model=" searchText " /><custom-input v-model="search"></custom-input></view>`;
     let options = {lang: 'vue'};
     let callback = parseTemplate.parseDirectiveStatement;
     let result_wx = compileTemplate(source, 'wx', options, callback);
     let result_baidu = compileTemplate(source, 'baidu', options, callback);
     let result_alipay = compileTemplate(source, 'alipay', options, callback);
-    it('test-class-transform', function() {
-      expect(result_wx).to.equal(`<view><input data-modelkey="searchText" bindinput="_cmlModelEventProxy" value="{{searchText}}" /><custom-input data-modelkey="search" bindinput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
-      expect(result_baidu).to.equal(`<view><input data-modelkey="searchText" bindinput="_cmlModelEventProxy" value="{{searchText}}" /><custom-input data-modelkey="search" bindinput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
-      expect(result_alipay).to.equal(`<view><input data-modelkey="searchText" bindInput="_cmlModelEventProxy" value="{{searchText}}" /><custom-input data-modelkey="search" bindInput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
+    it('test-v-model', function() {
+      expect(result_wx).to.equal(`<view><input data-modelkey="searchText" bindinput="_cmlModelEventProxy" value="{{ searchText }}" /><custom-input data-modelkey="search" bindinput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
+      expect(result_baidu).to.equal(`<view><input data-modelkey="searchText" bindinput="_cmlModelEventProxy" value="{{ searchText }}" /><custom-input data-modelkey="search" bindinput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
+      expect(result_alipay).to.equal(`<view><input data-modelkey="searchText" bindInput="_cmlModelEventProxy" value="{{ searchText }}" /><custom-input data-modelkey="search" bindInput="_cmlModelEventProxy" value="{{search}}"></custom-input></view>`)
     });
   });
   // c-show
@@ -208,7 +288,21 @@ describe('parse-template-vue', function() {
       expect(result).to.equal(`<view v-show="true"></view>`)
     });
   });
-
+  // c-text
+  describe('parseDirectiveStatement-web-miniapp', function() {
+    let source = `<view v-text="value1">everything will be replaced</view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseDirectiveStatement;
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'web', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'wx', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+    it('test-c-text-transform', function() {
+      expect(compileTemplate(source, 'weex', options, callback)).to.equal(`<view>{{value1}}</view>`)
+    });
+  });
   describe('parseDirectiveStatement-weex', function() {
     let source = `<view v-show="true"></view>`;
     let options = {lang: 'vue'};
diff --git a/packages/chameleon-template-parse/test/parser/vue.test.js b/packages/chameleon-template-parse/test/parser/vue.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..262115b9b94fab00ab106109ca4b71c7834a2bf5
--- /dev/null
+++ b/packages/chameleon-template-parse/test/parser/vue.test.js
@@ -0,0 +1,201 @@
+// cml 或者vue语法整体单元测试
+const compileTemplate = require('../../src/index.js');
+const expect = require('chai').expect;
+let options = {lang: 'vue',
+  buildInComponents: {button: "cml-buildin-button"},
+  cmss: {
+    rem: true,
+    scale: 0.5,
+    remOptions: {
+      // base on 750px standard.
+      rootValue: 75,
+      // to leave 1px alone.
+      minPixelValue: 1.01
+    },
+    autoprefixOptions: {
+      browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
+    }
+  },
+  usingComponents: [{
+    tagName: 'thirdComp1',
+    refUrl: '/path/to/ref1',
+    filePath: 'path/to/real1',
+    isNative: true
+  }, {
+    tagName: 'thirdComp2',
+    refUrl: '/path/to/ref2',
+    filePath: 'path/to/real2',
+    isNative: false
+  }]
+};
+describe('parse-template-vue-all', function() {
+  // parseTag
+  describe('parse-tag-transform', function() {
+    let source = `<view><button></button><thirdComp1></thirdComp1><thirdComp2></thirdComp2></view>`;
+    it('test-tag-transform', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></view>`)
+    });
+  });
+  // directive
+  describe('parse-directive-transform', function() {
+    let source = `<view><button v-model=" value1"></button>
+    <thirdComp1 v-show="vlaue2"></thirdComp1>
+    <thirdComp2 v-text=" value3 "></thirdComp2>
+    <thirdComp2 v-animation=" value3 "></thirdComp2>
+    <thirdComp2 v-for=" (item,index) in value4 "></thirdComp2>
+    <thirdComp2 v-if=" value5 "></thirdComp2>
+    <thirdComp2 v-else-if=" value5 "></thirdComp2>
+    <thirdComp2 v-else></thirdComp2>
+    <view v-text="value6"></view>
+    </view>`;
+    it('test-directive-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-on:input="_cmlModelEventProxy($event,\'value1\')" v-bind:value="value1" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" v-show="vlaue2"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'value3\',$event)" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-for=" (item,index) in value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <div class=" cml-base cml-view">{{value6}}</div>\n    </div>`);
+    });
+    it('test-directive-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-on:input="_cmlModelEventProxy($event,\'value1\')" v-bind:value="value1" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" v-bind:style="_cmlStyleProxy(\'display:\'+(vlaue2?\'\':\'none\')+\';\'+(vlaue2?\'\':\'height:0px;width:0px;overflow:hidden\'))"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'value3\',$event)" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-for=" (item,index) in value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 v-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <div class=" cml-base cml-view">{{value6}}</div>\n    </div>`)
+    });
+    it('test-directive-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindinput="_cmlModelEventProxy" value="{{ value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2?\'\':\'none\'}};{{vlaue2?\'\':\'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:for-item="item" wx:for-index="index" wx:for="{{value4 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:if="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:elif="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 wx:else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+    it('test-directive-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindInput="_cmlModelEventProxy" value="{{ value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2?\'\':\'none\'}};{{vlaue2?\'\':\'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " onTransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:for-item="item" a:for-index="index" a:for="{{value4 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:if="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:elif="{{ value5 }}" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 a:else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+    it('test-directive-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button data-modelkey="value1" bindinput="_cmlModelEventProxy" value="{{ value1}}" class=" cml-base cml-button"></cml-buildin-button>\n    <thirdComp1 class=" cml-base cml-thirdComp1" style="display:{{vlaue2?\'\':\'none\'}};{{vlaue2?\'\':\'height:0px;width:0px;overflow:hidden\'}}"></thirdComp1>\n    <thirdComp2 class=" cml-base cml-thirdComp2">{{value3}}</thirdComp2>\n    <thirdComp2 v-animation=" value3 " bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="value3" data-args="\'value3\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-for-item="item" s-for-index="index" s-for="value4 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-if=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-elif=" value5 " class=" cml-base cml-thirdComp2"></thirdComp2>\n    <thirdComp2 s-else class=" cml-base cml-thirdComp2"></thirdComp2>\n    <view class=" cml-base cml-view">{{value6}}</view>\n    </view>`)
+    });
+  });
+  // parseEvent
+  describe('parse-event-transform', function() {
+    let source = `<view><origin-tag v-on:tap="handleClick"></origin-tag><thirdComp1 @tap="handleClick(1,item,'str')"></thirdComp1><thirdComp2 v-on:tap="handleClick(1,item,'str')"></thirdComp2></view>`;
+    it('test-event-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+    });
+    it('test-event-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
+    });
+    it('test-event-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+    it('test-event-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view"><tag onTap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 onTap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 onTap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+    it('test-event-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+    });
+  });
+  // class
+  describe('parse-class-transform', function() {
+    let source = `<view><button :class="true ? 'cls2':'cls3'" class="cls1"></button><thirdComp1 class="cls4"></thirdComp1></view>`;
+    it('parse-class-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:class="true ? \'cls2\':\'cls3\'" class="cls1   cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4   cml-base cml-thirdComp1"></thirdComp1></div>`);
+    });
+    it('parse-class-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:class="_weexClassProxy((true ? \'cls2\':\'cls3\'))" class="cls1   cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4   cml-base cml-thirdComp1"></thirdComp1></div>`);
+    });
+    // wx baidu alipay
+    it('parse-class-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="{{true ? \'cls2\':\'cls3\'}} cls1  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-base cml-thirdComp1"></thirdComp1></view>`);
+    });
+  });
+  // style 以及 miniappp端cpx动态测试
+  describe('parse-style-transform', function() {
+    let source = `<view><button :style="'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red'"></button></view>`;
+    it('parse-style-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:style="_cmlStyleProxy((\'width:\'+cpx+\'cpx;\'+\'height:\'+cpx2+\'cpx;background-color:red\'),{\'rem\':true,\'scale\':0.5,\'remOptions\':{\'rootValue\':75,\'minPixelValue\':1.01},\'autoprefixOptions\':{\'browsers\':[\'> 0.1%\',\'ios >= 8\',\'not ie < 12\']}})" class=" cml-base cml-button"></cml-buildin-button></div>`);
+    });
+    it('parse-style-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button v-bind:style="_cmlStyleProxy((\'width:\'+cpx+\'cpx;\'+\'height:\'+cpx2+\'cpx;background-color:red\'))" class=" cml-base cml-button"></cml-buildin-button></div>`);
+    });
+    // wx baidu alipay
+    it('parse-style-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button style="{{\'width:\' + cpx + \'rpx;\' + \'height:\' + cpx2 + \'rpx;background-color:red\'}}" class=" cml-base cml-button"></cml-buildin-button></view>`);
+    });
+  });
+  // ref  动态
+  describe('parse-ref-transform', function() {
+    let source = `<view :ref=' refVlaue '></view>`;
+    it('test-ref-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div v-bind:ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div v-bind:ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view  _cml_ref_lmc_" id="{{ refVlaue }}"></view>`);
+    });
+  });
+  // ref  静态
+  describe('parse-ref-transform', function() {
+    let source = `<view ref=' refVlaue '></view>`;
+    it('test-ref-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div ref=" refVlaue " class=" cml-base cml-view"></div>`);
+    });
+    it('test-ref-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view  _cml_ref_lmc_" id=" refVlaue "></view>`);
+    });
+  });
+  // // component is
+  describe('parse-component-is-transform', function() {
+    let source = `<component :is="currentComp" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title"></component>`;
+    it('test-component-is-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<component v-bind:is="currentComp" shrinkComponents="comp1,comp2" v-bind:image-src="(chameleonSrc)" title="this is title" class=" cml-base cml-component"></component>`);
+    });
+    it('test-component-is-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<component v-bind:is="currentComp" shrinkComponents="comp1,comp2" v-bind:image-src="(chameleonSrc)" title="this is title" class=" cml-base cml-component"></component>`);
+    });
+    it('test-component-is-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<comp2 wx:if="{{currentComp === \'comp2\'}}" v-bind:is="currentComp" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title" class=" cml-base cml-component  cml-base cml-comp1  cml-base cml-comp2"></comp2>;\n<comp1 wx:if="{{currentComp === \'comp1\'}}" v-bind:is="currentComp" shrinkComponents="comp1,comp2" image-src="{{chameleonSrc}}" title="this is title" class=" cml-base cml-component  cml-base cml-comp1  cml-base cml-comp2"></comp1>`);
+    });
+  });
+
+  // // animation
+  describe('parse-v-animation-transform', function() {
+    let source = `<view v-animation=' animationData '></view>`;
+    it('test-c-animation-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div v-animation=" animationData " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'animationData\',$event)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-c-animation-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div v-animation=" animationData " v-on:transitionend="_cmlInlineStatementEventProxy(\'_animationCb\',\'animationData\',$event)" class=" cml-base cml-view"></div>`);
+    });
+    it('test-c-animation-transform-wx', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view v-animation=" animationData " bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+    it('test-c-animation-transform-baidu', function() {
+      expect(compileTemplate(source, 'baidu', options).source).to.equal(`<view v-animation=" animationData " bindtransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+    it('test-c-animation-transform-alipay', function() {
+      expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view v-animation=" animationData " onTransitionend="_cmlInlineStatementEventProxy" data-arg1="$event" data-arg0="animationData" data-args="\'animationData\',$event" data-eventtransitionend="_animationCb" class=" cml-base cml-view"></view>`);
+    });
+  });
+  // // attribute
+  describe('parse-attribute-transform', function() {
+    let source = `<view prop1="static" :prop2="dynamic"></view>`;
+    it('test-attribute-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div prop1="static" v-bind:prop2="dynamic" class=" cml-base cml-view"></div>`);
+    });
+    it('test-attribute-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div prop1="static" v-bind:prop2="dynamic" class=" cml-base cml-view"></div>`);
+    });
+    it('test-attribute-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view prop1="static" prop2="{{dynamic}}" class=" cml-base cml-view"></view>`);
+    });
+  })
+  // //各种 <  > 的转化
+  describe('parse-gtlt-transform', function() {
+    let source = `<view><view :prop="dynamic" :id="5 < 6 ? '5':'6'">{{ 5 > 6 ? 'this is 5':'this is 6'}}</view><view :name="5 < 6?'7':'8'"></view></view>`;
+    it('test-gtlt-transform-web', function() {
+      expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><div v-bind:prop="dynamic" v-bind:id="5 < 6 ? \'5\':\'6\'" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</div><div v-bind:name="5 < 6?\'7\':\'8\'" class=" cml-base cml-view"></div></div>`);
+    });
+    it('test-gtlt-transform-weex', function() {
+      expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><div v-bind:prop="dynamic" v-bind:id="5 < 6 ? \'5\':\'6\'" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</div><div v-bind:name="5 < 6?\'7\':\'8\'" class=" cml-base cml-view"></div></div>`);
+    });
+    it('test-gtlt-transform-miniapp', function() {
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><view prop="{{dynamic}}" id="{{5 < 6 ? \'5\':\'6\'}}" class=" cml-base cml-view">{{5 > 6 ? \'this is 5\' : \'this is 6\'}}</view><view name="{{5 < 6?\'7\':\'8\'}}" class=" cml-base cml-view"></view></view>`);
+    });
+  })
+
+})
diff --git a/packages/chameleon-tool-utils/package.json b/packages/chameleon-tool-utils/package.json
index ac5e3e5361620030237914899eed08d55aa4aa5c..2108738c022cd281f4879027f9b79f563254befd 100644
--- a/packages/chameleon-tool-utils/package.json
+++ b/packages/chameleon-tool-utils/package.json
@@ -36,4 +36,4 @@
     "break-test": "./node_modules/.bin/mocha  --inspect-brk --recursive --reporter spec"
   },
   "version": "0.0.15-alpha.0"
-}
\ No newline at end of file
+}
diff --git a/packages/chameleon-tool-utils/src/index.js b/packages/chameleon-tool-utils/src/index.js
index 5671f5fa5c0a140abef2e35ba1b47ce9fbc529df..fa257b15cb4468c723a7225e600573623a8c6db4 100644
--- a/packages/chameleon-tool-utils/src/index.js
+++ b/packages/chameleon-tool-utils/src/index.js
@@ -215,6 +215,8 @@ _.isDirectory = function (filePath) {
   }
 }
 
+
+
 /**
  * @param {String} filePath  cml文件位置 已经不再支持json文件
  * @param {String} confType 获取的类型 wx|web|weex
diff --git a/packages/chameleon-tool/commanders/utils.js b/packages/chameleon-tool/commanders/utils.js
index 798e5e77ea6b53eba8ce0bfe4e4423aa21eae58b..115e1c790a2424f07a0f804a3fef8b9338843cd0 100644
--- a/packages/chameleon-tool/commanders/utils.js
+++ b/packages/chameleon-tool/commanders/utils.js
@@ -5,7 +5,7 @@ const {startServer: startWeexLiveLoad, broadcast} = require('./weex/socket-serve
 const previewSocket = require('./web/web-socket.js');
 const cmlLinter = require('chameleon-linter');
 const watch = require('glob-watcher');
-
+const fse = require('fs-extra');
 
 /**
  * 非web端构建
@@ -15,7 +15,24 @@ const watch = require('glob-watcher');
 exports.getBuildPromise = async function (media, type) {
 
   let options = exports.getOptions(media, type);
-  let webpackConfig = await getConfig(options)
+  let webpackConfig = await getConfig(options);
+  if (~['wx', 'baidu', 'alipay'].indexOf(type)) {
+    // 异步删除output目录
+    var outputpath = webpackConfig.output.path;
+    await new Promise(function(resolve, reject) {
+      fse.remove(outputpath, function(err) {
+        if (err) {
+          reject(err);
+        }
+        resolve();
+      })
+    })["catch"](e => {
+      let message = `clear file error! please remove direction ${outputpath} by yourself!`
+      cml.log.error(message);
+      throw new Error(e)
+    })
+
+  }
   return new Promise(function(resolve, reject) {
     // watch模式
     if (media === 'dev') {
@@ -43,7 +60,7 @@ exports.getBuildPromise = async function (media, type) {
         if (err) {
           reject(err);
         }
-        resolve();  
+        resolve();
       });
     }
   })
diff --git a/packages/chameleon-tool/configs/component_export/export-loader.js b/packages/chameleon-tool/configs/component_export/export-loader.js
index dbdf3770c1ea2e92a015de3df3d9b1e3ac8b3cec..52ce1a2e0dccfe387b75e3c82b9642a2c3476125 100644
--- a/packages/chameleon-tool/configs/component_export/export-loader.js
+++ b/packages/chameleon-tool/configs/component_export/export-loader.js
@@ -89,7 +89,6 @@ function replaceCmlPath(content, filename, options) {
 }
 
 function replaceCmss(content, options) {
-  debugger
   let style = cml.utils.splitParts({
     content
   }).style;
diff --git a/packages/chameleon-tool/configs/getMiniAppCommonConfig.js b/packages/chameleon-tool/configs/getMiniAppCommonConfig.js
index 0dc1b748b78af3686ba06b18b2a4e982066add50..c23a000a991152c31d2410ee88d024f7de0b0ad3 100644
--- a/packages/chameleon-tool/configs/getMiniAppCommonConfig.js
+++ b/packages/chameleon-tool/configs/getMiniAppCommonConfig.js
@@ -1,7 +1,6 @@
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var utils = require('./utils.js');
 var path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin')
 var webpack = require('webpack')
 var merge = require('webpack-merge')
 const getCommonConfig = require('./getCommonConfig');
@@ -78,7 +77,6 @@ module.exports = function (options) {
         filename: `[name].${targetObj.css}`,
         allChunks: true
       }),
-      new CleanWebpackPlugin(['./*'], {root: outputPath, verbose: false}),
       new webpack.optimize.CommonsChunkPlugin({
         name: ['common', 'manifest'],
         filename: 'static/js/[name].js',
diff --git a/packages/chameleon-tool/configs/postcss/web/.postcssrc.js b/packages/chameleon-tool/configs/postcss/web/.postcssrc.js
index cda2bf688cd0a8b9c1499202a98cf924f4328dd6..cd15f2c195f24be1be0cd9513cd3d26a6f4f71a7 100644
--- a/packages/chameleon-tool/configs/postcss/web/.postcssrc.js
+++ b/packages/chameleon-tool/configs/postcss/web/.postcssrc.js
@@ -3,7 +3,6 @@ let defaultConfig = {
   "plugins": {
     // to edit target browsers: use "browserslist" field in package.json
     "postcss-import": {},
-    "postcss-plugin-weex":{},
     "autoprefixer": cml.config.get().cmss.autoprefixOptions
   }
 }
diff --git a/packages/chameleon-tool/configs/preview.html b/packages/chameleon-tool/configs/preview.html
index e766f4606c29c2133a5b8b44bbcbb80e4878524a..3cdfd18c387195335c214e8396200e34573b3113 100644
--- a/packages/chameleon-tool/configs/preview.html
+++ b/packages/chameleon-tool/configs/preview.html
@@ -539,7 +539,7 @@
                 </div>
                 <p class="no-dev-content">
                   未启动Weex端构建
-    
+
                 </p>
               </div>
             </div>
@@ -558,12 +558,12 @@
                 </div>
                 <p class="no-dev-content">
                   未启动web端构建
-    
+
                 </p>
               </div>
             </div>
-            
-            
+
+
         </div>
         <div class="qrcode-box qrcode-box-bottom" id="qrcodeBox">
           <div class='qrcode-item'>
@@ -623,7 +623,6 @@
             </div>
           </div>
         </div>
-        
       </div>
     </main>
   </div>
@@ -635,8 +634,8 @@
       var jsbundle = '';
       var routerConfig  = {
         mode: 'history',
-        routes:[],
-      }; 
+        routes:[]
+      };
       var activeIndex = 0;
       var routeListDom;
       var selectInput = document.getElementById('routes-select');
@@ -648,16 +647,16 @@
         jsbundle = params.jsbundle;
       }
       function activeBuildType(params){
-        let buildType = params.buildType;
-        if (buildType.includes('weex')) {
+        var buildType = params.buildType;
+        if (~buildType.indexOf('weex')) {
           Array.isArray(buildType) && buildType.push('sfc');
         };
-        if (buildType.includes('web')) {
+        if (~buildType.indexOf('web')) {
           Array.isArray(buildType) && buildType.push('h5');
         };
-        buildType.forEach((type) => {
-          var activeDom = document.getElementById(`${type}-dev`);
-          var hideDom = document.getElementById(`${type}-no-dev`);
+        buildType.forEach(function (type) {
+          var activeDom = document.getElementById(type + '-dev');
+          var hideDom = document.getElementById(type + '-no-dev');
           if(activeDom){
             activeDom.style.display = 'block';
           }
@@ -683,7 +682,7 @@
         QR.addData(url)
         QR.make()
         $QR.innerHTML = QR.createImgTag(6, 12)
-        
+
       }
 
       //创建beatles的二维码
@@ -696,7 +695,7 @@
           pageUrl += subpath
         }
         var beatlesUrl = pageUrl + '?wx_addr=' +
-          encodeURIComponent(`${url}?t=` + Date.now());
+          encodeURIComponent(url + '?t=' + Date.now());
 
         if (path) {
           beatlesUrl += '&path=' + encodeURIComponent(path);
@@ -761,12 +760,12 @@
         if (routes) {
           var fragment = document.createDocumentFragment();
           routeListDom = document.createElement('ul');
-          
+
           routeListDom.setAttribute('id','routeList')
           for (var i = 0; i < routes.length; i++) {
             var li = document.createElement('li');
             li.setAttribute('index', i);
-            li.innerHTML = `<img style="display:none;padding-right:5px;"  src="./preview-assets/cml-right.png" alt=""><span  index=${i} title=${routes[i].path} >${routes[i].url}</span>`
+            li.innerHTML = '<img style="display:none;padding-right:5px;"  src="./preview-assets/cml-right.png" alt=""><span  index=' + i + ' title=' + routes[i].path + ' >' + routes[i].url+ '</span>';
             routeListDom.appendChild(li);
           }
           fragment.appendChild(routeListDom)
@@ -793,9 +792,11 @@
           routeListDom.children[0] && routeListDom.children[0].children[1].click();
         }
       };
+
       function createWS() {
+
         // const ws = new WebSocket(`ws://${location.hostname}:${webport}`);
-        const ws = new WebSocket(`ws://${location.host}`);
+        var ws = new WebSocket('ws://' + location.host);
         ws.onopen = function () {
           console.log('@open');
         };
@@ -823,4 +824,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>