[mark] vue-jsx 配置

可能有些同学会想在 vue 项目中去实现 jsx 的写法,正巧我之前在项目中引入过 jsx。于是便想要贴出来,以作为记录。

我的项目是 vue 基于 weback 编译打包的,是通过 vue-cli 这样一个脚手架去搭建的,且 vue-cli 的项目版本是 2.x.x,webpack 的版本也是 2.x.x。

文件参考:babel-plugin-transform-vue-jsx

代码如下:

// 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"
    }
  ]]]

你可能感兴趣的:([mark] vue-jsx 配置)