vue Babel7配置支持jsx|修改el-pagination

2020-4-4 17:18:06 339 views

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

参考

  1. https://github.com/vuejs/jsx
  2. https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/pagination.html

原文

https://www.suanliutudousi.com/2020/04/04/vue-babel7/

1

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。