vue Babel7配置支持jsx|修改el-pagination
原因
因为业务上的需求和element-ui pagination组件有一点出入，需要自定义配置。通过引入element-ui pagination组件后，发现需要支持jsx语法
项目配置：
vue-cli3 ,babel7
效果图
这里修改了total的文案和pageSize的文案
配置文件
安装jsx依赖(babel7)
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
babel6 配置详情见 https://github.com/vuejs/babel-plugin-transform-vue-jsx
.babelrc.js
babel7中的baebl.config.js需要改成.babelrc.js
module.exports = {
presets: [
'@vue/app'
]
}
vue.config.js
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.js$/,
// 这里需要替换成node_modules中的element依赖名称，我用cnpm安装的这里为_element-ui@2.13.0@element-ui
include: [path.resolve(__dirname, 'node_modules/_element-ui@2.13.0@element-ui')],
use: {
loader: 'babel-loader',
options: {
presets: ['@vue/babel-preset-jsx']
}
}
}
]
}
}
}
package.json（只列了一部分）
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
"element-ui": "^2.13.0",
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.0",
"@vue/cli-service": "^3.12.0",
}
最终代码
仓库里面只放了components,elPagination为element-ui pagination的源码
https://github.com/akbq2008/custom-pagination
参考
- https://github.com/vuejs/jsx
- https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/pagination.html
