由于本插件维护者开始使用webpack，本插件不再积极维护，建议使用fis的同学fork一份发布一个新插件。
如果你已经在积极维护一个新的插件并且希望使用此插件的人转过去，请提一个issue，我在这里加上一个提示。
vue + vuex + vue-router + webpack 快速开始脚手架.
-
5.5.0for[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阶段的主要过程：
-
解析vue文件，找到其中的
style,template,script标签。 -
每一个
style标签创建一个对应的虚拟文件，后缀为lang属性指定，默认css，你可以指定less或其它的后缀。对创建虚拟文件，一样会进行fis3的编译流程（属性lang的值决定该文件怎么编译），并加入当前文件的依赖。 -
template标签的内容为Vue组件的模板，template标签同样有lang属性，默认html，会进行html特性处理，模板的内容最终会输出到module.exports.template中。 -
script标签为文件最后输出的内容(加入模板字符串)，支持lang属性。
style标签可以有多个，template和script标签只能有一个，具体请参考vue 单文件组件。
为了保证每一个组件样式的独立性，是当前组件定义的样式只在当前的组件内生效，引入css scoped机制。
-
在style标签中使用scoped标志。
<style scoped></style> <style lang="scss" scoped></style>
-
scoped标志会根据文件路径生成唯一的hash字符串（如：
_v-23j232jj）
test 对应vue1， test2对应vue2
npm install
cd test, 编写代码…
npm install
fis3 release
fis3 server start
使用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-devfis相关配置
// 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')
]
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent