vue2dojo

vue 单文件组件转dojo文件，只是简单的代码风格转换

用法

vue2dojo -i 'input path' -o 'output path'

暂时仅支持template、script、style标签。只是简单的风格转换，不涉及到任何编译

vue文件：

<template>
  <div class="vue-demo-button" title="VUE测试按钮" @click="clickHdl">
    <i class="el-icon-success"></i>
  </div>
</template>
<script>
export default {
  name: "vueButton",
  methods: {
    clickHdl() {
      // do something
    }
  }
};
</script> 
<!-- 支持scoped -->
<style scoped>
.vue-demo-button {
  width: 50px;
  height: 50px;
  background-color: var(--main-color);
}
</style> 

转换后的js文件

define([], function () {
  //----------------------------模板----------------------------//
  var templateStr = `  <div class="vue-demo-button" title="VUE测试按钮" @click="clickHdl">
    <i class="el-icon-success"></i>
  </div>`;
  //----------------------------样式----------------------------//
  (function() {
    if (!document.getElementById('vueSButton_cjbvqm1jsho')) {
      var head = document.getElementsByTagName('head').item(0);
      var styleNode = document.createElement('style');
      var rules = document.createTextNode('.vue-demo-button {   width: 50px;   height: 50px;   background-color: var(--main-color); }');
      styleNode.type = 'text/css';
      styleNode.id = 'vueSButton_cjbvqm1jsho';
      if (styleNode.styleSheet) {
        styleNode.styleSheet.cssText = rules.nodeValue;
      } else {
        styleNode.appendChild(rules);
      }
      head.appendChild(styleNode);
    }
  })();
  //----------------------------代码主题----------------------------//
  return  {
    template: templateStr,
      name: "vueButton",
      methods: {
        clickHdl() {
          // do something
        }
      }
    };
})