版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82811815
Vue中的渲染函数可以支持JSX语法,但需要进行如下配置
更多精彩
- 更多技术博客,请移步 asing1elife’s blog
官网
为项目添加依赖
- 首先需要引入 babel-plugin-transform-vue-jsx 插件
- 在::package.json::中的
devDependencies
加入如下配置 - 插件官网中提到的
babel-preset-env
可能已经存在,所以未指出
- 在::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
是上述操作中导入的插件名称
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": ["transform-runtime", "transform-vue-jsx"]
}
完成以上两点后即可按照Vue for JSX的语法进行编写,但编译器中可能会报错,需要做如下更改
- 将
<script/>
脚本类型改为type="text/jsx"
<script type="text/jsx">
...
</script>