可能有些同学会想在 vue 项目中去实现 jsx 的写法,正巧我之前在项目中引入过 jsx。于是便想要贴出来,以作为记录。
我的项目是 vue 基于 weback 编译打包的,是通过 vue-cli 这样一个脚手架去搭建的,且 vue-cli 的项目版本是 2.x.x,webpack 的版本也是 2.x.x。
代码如下:
// package.json
// 添加安装包(--save-dev,安装到开发依赖里)
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.6.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
// ./.babelrc
// 在 plugins 中添加 "transform-vue-jsx",目的是在 babel 中转义。
"plugins": ["transform-vue-jsx", ["transform-runtime"], ["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]]
网友评论