VueSFC Tool

Preview

调用vue-template-compiler@2.7.14_browser库 VueSFC Tool 可以将.vue 文件转换为传统多页面模式，方便在维护老旧项目中快速开发，转换代码。

 ...
const compiler = VueTemplateCompiler;
  if (!compiler) {
    throw new Error("VueTemplateCompiler is not defined");
  }
 const parsed = compiler.parseComponent(text);
...

输入：

<template>
  <div class="file" @click="$emit('click', fileInfo)">
    <img :src="imgSrc" class="img" alt="" />
    <div class="name">{{ fileInfo.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    fileInfo: {
      type: Object,
      default: () => {
        return { name: "湖北", type: "folder" };
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    imgSrc() {
      return `./img/${this.fileInfo.type}.png`;
    },
  },

  watch: {},
  mounted() {},
  created() {},

  methods: {},
};
</script>

<style scoped>
.file {
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 6px;
  padding: 8px;
}
</style>

输出

<script>
  const MyComponent = {
    template: `
<div class="file" @click="$emit('click', fileInfo)">
  <img :src="imgSrc" class="img" alt="" />
  <div class="name">{{ fileInfo.name }}</div>
</div>
`,

    props: {
      fileInfo: {
        type: Object,
        default: () => {
          return { name: "湖北", type: "folder" };
        },
      },
    },
    data() {
      return {};
    },
    computed: {
      imgSrc() {
        return `./img/${this.fileInfo.type}.png`;
      },
    },

    watch: {},
    mounted() {},
    created() {},

    methods: {},
  };
</script>
<style>
  .file {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 6px;
    padding: 8px;
  }
</style>

特性

支持读取本地文件

离线模式

所有资源已经下载本地

部署

使用 es6 的模块化，不支持文件协议打开，需要使用 webserve 打开