一、配置文件package.json

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "build": "webpack-dev-server"
  },
  "author": "camille",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-helper-define-map": "^6.26.0",
    "babel-helper-optimise-call-expression": "^6.24.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

devDependencies这一项最初没有，是在后续步骤中，安装插件时，通过命令自动添加的。

二、新建文件
1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vuejsx</title>
</head>
<body>
  <div id="J_vapp_jsx"></div>
  <script type="text/javascript" src="https://unpkg.com/vue"></script>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

2、webpack.config.js

module.exports = {
  entry: './myvu.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [ 'babel-loader']
      }
    ]
  }
}

3、.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

4、myvu.js

var vm = new Vue({
  el: '#J_vapp_jsx',
  data: {
    msg: 'Hello JSX'
  },
  methods: {
    hello () {
      alert('Hello Vue 2.0')
    }
  },
  render (h) {
    const data = {
      attrs: {
        id: 'J_div'
      },
      on: {
        click: () => {
          console.log('点击状态：点击啦！')
        }
      },
      props: {
        innerHTML: 'hihihi'
      },
      hook: {
        insert: () => {
          console.log('dom插入状态：已经插入。')
        }
      }
    }
    // return <div title="一个div" {...data}/>
    return (
      <div id="J_jsx_box">
        <button
          class={{ cls1: true, cls2: true }}
          style={{fontSize: '15px'}}
          on-click={this.hello}
          {...data}>
          {this.msg}
        </button>
      </div>
    )
  }
})

三、安装相关插件

cnpm i -D xxx
xxx包含babel-plugin-syntax-jsx，babel-plugin-transform-vue-jsx，babel-helper-vue-jsx-merge-props，babel-core，babel-loader，babel-preset-es2015。
为什么会在package.json中看到babel-helper-define-map和babel-helper-optimise-call-expression，这是我在调试的时候，自己加上去的，也要安装，然后就不报错了。github上的vue作者写的文档有些问题，直接运行会报错。

四、运行项目
npm run server

vue中的jsx的更多相关文章

  1. vue中使用jsx

    vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...

  2. 在Vue中使用JSX，很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  3. vue中使用JSX报错，如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  4. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  5. 记录在vue中使用jsx时踩过的坑

    使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transfo ...

  6. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  7. Vue中使用JSX语法

    一 项目结构 二 App组件 <template> <div id="app"> <fruit/> </div> </temp ...

  8. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  9. 谈谈 Vue 模板和 JSX

    工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...

随机推荐

  1. HTML5 缓存: cache manifest

    ---恢复内容开始--- 1:MIME TYPE:text/cache-manifest 服务器配置MIME类型2:需要由你创建的:NAME.manifest 创建manifest文件3:给 < ...

  2. 3790：最短路径问题（HDU）

    Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的.   Inp ...

  3. Op-level的快速算法

    十岁的小男孩 本文为终端移植的一个小章节. 目录 引言 FFT Conv2d (7x7, 9x9) Winograd Conv2d (3x3, 5x5) 引言 本节针对CNN进行加速计算的,主要有以下 ...

  4. laravel 分类的列表查询

    public function index(Request $request, ResponseFactoryContract $response, QuestionModel $questionMo ...

  5. 两种lca的求法：树上倍增，tarjan

    第一种:树上倍增 f[x,k]表示x的2^k辈祖先,即x向根结点走2^k步达到的结点. 初始条件:f[x][0]=fa[x] 递推式:f[x][k]=f[ f[x][k-1] ][k-1] 一次bfs ...

  6. cf219d 基础换根法

    /*树形dp换根法*/ #include<bits/stdc++.h> using namespace std; #define maxn 200005 ]; int root,n,s,t ...

  7. Python中的日志处理

    在日常项目中,总是需要记录下一些细小信息或者错误码.错误信息的,这个时候就需要进行日志的操作.python中用于日志创建.设置和记录等功能的模块,就是logging了,下面是对其基本使用方法的介绍: ...

  8. 函数wait和waitpid

    函数wait 一个进程在终止时会关闭所有文件描述符,释放在用户空间释放的内存,但它的PCB还保留着,内核在其中保存一些信息:如果是正常终止时则保存着退出状态,如果是异常终止则保存着导致该进程终止的信号 ...

  9. Facebook的React Native之所以能打败谷歌的原因有7个(ReactNative vs Flutter)

    https://baijiahao.baidu.com/s?id=1611028483072699113&wfr=spider&for=pc 如果你喜欢用(或希望能够用)模板搭建应用, ...

  10. Visual Studio 2017离线安装失败：安装程序清单签名验证失败

    解决办法: 方法1:运行gpeidit.msc,然后  Windows 设置-安全设置->本地策略-安全选项-系统机密->将FIPS兼容算法用于加密.哈希和签名-设置禁用 方法2:删除vs ...