想要vuejs项目支持jsx语法,需要一些插件

babel-plugin-transform-vue-jsx

Babel plugin for Vue 2.0 JSX

使用方法:

安装

npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev

修改配置

修改 .babelrc文件

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

完成

可以在vuejs2.0版本的项目中,正常使用jsx语法了。

vuejs使用jsx语法的更多相关文章

  1. JSX语法简介

    React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...

  2. 22-React JSX语法

    React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...

  3. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  4. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  5. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  6. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

  7. react的jsx语法

    在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...

  8. react实战项目开发(2) react几个重要概念以及JSX语法

    前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...

  9. 2.ReactJS基础(虚拟DOM,JSX语法)

    将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...

随机推荐

  1. JS 中的原型 -- prototype、__proto__ 以及原型链

    原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...

  2. python抓取NBA现役球员基本信息数据并进行分析

    链接:http://china.nba.com/playerindex/ 所需获取JSON数据页面链接:http://china.nba.com/static/data/league/playerli ...

  3. centos7.4 linux 指令

    1.查看版本 lsb_release -a 2.查看mysql路径 whereis mysql 3.查看编码 locale 修改语言编码 经过在网上查找资料发现,Centos 7已经不采用/etc/s ...

  4. 【51NOD1965】奇怪的式子 min_25筛

    题目描述 给你\(n\),求 \[ \prod_{i=1}^n{\sigma_0(i)}^{i+\mu(i)} \] 对\({10}^{12}+39\)取模. \(\sigma_0(i)\)表示约数个 ...

  5. 绕过阿里云waf进行SQL注入

    做个笔记吧,某SQL注入点的绕过,有阿里云waf的. 首先遇到是个搜索框的注入点: 演示下: 针对搜索框,我们的sql语句一般是怎么写的? 本地演示:select * from product whe ...

  6. c 判断文件或文件夹是否存在,多种方法, 为什么从一开始就不直接来个统一的呢?

    具体内容,请看: https://blog.csdn.net/u012494876/article/details/51204615 判断文件或文件夹是否存在,竟然有这么多方法: GetFileAtt ...

  7. (五)qt资源文件

    // 规则: :+添加的前缀/+文件名 ui->actionSave_as->setIcon(QIcon(":/new/Image/face.png"));

  8. openssl命令行将pfx格式转.key和.crt文件,Apache适用

    以前使用的windows平台作为php运行的平台,感觉整体速度太慢,于是现在改为centos系统的linux平台.需要把windows中用pfx证书转为appache用到key和crt组成的证书 将* ...

  9. Battery Historian 使用常用命令

    一.重置电池数据收集数据 打开电池数据获取:adb shell dumpsys batterystats --enable full-wake-history 重置电池数据: adb shell du ...

  10. VMWare的host-only/bridged/NAT连接图文介绍

    1 VMware简介 VMWare虚拟机软件是一个“虚拟PC”软件,它使我们可以在一台机器上同时运行二个或更多Windows.Linux等系统. 如果我们需要使用多个系统的话,传统的方式有两种: .使 ...