Vue基础技术|配置vue的jsx写法以及postcss

最新推荐文章于 2025-07-30 16:37:33 发布
原创 最新推荐文章于 2025-07-30 16:37:33 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
MJ
文章标签：

#Vue技术基础

本文介绍了如何在Vue项目中配置jsx语法，并详细讲述了postcss及其autoprefixer的使用，旨在优化css代码并处理浏览器前缀问题。通过安装依赖、配置.babelrc和webpack.config.js，以及设置postcss.config.js，确保项目能够正确处理jsx并进行css的后处理。

1. 安装依赖包

➜  vue-demo npm install postcss-loader@2.0.9 autoprefixer@7.2.3 babel-core@6.26.0 babel-loader@7.1.2
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> core-js@2.6.9 postinstall /Users/a1/Documents/workspace/vue-demo/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN vue-demo@1.0.0 No repository field.

+ postcss-loader@2.0.9
+ autoprefixer@7.2.3
+ babel-loader@7.1.2
+ babel-core@6.26.0
added 37 packages from 162 contributors, removed 6 packages, updated 1 package, moved 1 package and audited 5913 packages in 5.757s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2. 新建babel配置文件.babelrc，这里使用babel我们主要是用来使用vue的render方法以及vue也可以写jsx的代码，然后我们尝试一下如何去配置吧！

2.1 配置.babelrc文件

2.2 安装所需依赖包

➜  vue-demo npm install babel-preset-env@1.6.1 babel-plugin-transform-vue-jsx@3.5.0
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN babel-plugin-transform-vue-jsx@3.5.0 requires a peer of babel-helper-vue-jsx-merge-props@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-transform-vue-jsx@3.5.0 requires a peer of babel-plugin-syntax-jsx@^6.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-demo@1.0.0 No repository field.

+ babel-plugin-transform-vue-jsx@3.5.0
+ babel-preset-env@1.6.1
added 46 packages from 5 contributors and audited 7682 packages in 6.709s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2.3 安装依赖包所需依赖包

➜  vue-demo npm install babel-helper-vue-jsx-merge-props@^2.0.0 babel-plugin-syntax-jsx@^6.8.0
npm WARN vue-demo@1.0.0 No repository field.

+ babel-helper-vue-jsx-merge-props@2.0.3
+ babel-plugin-syntax-jsx@6.18.0
added 2 packages from 1 contributor and audited 7684 packages in 4.771s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2.4 修改webpack.config.js配置，支持处理.jsx文件

3. 新建postcss配置文件postcss.config.js，postcss是帮助我们后处理我们的css的，就是我们的样式文件已经从stylus编译为了css文件之后，我们再通过postcss去优化我们的css代码，这个优化的过程就是通过一系列的组件去优化的，这里用到的就是autoprefixer，这个组件是帮助我们去处理那些需要添加浏览器前缀的css属性的，比如说-webkit-、-moz-等这种类型的，因为这些浏览器不是正式支持的，需要添加不同的浏览器前缀去支持的，那么我们在编写代码的时候并不希望一个个去声明，所以我们借助autoprefixer组件来帮助我们去自动处理这些css属性加前缀的处理。

调整webpack.config.js配置文件，支持postcss后处理，那么postcss-loader的配置参数sourceMap: true是用来干嘛的呢？因为我们使用stylus-loader它会自动给我们生成sourceMap，而postcss它自己也可以生成sourceMap，但是当前面的处理器帮助我们生成了sourceMap之后，postcss-loader其实是可以直接使用前面的loader生成好的sourceMap，而不需要再自己重新生成一份，这样有利于提高编译效率，使得编译速度更快，否则postcss也会给出相应的警告提醒，告诉我们应该这样来处理，这些都是官方提供的既定的用法，在官网上都会有说明，在这里就不赘述了。

4. 再次执行运行服务指令，没有报错提示信息，证明我们上面的的配置是ok的了！！！

➜  vue-demo npm run dev

> vue-demo@1.0.0 dev /Users/a1/Documents/workspace/vue-demo
> cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js

Project is running at http://0.0.0.0:9999/
webpack output is served from /
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
Hash: 30deb6aa472603302a0d
Version: webpack 3.10.0
Time: 2860ms
            Asset       Size  Chunks                    Chunk Names
