在Vue中新增jsx的使用,操作步骤:
1、安装插件
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
2、 在.babelrc中配置
plugins: ["transform-vue-jsx"]
3、在webpack.base.conf.js中extensions增加 .jsx;rules中配置
{
test: /.(js|jsx)(?.*)?$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
4、新建test.jsx文件,在vue文件中调用
Import ‘./test.jsx’
调用: <input-test :zj="btn" />
定义: btn: () => { return <button>测试按钮</button> }
5、test.jsx
render() {
return (
<div>
{ this.zj() }
</div>
);
},