Open lepffm opened 1 year ago
for vue2
const compiler = require('vue-template-compiler'); const espree = require("espree"); const templateSrc = `<template> <div> <div class="greeting">hello</div> <ur-button>button</ur-button> </div> </template>` const scriptSrc = `<script> import _ from 'lodash'; export default { props: { name: { type: String, required: false, } }, data () { return { greeting: 'hello' } }, } </script>` const styleSrc = `<style scoped> .greeting { color: red; } </style> `; const src = `${templateSrc} ${scriptSrc} ${styleSrc}`; const parsed = compiler.parseComponent(src); // console.log(result.template.content); //SFCBlock // template const templateResult = compiler.compile(parsed.template.content) console.log(templateResult.ast.children[2].children[0].text); // button text // script console.log(parsed.script.content) const ast = espree.parse(parsed.script.content, {ecmaVersion: 2015, sourceType: 'module'}); console.log(ast); //style console.log(parsed.styles);
ref: https://github.com/vuejs/vue/blob/dev/test/unit/modules/compiler/codegen.spec.js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import https://github.com/vuejs/vue-loader#readme https://www.npmjs.com/package/espree
for vue2
ref: https://github.com/vuejs/vue/blob/dev/test/unit/modules/compiler/codegen.spec.js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import https://github.com/vuejs/vue-loader#readme https://www.npmjs.com/package/espree