Skip to content

Commit cc30dea

Browse files
authored
Update README.md
1 parent 9322f4f commit cc30dea

File tree

1 file changed

+57
-0
lines changed

1 file changed

+57
-0
lines changed

README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,3 +142,60 @@ fis.match('src/**.vue', {
142142
`fis3 release`
143143

144144
`fis3 server start`
145+
146+
## Vue2 JSX支持:
147+
148+
> 使用vue 官方 babel插件[babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage).
149+
150+
vue文件:
151+
```
152+
<script lang="jsx">
153+
export default {
154+
render (h) {
155+
return (
156+
<div
157+
// normal attributes or component props.
158+
id="foo"
159+
// DOM properties are prefixed with domProps-
160+
domProps-innerHTML="bar"
161+
// event listeners are prefixed with on- or nativeOn-
162+
on-click={this.clickHandler}
163+
nativeOn-click={this.nativeClickHandler}
164+
// other special top-level properties
165+
class={{ foo: true, bar: false }}
166+
style={{ color: 'red', fontSize: '14px' }}
167+
key="key"
168+
ref="ref"
169+
slot="slot">
170+
</div>
171+
)
172+
}
173+
}
174+
</script>
175+
```
176+
177+
安装babel插件:
178+
```
179+
npm install\
180+
babel-plugin-syntax-jsx\
181+
babel-plugin-transform-vue-jsx\
182+
babel-helper-vue-jsx-merge-props\
183+
--save-dev
184+
```
185+
186+
fis相关配置
187+
```
188+
// vue组件中jsx片段处理。
189+
fis.match('src/**.vue:jsx', {
190+
parser: [
191+
fis.plugin('babel-6.x', {
192+
presets: ['es2015-loose', 'stage-3'],
193+
plugins: ["transform-vue-jsx"]
194+
}),
195+
//fis.plugin('translate-es3ify', null, 'append')
196+
]
197+
})
198+
```
199+
200+
201+

0 commit comments

Comments
 (0)