@vue/babel-preset-jsx 和 @vue/babel-plugin-jsx
这两个插件,乍一看很像,功能也是一致的——让vue支持jsx语法那么他们两到底有什么区别呢? 这里就给大家详细说一说一、背景:在使用脚手架构建项目的时候,拉取下来的项目模版,不能够支持jsx的语法,通过排查发现项目使用的是@vue/babel-plugin-jsx,随即修改为@vue/babel-preset-jsx后即可以正常解析二、@vue/babel-plugin-jsx该组件只适用于vue
·
这两个插件,乍一看很像,功能也是一致的——让vue支持jsx语法
那么他们两到底有什么区别呢? 这里就给大家详细说一说
一、背景:
在使用脚手架构建项目的时候,拉取下来的项目模版,不能够支持jsx的语法,通过排查发现项目使用的是@vue/babel-plugin-jsx,随即修改为@vue/babel-preset-jsx后即可以正常解析
二、@vue/babel-plugin-jsx
该组件只适用于vue3.x
使用:
npm install @vue/babel-plugin-jsx -D
在babe.config.js中加入:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
eg:
const App = {
render() {
return <div>Vue 3.0</div>;
},
};
三、@vue/babel-preset-jsx
该组件只适用于vue2.x
使用:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
在babe.config.js中加入:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
上面就是全部内容啦,有问题欢迎指正
更多推荐
已为社区贡献6条内容
所有评论(0)