升级的版本
基本是依赖这个项目进行升级的,
https://github.com/zhuangjinming16/zjmzxfzhl-vue
最初的思路
面对这个需求,有三条路可以走
- 去开源网站github等网站上找一个别人升级好的vue-element-admin项目,然后魔改成我们
- 一步一步升级必要的依赖 然后在一点点改bug
- 使用vue-cli 重新搭建一个基于vue3的环境 然后在一点点把代码移植过去
逐渐的尝试
方案一 搜索了两个小时,没有发现太合适的项目
方案二 看似可以 于是花费了半天的时间去尝试
关于方案二的尝试
首先发现的是 GoGoCode这个项目,可以把vue2的代码自动转化成vue3兼容的代码,并且提供升级相关依赖的功能,此时眼前一亮,脑海里幻想这靠这个插件把项目直接升级成vue3(ps:此时还是too young,没有意识的问题的严重性)。然后开始准备着手去做,开干!!!
//注意这个项目大于14的版本会出现问题 主要是因为'node-sass/sass-loader'插件
node -v
v14.16.1
//克隆项目
//git clone https://github.com/zhuangjinming16/zjmzxfzhl-vue.git
//安装gogocode
sudo npm install gogocode-cli -g
启动了项目
image
然后开始使用gogocode进行转换
sudo gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
transform in progress: [===========================-------------------------------------------------------------------------------------------------------------------------------------------------------] 32/213 文件转换异常,规则:router,文件:/Users/leftscience/Project/repository/git/step1/vue2Level3/zjmzxfzhl-vue/src/components/FormGenerator/components/render/slots/el-input.js Error: parse error!Unexpected token (1:13)
at getSelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/get-selector.js:84:19)
at /usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:22:24
at Array.forEach (<anonymous>)
at Object.getAstsBySelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:21:18)
at AST.find (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:91:74)
at Object.module.exports [as rule] (/usr/local/lib/node_modules/gogocode-plugin-vue/src/vue-router.js:39:21)
at /usr/local/lib/node_modules/gogocode-plugin-vue/index.js:33:28
at Array.reduce (<anonymous>)
at transform (/usr/local/lib/node_modules/gogocode-plugin-vue/index.js:28:26)
at /usr/local/lib/node_modules/gogocode-cli/src/commands/transform.js:194:22
文件转换异常,规则:emitsOptions,文件:/Users/leftscience/Project/repository/git/step1/vue2Level3/zjmzxfzhl-vue/src/components/FormGenerator/components/render/slots/el-input.js Error: parse error!Unexpected token (1:22)
at getSelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/get-selector.js:84:19)
at /usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:22:24
at Array.forEach (<anonymous>)
at Object.getAstsBySelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:21:18)
at AST.find (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:91:74)
at Object.module.exports [as rule] (/usr/local/lib/node_modules/gogocode-plugin-vue/src/emits-option.js:31:21)
at /usr/local/lib/node_modules/gogocode-plugin-vue/index.js:33:28
at Array.reduce (<anonymous>)
at transform (/usr/local/lib/node_modules/gogocode-plugin-vue/index.js:28:26)
at /usr/local/lib/node_modules/gogocode-cli/src/commands/transform.js:194:22
文件转换异常,规则:vModel,文件:/Users/leftscience/Project/repository/git/step1/vue2Level3/zjmzxfzhl-vue/src/components/FormGenerator/components/render/slots/el-input.js Error: parse error!Unexpected token (1:21)
at getSelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/get-selector.js:84:19)
at /usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:22:24
at Array.forEach (<anonymous>)
at Object.getAstsBySelector (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/js-core/core.js:21:18)
at AST.find (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:91:74)
at Object.module.exports [as rule] (/usr/local/lib/node_modules/gogocode-plugin-vue/src/v-model-pro.js:13:21)
at /usr/local/lib/node_modules/gogocode-plugin-vue/index.js:33:28
at Array.reduce (<anonymous>)
at transform (/usr/local/lib/node_modules/gogocode-plugin-vue/index.js:28:26)
at /usr/local/lib/node_modules/gogocode-cli/src/commands/transform.js:194:22
transform in progress: [=================================================================================================================================================================================] 213/213
transform success!!
sudo gogocode -s package.json -t gogocode-plugin-vue -o package.json
进行了上面的两步操作之后,可以看的出来,除了FormGenerator 几个文件转换异常,其他的都能正确转换。依赖也帮助我升级了
image
这个时候就可以启动项目了,不错 ,如你所料,一大堆的错!!!如潮水般涌来
image
这里就不一一介绍我此时遇到的bug了,到后面都会一一遇到
这些错误主要包括 webpack@4 vue-router@4 vue-cli 工程环境等报的错,于是乎我选择放弃!!!
我想着 语法的错误 有机可续 但是webpack vue-cli等报的错 我还是算了 实力有限,于是决定尝试方案三 自己先用脚手架搭建一套可以跑起来的vue3项目,然后在把代码一点点移植过来,这样遇到问题可以逐个的解决。
下面请看下一篇文章