Feng - 2018年6月
type: channel
link: http://fengyitong.name/index.php/2018/06/
description: 半山腰的风采
items: vue中实现jsx语法编译

vue中实现jsx语法编译
type: item
date: 2018-06-30T16:22:46+08:00
description: vue的template模板在平时写业务代码的时候非常好用,但是很多时候封装vue组件的时候,template就没有那么灵活.这个时候我们基本上会舍弃他的template模板,直接写render函数去渲染,这个时候要是可以用jsx语法,就会大大简化我们的代码以及提高代码可读性,并且让我们的代码看起来非常优雅.简单记录一下vue通过babel编译实现在render函数中写jsx的要点:首先需要安装babel-plugin-transform-vue-jsx装好后npm会提示你babel-helper-vue-jsx-merge-props没装,所以一起装上.npm install babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev如果只装这两个还是会报错,实际上这个插件里面还用到了babel-plugin-syntax-jsx,所以也装上.npm install babel-plugin-syntax-jsx --save-dev装完后在.babelrc的plugins添加上:{ ..., "plugins": [ ..., "transform-vue-jsx" ] }最后记得在webpack的config文件加上对jsx文件的编译{ ..., module:{ ..., { test: /\.jsx$/, loader: 'babel-loader' } } }现在就可以跟导入vue文件一样导入jsx文件了.(记得所有用jsx语法的文件用.jsx后缀结尾)