Skip to content

luanwulin/fis3-parser-vue-component

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fis3-parser-vue-component

FIS3 parser 阶段插件,用于在fis3中编译Vue组件。

原理

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

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

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

  3. template标签的内容为Vue组件的模板,template标签同样有lang属性,默认html,会进行html特性处理,模板的内容最终会输出到module.exports.template中。

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

组件编写规范

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

注意

  • 组件中的样式、模板、脚本都会先进行片段处理(片段不产出),对应的配置应该为fis.match('**.vue:lang', {})的方式。
  • 每一个style标签会对应产出一个css文件,与vue组件同目录。
  • script标签内容编译后,为组件的最终产出内容。

安装配置

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

配置:

// vue组件本身配置
fis.match('src/vue/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: fis.plugin('vue-component', {
    cssScopeFlag: 'vuec'
  })
});

// vue组件中产出的css处理。
fis.match('src/(vue/**.css)', {
  release: 'css/$1'
});

// vue组件中的less片段处理
fis.match('src/vue/**.vue:less', {
  rExt: 'css',
  parser: fis.plugin('less')
});

// vue组件中的sass片段处理
fis.match('src/vue/**.vue:scss', {
  rExt: 'css',
  parser: fis.plugin('node-sass')
});

// vue组件中的jade模板片段处理
fis.match('src/**.vue:jade', {
  rExt: 'css',
  parser: fis.plugin('less')
});

// vue组件中js片段处理。
fis.match('src/**.vue:js', {
  parser: [
    fis.plugin('babel-6.x', {
      presets: ['es2015-loose', 'react', 'stage-3']
    }),
    fis.plugin('translate-es3ify', null, 'append')
  ]
})

// vue组件中的产出coffee片段处理
fis.match('src/**.vue:coffee', {
  rExt: 'html',
  parser: fis.plugin('jade')
})

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.match('src/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: fis.plugin('vue-component', {
    cssScopedFlag: 'myCssScopedFlag'
  })
});

测试demo

npm install

cd test, 编写代码…

npm install

fis3 release

fis3 server start

About

fis3-parser-vue-component

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 80.9%
  • Vue 16.5%
  • HTML 2.0%
  • CSS 0.6%