beijing-image.jpg     902 kB          [emitted]  [big]
        bundle.js    1.62 MB       0  [emitted]  [big]  main
       index.html  182 bytes          [emitted]
   [1] (webpack)/hot/log.js 1.04 kB {0} [built]
   [7] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [12] multi (webpack)-dev-server/client?http://0.0.0.0:9999 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]
  [13] (webpack)-dev-server/client?http://0.0.0.0:9999 7.95 kB {0} [built]
  [14] ./node_modules/url/url.js 23.3 kB {0} [built]
  [21] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [23] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [24] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [26] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [33] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
  [35] ./src/index.js 280 bytes {0} [built]
  [39] ./src/app.vue 1.85 kB {0} [built]
  [45] ./src/assets/css/index.css 1.03 kB {0} [built]
  [48] ./src/assets/css/index.styl 1.35 kB {0} [built]
  [49] ./src/assets/images/beijing.jpg 63 bytes {0} [built]
    + 35 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 541 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.

 

尼古·拉斯
关注
vue的jsx写法记录
joyer
11-13 2765
通过本文, 你可以学到一些vue中jsx的语法。 vue更加推荐使用模板开发组件，但是在一些基础组件开发中，为了获取js的完全编程能力，不可避免需要使用一些jsx语法，而官方vue jsx对vue特有的语法糖这方面的文档特别少， 本文记录一些本人在开发过程中使用jsx的经验和思考。 整体上来看，由于vue的createElement跟react的createElement有区别,导致jsx的写法也有一些区别.但整体上还是符合react的jsx,react jsx进阶的语法。 如果需要了解vue jsx特.
vue2中使用jsx基础
CuiCui_web的博客
08-02 1430
总结：如果子组件里传过来的不是个对象，那直接render里{scope} 没问题。如果写个方法，return， 直接回显就是[object,object]。下面一个示例包含一些基础的方法使用、v-if的用法、v-show、v-for的使用， 这里就偷个懒了，不挨个拆分来细讲了。在父组件中直接使用scope， 我们这时候页面上显示的是undefined， 实际上他是一个object。这时候，我们在页面上看到的就是 [object,object]如果子组件里面用的插槽中传参是一个对象，子组件child01中。
webpack配置-相关属性说明
SunnyRun
07-10 1894
前言：webpack是我们现代前端最常见的模块打包工具，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。特性：打包 CommonJs 和 AMD 模块（以及绑定），可创建单个或多个按需加载的块，以减少初始加载时间，在编译期间会解决依赖关系，减少了运行时的大小，加载器可以在编译时预处理文件，如 coffee-script 到 javascript。 小编也是从闲余时间零开始搭建webpack，作为演示讲解一些常用的功能块和属性方法 1. 代码示例 webpack.b.
element-ui 使用时遇到的一些坑
weixin_42177497的博客
11-05 2612
element-ui,是一款基于vue2.0的快速构建框架的前端组件。使用起来方便快捷，非常适合快速开发。但是，使用别人的通用组件有一个通病，那便是，做自己的项目常常会有自己的需求，是和组件组件本身相冲的。这时候的你就会陷入是无尽的烦恼中，如何既可以使用这个组件又可以达到自己想要的效果。这里我开设一个帖子，来记录我在项目开发中使用element-ui所遇到的坑，及解决方法。 1.tree组件中识...
vue 使用postcss-pxtorem 实现适老化
最新发布
weixin_47180815的博客
07-30 881
[在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b5b83d3733e645158922ee058c9db66b.png size=300x)![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ba6e9d04b2cd42e88365b1adeafdb09e.png size=300x)
修改依赖包下的子依赖版本，前端项目安全扫描出来的漏洞——解决过程
为写出赏心悦目、容易维护的代码而探索
06-12 7740
然后我去网上找webpack3升级5的文章，跟着文章一步一步操作看行不行,坑太多了，这项目是很多年前的项目，很多配置都没注释，跟着网上的文章项目运行不起来，不知道哪里出了问题，这样下去时间成本太高，我决定要使用之前被我否定的强行修改子依赖的方案，兜兜转转还是得这招，虽然最后会留下7-8个必须要升级大依赖版本才能解决的漏洞，但这已经达到我们项目组的预期了。每次我们都是直接忽略，实际这些组件漏洞大部分都是——可能会导致项目被攻击后运行缓慢这种无关紧要的‘假漏洞’，存在矫枉过正的意思。
Vue 中如何配置项目支持 JSX 语法
qq_36437172的博客
11-15 4446
Vue 是使用的的模板语法，Vue的模板实际上就是编译成了 render 函数，同样支持 JSX 语法。在 Vue 官网中，提供 createElement 方法来
vue2中可以让vue使用JSX语法的插件npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
m0_60622481的博客
04-15 6332
有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数有时候写起来是非常痛苦的，这个时候就派 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 然后进行配置.babelrc ： module.exports = { presets: [ '@vue/cli-pl.
详解如何使用webpack在vue项目中写jsx语法
11-27
在Vue项目中使用jsx语法，主要是借助Webpack的配置和Babel插件的转换能力。Vue 2.0虽然原生不支持JSX，但由于其强大的虚拟DOM机制，开发者可以选择使用jsx来编写组件的渲染逻辑。jsx是一种在JavaScript中插入XML语法...
Vue记录Ant design 中 jsx 写法
weixin_45796807的博客
12-25 1721
初识项目Ant Design 中 jsx 写法 初识项目Ant Design 中 jsx 写法 在Design 中 表格 columns中 写 jsx 写法 customRender:(text, row, index ) =>{ 这里是的三个参数分别是 1、文本页面渲染内容， 2、row 是 当前行表格的所有参数 3、index 是索引 我们现在在里面写我们所需要的jsx 写法 ，jsx 的写法 源于react 是Vue 中 render 渲染封装的上一层， 具体实现： <d
在vue3中如何使用jsx语法
weixin_43303348的博客
08-30 1145
注意：vite版本升级后，PluginOption 接口定义发生了变化，旧版本的插件@vitejs/plugin-vue-jsx与vite 新版本不兼容。浏览vue官网文档时，发现vue3 支持jsx语法，这让我这个react小白顿时提起了兴趣，在阅读文档何查找相关资料的前提下，实现了一个搜索框内容。首先去tsconfig.ts 中开启 jsxImportSource和 jsx。第二步下载@vitejs/plugin-vue-jsx 插件。接下来就可以在vue中使用jsx。最后贴上我写的tsx代码。
vue jsx 使用指南及vue.js 使用jsx语法的方法
11-27
vue  jsx  语法与 react  jsx  还是有些不一样，在这里记录下。 let component = null// if 语句 if (true) { component = ( <div></div> ); } else { component = ( <div></div> ); } var ul = ( <ul> {component} </ul> ); // map 语句 var coms = limit.map(i => { return { <li> {ul} </li> }; }) // 属性 <li onClick={(
vue的jsx写法
luxiaopengyou的博客
09-23 757
<script> import { // isNumber, isEmpty, toCamelCase, } from '@/utils/commonFun.js'; export default { name: 'BaseForm', props: { disabled: { type: Boolean, default: false }, formLabel: { type: Object, default: () => {
配置vue的jsx写法以及postcss
qq_36836277的博客
03-19 514
1.安装必要的插件 安装 postcss-loader autoprefixer babel-loader babel-core cnpm install postcss-loader autoprefixer babel-loader babel-core 2.在根目录下创造两个文件 .babelic和postcss.config.js //postcss.config.js const ...
vue-jsx写法笔记
qazxbjp2010的博客
05-22 1326
jsx语法不是很常用，部分语法和平时写template有点不太一样，用到的时候可能会忘记，官网的文档又特别简单，这里整理一下常用的一些语法含义，方便以后使用。 vue的jsx基础插件依赖（高版本cli已经自带，无需再次安装了）。 babel-plugin-syntax-jsx: 提供对 jsx 语法的基本支持，这个并非由 vue 提供和维护，react 也依赖于这个插件 babel-helper-vue-jsx-merge-props: 提供了 vue 属性合并的工具函数，用于支持 jsx 里的.
Vue如何支持JSX语法
Yfw的博客
08-27 1005
关于我在开发中遇到的这个问题，好像是JSX才支持的语法。 通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 VUE安装JSX语法支持: 1.安装 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\.
在Vue中使用JSX，很easy的
华为云官方博客
10-14 1797
摘要：JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。
jsx 调用php,vue组件jsx语法使用步奏详解
weixin_35625397的博客
04-14 298
这次给大家带来vue组件jsx语法使用步奏详解，vue组件jsx语法使用的注意事项有哪些，下面就是实战案例，一起来看一下。配置需要用到babel插件安装npm install\babel-plugin-syntax-jsx\babel-plugin-transform-vue-jsx\babel-helper-vue-jsx-merge-props\babel-preset-env\--save-...
eltable 无数据文案修改_vue Babel7配置支持jsx|修改el-pagination
weixin_29157361的博客
12-29 326
vue Babel7配置支持jsx|修改el-pagination原因因为业务上的需求和element-ui pagination组件有一点出入，需要自定义配置。通过引入element-ui pagination组件后，发现需要支持jsx语法项目配置：vue-cli3 ,babel7效果图这里修改了total的文案和pageSize的文案效果图配置文件安装jsx依赖(babel7)npm inst...
vue2使用jsx写法不如template写法
03-25
### Vue2 中 JSX 写法与 Template 写法的区别及性能对比 #### 一、语法结构差异 在 Vue2 中，`JSX` 和 `Template` 是两种不同的模板定义方式。 - **Template** 使用 HTML-like 的字符串来描述 UI 层级关系，适合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值