fis3-parser-vue-component
由于本插件作者开始使用webpack,本插件不再积极维护,建议使用fis的同学fork一份发布一个新插件。
如果你已经在积极维护一个新的插件并且希望使用此插件的人转过去,请提一个issue,我在这里加上一个提示。
相关
vue + vuex + vue-router + webpack 快速开始脚手架.
注意
-
5.5.0
forvue@2.5.x
。 -
版本:
>=4.10.0 <5.0.0
对应vue@1.x
, 版本>= 5.1.0
对应vue@2.x
。 -
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;
- ES2015, coffee 等
// vue组件中ES2015处理fis; // vue组件中coffee片段处理。fis
- LESS, SASS 等
fis; fis;
- Jade 等
fis
- 产出,打包
fis; fis;
原理
参考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支持
为了保证每一个组件样式的独立性,是当前组件定义的样式只在当前的组件内生效,引入css scoped机制。
-
在style标签中使用scoped标志。
<// -
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文件:
安装babel插件:
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ --save-dev
fis相关配置
// vue组件中jsx片段处理。fis