在 vue 中使用 jsx 与 class component 的各种姿势

在之前我们分享过一次一个使用 react 的思想去使用 vue 的方式。
随着组内很多时候为了让 view 层更加清晰，和一些复杂的逻辑处理，导致现在 vue 代码中 jsx 的代码越来越多，这里进行一个整理说明

如何使用

先参看腾讯 alloyTeam 这篇文章：

用 jsx 写 vue 组件

里面有提到使用 babel-plugin-transform-vue-jsx babel 6 插件来处理 jsx 的编译。

当然可能是官方也知道在一定的场景下 jsx 相对模板是有优势的，于是单独有了这个仓库对于上面的插件进行了增强。https://github.com/vuejs/jsx 在 babel 7+ 情况下可以参考使用

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
<!--.babelrc-->
{
  "presets": ["@vue/babel-preset-jsx"]
}...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
三省吾身丶丶
三省吾身丶丶
马上订阅 三省吾身丶丶 RSS 更新: https://blog.guowenfh.com/atom.xml
在 vue 中使用 jsx 与 class component 的各种姿势
2019年9月17日 21:00
在之前我们分享过一次 一个使用 react 的思想去使用 vue 的方式。
随着组内很多时候为了让 view 层更加清晰，和一些复杂的逻辑处理，导致现在 vue 代码中 jsx 的代码越来越多，这里进行一个整理说明
                   如何使用
      先参看腾讯 alloyTeam 这篇文章：
用 jsx 写 vue 组件
里面有提到使用 babel-plugin-transform-vue-jsx babel 6 插件来处理 jsx 的编译。
当然可能是官方也知道在一定的场景下 jsx 相对模板是有优势的，于是单独有了这个仓库 对于上面的插件进行了增强。https://github.com/vuejs/jsx 在 babel 7+ 情况下可以参考使用
1
2
3
4
5
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
<!--.babelrc-->
{
  "presets": ["@vue/babel-preset-jsx"]
}...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章