在vue项目中写jsx语法，需要webpack支持

最新推荐文章于 2024-08-30 16:47:08 发布
最新推荐文章于 2024-08-30 16:47:08 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： Vue 文章标签： vue Jsx

配置JSX

babel-plugin-transform-vue-jsx

JSX是需要编译为JavaScript才可以运行的， 所以第三个样例需要有额外的编译步骤。这里我们用Babel和Webpack来进行编译。

打开你的webpack.config.js文件， 加入babel loader:

loaders: [
  { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]

新建或者修改你的.babelrc文件，加入 babel-plugin-transform-vue-jsx 这个插件

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

现在运行webpack, 代码里面的JSX就会被正确的编译为标准的JavaScript代码。（我用的是第二种方法）

Day_by_day93
关注
专栏目录
如何使用webpack在vue项目中写jsx语法
itKingOne的博客
08-11 2万+
本文主要给大家介绍的是关于利用jsx写vue组件，下面话不多说，来一起看看详细的介绍吧。 我们平常写vue的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且vue作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。 下面我们要讲的是如何在vue里面写jsx，知道react的人应该都知道jsx，jsx的一个特性
用 jsx 写 vue 组件
Jack, what else can you do besides holding your little darling?
11-02 1794
前言 我们平常写 vue 的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且 vue 作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。 下面我们要讲的是如何在 vue 里面写 jsx，知道 react 的人应该都知道 jsx，jsx 的一个特性就是非常灵活，虽然有的人觉得 jsx 很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。 在使用 jsx 之前我们需要安装一个 babel 插件（b
详解如何使用webpack在vue项目中写jsx语法
11-27
本文介绍了如何使用webpack在vue项目中写jsx语法，分享给大家，具体如下: 我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素，而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。 data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为： <div id='my-id'>Hello world</div> Vue 2.0中的rende
在vue3中如何使用jsx语法
最新发布
weixin_43303348的博客
08-30 353
注意：vite版本升级后，PluginOption 接口定义发生了变化，旧版本的插件@vitejs/plugin-vue-jsx与vite 新版本不兼容。浏览vue官网文档时，发现vue3 支持jsx语法，这让我这个react小白顿时提起了兴趣，在阅读文档何查找相关资料的前提下，实现了一个搜索框内容。首先去tsconfig.ts 中开启 jsxImportSource和 jsx。第二步下载@vitejs/plugin-vue-jsx 插件。接下来就可以在vue中使用jsx。最后贴上我写的tsx代码。
vue 项目中使用 jsx webpack 配置支持 jsx 文件
ziyi813的博客
08-06 2335
vue 项目中使用.jsx 文件，配置 webpack支持.jsx
vue 中 使用 jsx webpack怎么配置
nhhehedan的博客
08-13 2585
  npm install\  babel-plugin-syntax-jsx\  babel-plugin-transform-vue-jsx\  babel-helper-vue-jsx-merge-props\  babel-preset-es2015\  --save-dev 然后再.babelrc里面添加：   1...
在vue中使用jsx
热门推荐
weixin_47450807的博客
02-15 1万+
以前我们经常在react中使用jsx，现在我们在vue中也是用jsx,本文将总结一下，jsx在vue中是如何使用的。 一、安装babel插件 在之前我们需要安装@vue/babel-plugin-jsx,然后在babel.config.js中进行配置相关的文件内容。 module.exports = { plugins:[ "@vue/babel-plugin-jsx" ] } 现在的vue脚手架内置这些插件，所以可以直接编写jsx代码。 二、jsx实现计数器案例 此时是不是有一点react那味
Vue中使用JSX/TSX
weixin_40800275的博客
06-26 505
setup() {})Step2：vue文件中使用在script 引入上面jsx文件，然后再template中使用，如下所示// 引入jsx文件-- 使用 -->
Vue 3.0中jsx语法的使用
01-21
尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 项目创建 npm init vite-app vite-vue cd vite-vue npm install npm run dev 我们发现创建...
在Vue项目中使用Typescript的实现
10-15
这样创建的项目会在`src`目录下包含`shims.vue.d.ts`和`shims.jsx.d.ts`两个类型声明文件，以支持Vue组件和JSX语法。 `shims.vue.d.ts`用于声明所有Vue单文件组件（.vue）的类型，确保它们遵循Vue实例的接口。而`...
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程
m0_46470372的博客
05-05 3050
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程 目录 安装babel插件 安装babel用于解析jsx语法的包 配置 webpack.config.js 配置 .babelrc 文件 正文 提示: 本文使用的babel及相关插件皆为最新版本，如果需要老版本切勿参考本文 版本信息 "babel-loader": "^8.1.0...
详解Vue如何支持JSX语法
01-21
通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 1.传统的createElement方法 createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] ) 渲染成下面这样 <anchored level=1> 　　<span>Hello</span> world! &lt;/
Webpack 搭建模块化的 Vue2 + JSX + Babel
change_fate的博客
12-02 3344
Webpack 搭建模块化的 Vue2 + JSX + Babel
vue jsx webpack报错_使用webpack手动创建一个完整项目的全过程
weixin_39911056的博客
11-25 221
1.创建文件夹"webpack-study"2.使用webstrom打开文件夹所在位置。在根目录上创建一个文件，文件命名为“src”,在src文件下新建css、images、js文件夹，在src文件夹下新建index.html文件和main.js文件3.现在我们需要完成一个隔行变色的需求，来熟悉webpack的使用过程。在index.html文件下添加6个li1234564.我准备使用jquery...
Webpack4.0如何启用 jsx 语法
༺隆冬飘落の初霁༻的博客
10-16 308
如何启用 jsx 语法？ 安装 babel 插件 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D 运行cnpm i babel-preset-env babel-preset-stage-0 -D 安装能够识别转换jsx语法的包 babel-preset-react 运行cnpm i babel-p...
一起玩转Vue中的JSX：让你一次性掌握它的特性!
LuckyWinty的博客
10-17 496
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群JSX简介JSX是一种Javascript的语法扩展，即具备了Javascript的全部功能，同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法：constel=<div>Vue2</div>; 复制代码上面这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的...
在Vue2和Vue3中JSX的使用集锦
luxigaola的博客
09-16 3409
有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大，体验不佳，这个时候就派 JSX 上场了。变量绑定由data中的数据由 **@input="inputChange"或v-on:input=“inputChange”**变为。变量绑定由data中的数据由 **v-model=“value”**变为。变量绑定由data中的数据由 v-for变为插入JSX 语句段。template语法。template语法。
04｜模版语法和JSX语法：你知道Vue可以用JSX写吗？
sucaiwa的博客
03-01 913
我们可以把Vue.js的模板语法，直接理解为HTML语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照HTML的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。现在我举个例子，带你了解下模板语法的概念及其不同内容的作用。
vue jsx webpack报错_从零开始，使用webpack高效搭建react工作流
weixin_39676021的博客
11-25 90
关注后，回复“1”获取文章案例源代码。很多人想搭建一套属于自己的前端工作流；最开始的时候，我们的工作流萌芽是从写一个项目的时候，拷贝以前写过的一个项目文件夹改完直接使用开始的，后来使用了grunt和gulp，再到webpack。每一个前端人员都想掌握如何书写一个符合自己项目的工作流，以便复用，达到高效工作的目的。另外一方面，即使不是想搭建自己的工作流，而是使用现成的脚手架，大家都会用。v...
webpack3 搭建babel+jsx 在vue文件中可解析jsx
05-25
要在Vue文件中使用JSX语法，你需要使用Babel和Webpack进行设置和配置。下面是一个简单的步骤： 1. 安装必要的依赖项 ```bash npm install --save-dev babel-core babel-loader babel-preset-env babel-plugin-transform-vue-jsx vue-template-compiler ``` 2. 在webpack.config.js文件中配置Babel和Webpack ```javascript module.exports = { entry: 'main.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', options: { presets: ['env'], plugins: ['transform-vue-jsx'] } }, { test: /\.vue$/, loader: 'vue-loader' } ] } } ``` 3. 在Vue组件中使用JSX ```html <template> <div> <h1>Hello World</h1> <MyComponent></MyComponent> </div> </template> <script> import MyComponent from './MyComponent' export default { components: { MyComponent }, render() { return <div>Hello JSX</div> } } </script> ``` 这样就可以在Vue组件中使用JSX了。注意，在组件中使用JSX必须要导入`vue-template-compiler`和`transform-vue-jsx`插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值