fis3-parser-vue-component

由于本插件作者开始使用webpack，本插件不再积极维护，建议使用fis的同学fork一份发布一个新插件。

如果你已经在积极维护一个新的插件并且希望使用此插件的人转过去，请提一个issue，我在这里加上一个提示。

相关

vue + vuex + vue-router + webpack 快速开始脚手架.

注意

• 5.5.0 for [email protected]。

• 版本： >=4.10.0 <5.0.0对应[email protected], 版本>= 5.1.0对应[email protected]。

• css依赖：css的依赖应该写在js中(如：require('xxx.css')), js中依赖的css优先于style标签。

• FIS3 构建过程分为单文件编译和打包过程，fis.match('component/**.vue:js')这种配置属于片段编译，对应于单文件编译阶段，配置release等属性无效。打包过程的属性和插件应该针对fis.match('component/**.vue')和fis.match('component/**.css')配置。（具体见后面使用方法）

使用方法

• 安装

npm install fis3-parser-vue-component --save-dev

• 基础配置

fis.match('src/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: [
    fis.plugin('vue-component', {
      // [email protected] runtimeOnly
      runtimeOnly: true,          // [email protected] 有runtimeOnly模式，为true时，template会在构建时转为render方法

      // styleNameJoin
      styleNameJoin: '',          // 样式文件命名连接符 `component-xx-a.css`

      extractCSS: true,           // 是否将css生成新的文件, 如果为false, 则会内联到js中

      // css scoped
      cssScopedIdPrefix: '_v-',   // hash前缀：_v-23j232jj
      cssScopedHashType: 'sum',   // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
      cssScopedHashLength: 8,     // hash 长度，cssScopedHashType为md5时有效

      cssScopedFlag: '__vuec__',  // 兼容旧的ccs scoped模式而存在，此例子会将组件中所有的`__vuec__`替换为 `scoped id`，不需要设为空
    })
  ],
});

• ES2015, coffee 等

// vue组件中ES2015处理
fis.match('src/**.vue:js', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  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', {
  parser: [
    fis.plugin('cooffe')
  ]
})

• LESS, SASS 等

fis.match('src/**.vue:less', {
  rExt: 'css',
  parser: [fis.plugin('less-2.x')],
  postprocessor: fis.plugin('autoprefixer')
});

fis.match('src/{**.vue:scss}', {
  rExt: 'css',
  parser: [
    fis.plugin('node-sass', {
      sourceMap: true
    })
  ],
  postprocessor: fis.plugin('autoprefixer'),
});

• Jade 等

fis.match('src/**.vue:jade', {
  parser: [
    fis.plugin('jade', {
      //
    })
  ]
})

• 产出，打包

fis.match('src/(**).vue', {
  release: 'static/vue/$1.js'
});

fis.match('src/(component/**.css)', {
  packTo: 'component-all.css',
  release: 'static/$1'
});

原理

参考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标签可以有多个，template和script标签只能有一个，具体请参考vue 单文件组件。

css scoped支持

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

• 在style标签中使用scoped标志。

  <style scoped></style>
  <style lang="scss" scoped></style>

• scoped标志会根据文件路径生成唯一的hash字符串（如：_v-23j232jj ）

测试demo

test 对应vue1， test2对应vue2

npm install

cd test, 编写代码…

npm install

fis3 release

fis3 server start

Vue2 JSX支持：

使用vue 官方 babel插件babel-plugin-transform-vue-jsx.

vue文件：

<script lang="jsx">
export default {
  render (h) {
    return (
      <div
        // normal attributes or component props.
        id="foo"
        // DOM properties are prefixed with domProps-
        domProps-innerHTML="bar"
        // event listeners are prefixed with on- or nativeOn-
        on-click={this.clickHandler}
        nativeOn-click={this.nativeClickHandler}
        // other special top-level properties
        class={{ foo: true, bar: false }}
        style={{ color: 'red', fontSize: '14px' }}
        key="key"
        ref="ref"
        slot="slot">
      </div>
    )
  }
}
</script>

安装babel插件：

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  --save-dev

fis相关配置

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