compiler-sfc-browser-vue2

支持 Vue2.6 和 Vue2.7 在运行时的编译, 阉割了部分功能，但能满足绝大部分需求

暂时缺少以下功能：

• style lang 不支持 scss、stylus， 仅支持less(可提issue)
• 不支持其他模板语法渲染

安装

npm i compiler-sfc-browser-vue2

CDN

https://cdn.jsdelivr.net/npm/compiler-sfc-browser-vue2@0.0.2/dist/index.esm.js // esm-browser

https://cdn.jsdelivr.net/npm/compiler-sfc-browser-vue2@0.0.2/dist/index.umd.js // umd

使用

1import { parse, compileStyle, compileScript, compileTemplate } from 'compiler-sfc-browser-vue2'
2const desc = parse({
3  source: `
4  <template>
5    <cascader
6      :options="options"
7      default-value="datunli"
8      :style="{ width: '320px' }"
9      placeholder="Please select ..."
10      :format-label="format"
11    />
12  </template>
13  <script setup lang="ts">
14  const options = [
15    {
16      value: 'beijing',
17      label: 'Beijing',
18      children: [
19        {
20          value: 'chaoyang',
21          label: 'ChaoYang',
22          children: [
23            {
24              value: 'datunli',
25              label: 'Datunli',
26            },
27          ],
28        },
29      }
30    }
31  ];
32
33  const format = (options) => {
34    const labels = options.map((option) => option.label);
35    return labels.join('-');
36  };
37  <\/script>
38  <style lang="less" scoped>
39    @color: red;
40    div {
41      a {
42        color: @color;
43      }
44    }
45  <\/style>
46  `,
47})
48const style = compileStyle({
49  source: desc.styles[0].content,
50  id: '123',
51  preprocessLang: 'less'
52})
53console.log("style", style);
54
55const script = compileScript(desc, {
56  id: '123'
57})
58console.log("script", script);
59
60const template = compileTemplate({
61  source: desc.template.content
62})
63console.log("template", template);