基于gogocode, 需要如下步骤:
升级vue2 → 3
升级webpack 3 → 5
升级gulp 4 → 5
启用gogocode转换
修改不兼容部分
升级webpack
vue3使用@vue/compiler-sfc 替换原有的 vue-template-compiler, 依赖webpack@4
所以直接将webpack相关升级到最新版本, 添加webpack-cli命令行工具
webpack配置主要改动就是将loaders改为use,
另外处理些不兼容情况, 如autoprefixer-loader改为使用postcss-loader/autoprefixer插件,
升级gulp
gulp3依赖低版本node, 所以也需要升级到@4版本
使用方式也发生了改变
gulp@4使用组合式api, 默认任务改为export.defaul来定义, 通过series/串行, parallel/并行, 组合起来
另外调整一些插件升级带来的配置变化, 如autoprefixer将使用package.json中的browserslist设置, 而不用单独设置
使用gogocode转换
npm install gogocode-cli -g
gogocode -t gogocode-plugin-vue -s ./examples -o ./examples
gogocode -t gogocode-plugin-vue -s ./src -o ./src
vue3不兼容问题
1.全局api改为实例api
Vue.use(iview)
Vue.property.$IVIEW = {}
// 改为
let app = createApp({})
app.use(iview)
app.config.globalProperties.$IVIEW = {}
window.$IVIEW = {} // 用于props, 也可挂在到provide
2. props不支持获取this
prop用到this使用inject, 所以可以通过使用inject()或者挂载到全局来获取
3.component使用is属性, 导致button卡死
因为iview将注册了Button组件, component组件的is属性使用button时, 会渲染Button组件, 导致循环渲染
排查发现只有button组件循环加载, 将component改为div, 虽然eslint报错, 但是已经正常渲染.
目前button组件先不使用component:is来切换标签
4.slot使用函数方式来引用
vue3中, 移除了$scopedSlots, 统一使用$slots, 并且, 访问组件是通过$slots.default(), 这种函数方式去访问
iview中, 使用到$slots的方式, 是两种,
一种是判断$slots是否存在, 这种不需要更改
一种是获取此slot, 这种需要改为函数方式去获取
其他需要兼容的
如使用到Vue.property.$isServer来判断允许环境的, 因为目前没有在SSR中使用, 先将使用的地方都设为false
如使用到this.$createElement改为引用h函数