Vue中的渲染函數(shù)可以支持JSX語法次慢，但需要進(jìn)行如下配置
更多精彩
- 更多技術(shù)博客，請移步 asing1elife's blog
官網(wǎng)
為項目添加依賴
- 首先需要引入 babel-plugin-transform-vue-jsx 插件
- 在::package.json::中的
devDependencies加入如下配置 - 插件官網(wǎng)中提到的
babel-preset-env可能已經(jīng)存在翔曲，所以未指出
- 在::package.json::中的
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
在.babelrc中加入如下配置
-
transform-vue-jsx是上述操作中導(dǎo)入的插件名稱
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": ["transform-runtime", "transform-vue-jsx"]
}
完成以上兩點后即可按照Vue for JSX的語法進(jìn)行編寫经备，但編譯器中可能會報錯，需要做如下更改
- 將
<script/>腳本類型改為type="text/jsx"
<script type="text/jsx">
...
</script>
