1.2.0 • Published 12 months ago
sfc-builder v1.2.0
sfc-builder
将页面转换成vue单文件组件
示例
有如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
#app {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>import { sfc } from 'sfc-builder';
let res = sfc(code); // 使用sfc来将上述代码转换
console.log(res);<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default({
data(){
return {
message: 'Hello Vue!'
}
}
})
</script>
<style lang='css'>
#app {
font-size: 18px;
color: #333;
}
</style>另外，sfc-builder还支持样式的tree-shaking
根据文件地址进行转换
// 根据地址进行加载，该文件中的相对定位引入的文件会被读取。如果传入了项目路径，还可以访问绝对定位的文件。也可以传入黑名单列表（正则形式），对符合正则的文件不访问
// 样式进行tree-shaking，脚本只加载new Vue部分，模板根据new Vue中el选项来处理
// 接口1，根据html，返回其中所有引入的文件和style标签、script标签的内容
// 接口2，根据id或css，返回所找到的第一个标签中的内容
let sf = sfc_file('/dist/index.html');
cosole.log(sf);