一套成型的系统使用vue2+iview进行开发，运行了多年。
要更换成vue2+element ui，只是ui变换了，其他保持不变。
如何实现呢？？？
可以使用webpack的自定义loader来进行操作。
.vue文件代码
`
<template>
<div id="app">
<div >
<div >
<i-button type="primary">Primary</i-button>
</div>
<div>
<el-button type="primary">主要按钮</el-button>
</div>
</div>
<i-table :columns="columns" :data="data"></i-table>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
}
}
</script>
`
vue.config.js
`
const path = require('path');
module.exports = {
transpileDependencies: true,
chainWebpack: config => {
config.module
.rule('vue')
.use('iview-to-element-loader')
.loader(path.resolve(__dirname, 'iview-to-element-loader.js'))
.end();
}
};
`
iview-to-element-loader.js 是自定义loader ， 我放到了与vue.config.js同级目录 `
const { parseComponent } = require('vue-template-compiler');
module.exports = function (source) {
// 使用 vue-template-compiler 解析 Vue 文件
const { template } = parseComponent(source);
// 提取模板内容
const transformedTemplate = template.content
.replace(/<i-table/g, '<el-table')
.replace(/</i-table>/g, '</el-table>')
.replace(/<i-table-column/g, '<el-table-column')
.replace(/</i-table-column>/g, '</el-table-column>')
.replace(/<i-button/g, '<el-button')
.replace(/</i-button>/g, '</el-button>')
.replace(/:columns="columns"/g, ':column="columns"')
.replace(/:data="data"/g, ':data="tableData"'); // 修改为 tableData，以防止与 Element UI 内置属性冲突
console.log(transformedTemplate)
// 返回转换后的代码
return `
<template>
${transformedTemplate}
</template>
`;
};
`
