Nougat Predominant Middleware

    rake-parser-vue-component

    1.1.2 • Public • Published

    rake-parser-vue-component

    parser vue component for fisp

    FISP parser 阶段插件,用于在fisp rake-zbj中编译Vue组件。

    原理

    参考vue-loader源码,结合fisp的编译特性而编写,下面是parser阶段的主要过程:

    1. 解析vue文件,找到其中的style,template,script标签。

    2. 每一个style标签创建一个对应的文件,后缀为lang属性指定,默认css,你可以指定less或其它的后缀。创建的文件,一样会进行fisp的编译流程(属性lang的值决定该文件怎么编译),并加入到当前文件的依赖中,编译完成后删除该文件。

    3. template标签的内容为Vue组件的模板,template标签同样有lang属性,默认html(暂时只支持htmljade等模板语言之后加入),会进行html特性处理,模板的内容最终会输出到module.exports.template中。

    4. script标签为文件最后输出的内容,支持lang属性,支持es6语法。

    组件编写规范

    style标签可以有多个,templatescript标签只能有一个,具体请参考vue 单文件组件

    注意

    • 组件中的样式、模板、脚本都会先进行片段处理,会使用对应的parser进行编译处理。
    • 每一个style标签会对应产出一个css文件,与vue组件同目录。
    • script标签内容编译后,为组件的最终产出内容。

    安装配置

    安装:npm install rake-parser-vue-component --save-dev

    配置:

    fis.config.set('modules.parser.vue', 'vue-component');
    fis.config.set('settings.parser.vue-component', {
        // 组件的配置
    });
    fis.config.set('roadmap.ext.vue', 'js'); 

    css scoped支持

    为了保证每一个组件样式的独立性,是当前组件定义的样式只在当前的组件内生效,引入css scoped机制。

    1. 在模板的元素上(一般是根节点)加上scoped标志,默认为'vuec', 你可以通过cssScopedFlag自定义。可以加在class,或者属性,或者id。
    <template>
      <div class="test" vuec></div>
    </template>
    1. 在样式中使用scoped标志。
    .test[vuec] {
      //
    }
    1. scoped标志会解析为组件唯一id:vue-component-{index};

    2. 配置:scoped标志默认为'vuec',你可以自定义。

    fis.config.set('settings.parser.vue-component', {  
        cssScopedFlag: 'myCssScopedFlag'  
    });

    测试demo

    npm install

    cd test, 编写代码…

    npm install

    rk release

    rk server start

    Install

    npm i rake-parser-vue-component

    DownloadsWeekly Downloads

    15

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • luanwulin