由于历史原因，项目组维护的项目有 vue angularjs angular 多个包。招聘成本比较高，需要统一技术栈，全部使用vue重构。
这里记录下迁移过程，希望能帮助有需要的人。
本文记录从angularjs 迁移到vue ，后续angular 迁移到vue单独成文
路由 ui-router To vue-router
main.js这部分直接重写
多语言处理 angular-translate To vue-i18n
1. 模板中的 translate
- 使用正则替换
translate\s?=\s?["'](.*?)["']v-t="'$1'", 替换下面这三种格式成指令
image.png - 定义全局指令
v-t
Vue.directive('t', function (el,binding) {
el.innerText=binding.value
})
2. js中的 $translate.instant
在有注入$translate的地方导入 vue-i18n的实例
import $translate from './i18n/' // 假设/i18n/index.js 默认导出的是vue-i18n的实例
$translate.instant=$translate.t //instant属性跟 vue-i18n的实例t是一样的
$scope 与 $http 处理
首先将模块从这个样子
module.exports=['$scope',function($scope,$http){
}]
改成下面这个样子
export default function($scope,$http){
return $scope
}
这里我写了一个通用方法getVueOptions处理$scope
// 这些代码写在一起是为了方便查看学习,项目中肯定会抽成模块
import axios from axios;//使用axios代替$http
const instance=axios.create()
instance.default.header.common['content-type']='application/json'
// 将$scope分解成vue组件的 methods 与 data
function getVueOptions($scope) {
const options = {
data: {},
methods: {}
}
for (const key in object) {
if (Object.prototype.hasOwnProperty.call(object, key)) {
const element = object[key];
if (element instanceof Function) {
options.methods[key] = element
} else {
options.data[key] = element
}
}
}
return options
}
let scope={}
const opts=getVueOptions(fn(scope,instance))
export default {
data(){
return {
...opts.data
}
},
methods:{
...opts.methods
}
}
ng-init 处理
这个放到 mounted()里面调用this.xxx即可
模板中的替换
把angular组件模板xx.html,直接贴到vue组件的 中
搜索 ng- ng-前面有空格,如果是方法的话(ng-cick,ng-mouseover)就换成@ ,属性(ng-class,ng-style)就换成:,指令(ng-if,ng-show,ng-model)就换成v-
属性绑定方式修改
正则模式搜索 \s(.*?)\s?=\s?(["'])\{\{(.*?)\}\}\2 替换成 :$1="$3"
image.png
rootScope 处理
我这项目没怎么用,如果有用到就 export导出下,利用provide注入到根组件,用到的地方 inject一下
其他依赖注入
用类似axios的替换模式一个一个换成你vue的替代品即可,如果使用方式有差异就用正则查询全局替换就好了
剩下的就是体力活儿了
组件 指令 过滤器 一个一个的重构就好了
组件的props有些是双向绑定的,可以使用vue的 xxx.sync this.$emit('update:xxx')的写法来搞定
下一篇 ：《 typescript angular7 项目迁移到 vue2.x 》等我把改完再发心得