vue1升级vue2踩坑指南

  • 升级原因
  • 版本选择
    • 老的package.json：
    • 新的package.json：
  • vue官方说明
  • 语法/组件使用变化
    • ready钩子
    • $index & $key
    • limitBy
    • v-html
    • events
    • vue-router
      • redirect
      • 注册路由&动态配置路由
      • v-link
      • 监听路由
    • vue-validator
        • 全局注册绑定vee-validate & 报错信息支持多语言
      • vue-validator和vee-validate的简单使用对比
    • vue-i18n
  • 最后

升级原因

15年的老项目，还是使用的fis3来构建项目。去年底换到mac开发后在macos12环境下无法使用热更新，每次需要保存后重新暂停服务再启动服务很费时间。。。。且fis3官方已经不再维护相关组件也已经很兼容了，，，寻找解决方案无果后长痛不如短痛，直接换webpack吧

版本选择

最终vue版本为2.1.0此版本刚好可以使用vue-loader10.0.1版本其他的似乎都会报错。vue-template-compiler和vue版本对应即可

老的package.json：

{"name": "faq","version": "1.0.0","description": "description","main": "main.js","dependencies": {"normalize.css": "^4.0.0","v-viewer": "^1.6.3","viewerjs": "^1.10.2","vue": "^1.0.16","vue-i18n": "^4.7.1","vue-image-swipe": "^1.0.5","vue-resource": "^0.7.4","vue-router": "^0.7.11","vue-toasted": "^1.1.28","vue-touch": "^1.0.2","vue-validator": "^2.0.0","vueify-insert-css": "^1.0.0"},"devDependencies": {"babel-plugin-add-module-exports": "^0.1.2","babel-plugin-transform-es3-member-expression-literals": "^6.8.0","babel-plugin-transform-es3-property-literals": "^6.8.0","babel-plugin-transform-runtime": "^6.1.2","babel-preset-es2015": "^6.5.0","buffer": "^4.5.1","fis-parser-babel": "xiangshouding/fis-parser-babel","fis-postprocessor-autoprefixer": "0.0.5","fis3-command-inspect": "^1.0.3","fis3-deploy-replace": "^1.0.2","fis3-deploy-skip-packed": "0.0.3","fis3-hook-commonjs": "^0.1.10","fis3-hook-node_modules": "^1.0.11","fis3-hook-npm": "^1.0.1","fis3-hook-relative": "^1.0.6","fis3-parser-vue": "^0.1.0","fis3-postpackager-loader": "^1.3.13","is-buffer": "^1.1.3","process": "^0.11.2","vue-hot-reload-api": "^1.3.2"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "fis3 release -wL","build-test": "rm -rf ./dist/test && fis3 release test","build": "rm -rf ./dist/prod && fis3 release prod"},"author": "author"
}

新的package.json：

{"name": "faq","version": "1.0.1","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"@babel/preset-env": "^7.18.2","babel-eslint": "^10.1.0","core-js": "^3.8.3","fastclick": "^1.0.6","jquery": "^3.6.0","normalize.css": "^4.0.0","url-loader": "^2.3.0","v-viewer": "^1.6.4","vee-validate": "^2.2.15","vue": "^2.1.0","vue-i18n": "^5.0.3","vue-loader": "^10.0.1","vue-resource": "^0.7.4","vue-router": "^3.5.0","vue-touch": "^2.0.0-beta.4"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","vue-template-compiler": "^2.1.0"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "@babel/eslint-parser"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

vue官方说明

vue升级指南
从官方的说明中可以看出变化其实还是(不多的) 很多的…

语法/组件使用变化

这里只赘述我遇到的问题了，我没遇到的我就不写了

ready钩子

ready钩子移除了 可以替换为mounted钩子 效果不变

$index & $key

<!-- vue1写法 -->
<div v-for="item in items">{{$index}}
<div>
<!-- vue2写法 -->
<div v-for="(item, index) in items">{{index}}
<div>

limitBy

<!-- vue1写法 -->
<p v-for="item in items | limitBy 10">{{ item }}</p>
<!-- vue2写法 也可以选择官方那种computed写法-->
<p v-for="item in items.slice(0, 10)">{{ item }}</p>

v-html

<!-- vue1写法 -->
<p>{{{ data }}}</p>
<!-- vue2写法 -->
<p v-html="data" />如果之前有使用过滤器的话 也要改一下写法
vue2似乎对html的模板也有要求，之前是可以在template渲染的，现在必须为真实渲染的标签div,span等
<!-- vue1写法 -->
<p>{{{ data | highlight keyword}}}</p>
<!-- vue2写法 -->
<p v-html="$options.filters.highlight(data, keyword)" />

events

events钩子移出了，我选择使用eventbus去注册监听事件 使用eventbus时要注意及时销毁，不然会重复注册

#main.js
window.eventHub = new Vue()#faq.vue
mounted(){eventHub.$on('search', function(keyword){....})
},
beforeDestroy(){eventHub.$off('search', function(){ })
}#search.vue
eventHub.$emit('search', keyword)

vue-router

vue-router我选择直接使用3版本了，和2的变化不大反正都是从0.7升。。

redirect

router.redirect废弃了，要在注册路由时直接声明

{path: '/',redirect: '/faq'
}

注册路由&动态配置路由

我们项目本来使用了很多动态修改redirect的地方，本来想着可以通过router.addRoute动态去修改但是事实并不是像文档所说 而是会报一个重复定义路由的错误

所以这里我采用了(伪)动态路由的方法去实现，思路就是需要改变redirect时重置路由再赋值即可 虽说性能不好，但是实现功能还是没问题的！

import Vue from 'vue'
import VueRouter from 'vue-router'
import hotspotView from '../view/hotspot.vue'
import faqView from '../view/faq.vue'
import chatView from '../view/chat.vue'
import chooseIssueTypeView from '../view/choose-type.vue'
import createIssueView from '../view/create-issue.vue'
import messageListView from '../view/message-list.vue'
import messageView from '../view/message.vue'
import coinHistoryView from '../view/coin-history.vue'
import esHistoryView from '../view/es-history.vue'
import questionListView from '../view/question-list.vue'
import faqQuestionListView from '../view/faq-all-question.vue'
import cateTypeView from '../view/cate-type.vue'
import cateListView from '../view/cate-list.vue'
import cateDetailView from '../view/cate-detail.vue'
import helpView from '../view/help.vue'
import elementsView from '../view/elements.vue'
import elementsDetailView from '../view/elements-detail.vue'
import texiaoView from '../view/texiao.vue'
import texiaoDetailView from '../view/texiao-detail.vue'
import daojuView from '../view/daoju.vue'
import daojuDetailView from '../view/daoju-detail.vue'
import elegroup from '../view/elegroup'
import esTransferPlatform from '../view/es-transfer-platform.vue'
import defaultRealname from '../view/default-realname.vue'const routerView = {template: '<router-view keep-alive />'
}const routerViewWithoutKeepAlive = {template: '<router-view/>'
}Vue.use(VueRouter)const baseRoutes = [{path: '/faq',component: routerView,children: [{ path: '', name: 'faq', component: faqView}, { path: 'faq-all-question', name: 'faq-all-question', component: faqQuestionListView}]},{path: '/robot',name: 'chat',component: chatView},{path: '/help',name: 'help',component: helpView}
]
window.asyncRoutes = [{path: '/hotspot',component: routerView,children: [{ path: '', name: 'hotspot', component: hotspotView},{ path: 'question-list/:index', name: 'question-list', component: questionListView}]},{path: '/',name: 'home',redirect: '/faq'},{path: '/create-issue',component: routerViewWithoutKeepAlive,children: [{ path: '', name: 'issue-type', component: chooseIssueTypeView}, { path: ':issueType',component: createIssueView}]}
]
const createRouter = () => new VueRouter({routes: baseRoutes
})export const router = createRouter()// 先执行一遍添加 后续每次重置即可
for (let i = 0; i < window.asyncRoutes.length; i++) {router.addRoute(window.asyncRoutes[i])
}// 这地方为了提高可用性参数要传数组
export function addFaqRouter(datas) {datas.forEach(data => {for (let ii = 0; ii < window.asyncRoutes.length; ii++) {var item = window.asyncRoutes[ii]if (item && item.name && item.name == data.name) {Object.keys(data).forEach(k => {window.asyncRoutes[ii][k] = data[k]})} else if (item.children) {for (let jj = 0; jj < item.children.length; jj++) {var itemjj = item.children[jj]if (itemjj && itemjj.name && itemjj.name == data.name) {Object.keys(data).forEach(k => {window.asyncRoutes[ii]['children'][jj][k] = data[k]})}}}}})const newRouter = createRouter()router.matcher = newRouter.matcherfor (let i = 0; i < window.asyncRoutes.length; i++) {router.addRoute(window.asyncRoutes[i])}
}

重置路由操作

import { addFaqRouter } from '@/router'addFaqRouter([{path: '/',name: 'home',redirect: '/create-issue/default'}, {path: '/create-issue',name: 'create-issue',redirect: '/create-issue/default'}])

v-link

<!-- vue1写法 -->
<a class="faq"  v-link="{ name: 'faq'}">{{$t('link.faq')}}</a><!-- vue2写法 -->
<router-link :to="{name:'faq'}" class="faq">{{ $t('link.faq') }}
</router-link>

监听路由

# data和deactivate移除掉了
<!-- vue1写法 -->
route: {data({ to: { query: { index } } }) {console.log(index)},deactivate() {console.log("deactivate")}
}
<!-- vue2写法 -->
mounted(){let index = this.$route.query.index;
},
beforeDestroy() {console.log("deactivate")
}

vue-validator

vue-validator神坑。。直接不支持vue2了。各个版本几乎都试过了在vue2上无论如何都跑不起来不是这错就是那错，最后选择使用vee-validate来替代了，使用后感觉相见恨晚啊。比vue-validator要好用不少！

全局注册绑定vee-validate & 报错信息支持多语言

main.js

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate, { events: 'blur|change|input' })

validate.js

const dictionary = {en: {messages: {required: () => _faq.$t('form.requiredError'),min: (_, params) => _faq.$t('form.contentRequiredError', { count: params[0] }),phone: (_, params) => _faq.$t('form.phoneError'),decimal: (_, params) => _faq.$t('form.numberError')}}
}
const veeExtends = {phone: {validate: (value) => {return /^1[3456789][0-9]\d{8}$/.test(value)},getMessage: () => _faq.$t('form.phoneError')}
}
export default { dictionary, veeExtends }

由于要多语言支持，所以需要在vm加载后调用不然会报$t的错误，我目前在app.vue执行

import Vue from 'vue'
import vee from '@/assets/js/app/validate'
import { Validator } from 'vee-validate'
created(){window._faq = thisValidator.localize(vee.dictionary)for (const extend in vee.veeExtends) {Validator.extend(extend, vee.veeExtends[extend])}
}

vue-validator和vee-validate的简单使用对比

vue-validator

<span>{{ $validation['test'] && $validation['test'].errors | firstError }}</span>
<validator name="validation"><input type="text" :placeholder="placeholder"v-model="content.test" field="test" v-validate="{ minlength: { rule: 6,message: $t('form.contentRequiredError', { count: 6 }) },required: true}">
</validator>

vee-validate

{{ errors.first('test')}}
<input v-model="content.test" v-validate="required|min:6" type="text"
:placeholder="placeholder" name="test" >

是不是vee-validate更简单一点，且不需要重复定义错误信息初始化一次即可。

vue-i18n

如果之前使用的5.0.3之前的版本就建议切换到5.0.3此版本刚好支持到vue2.2。注册方式不变，Vue.local和vue.config.lang也可以正常使用！强烈推荐！！

最后

虽说vue本身的变化并不多，但是项目使用的组件适配性以及他们相关的变化加起来还是有很客观的工作量。。本来我还认为我们这是个小项目，现在我不认为了

vue1升级vue2踩坑指南相关推荐

  1. 墨瞳漫画 升级vue2 踩坑

    概述 升级的话呢,还是比较简单,就按官方文档来,改写一下某些api,本文主要讲文档中说的不清晰的一些坑 vue-router 官方文档中推荐使用watcher来监测$route的改变,当路由变化时就去 ...

  2. pytorch .item_从数据到模型，你可能需要1篇详实的pytorch踩坑指南

    原创 · 作者 | Giant 学校 | 浙江大学 研究方向 | 对话系统.text2sql 熟悉DL的朋友应该知道Tensorflow.Pytorch.Caffe这些成熟的框架,它们让广大AI爱好者 ...

  3. tabbar角标 小程序_【沃行课堂】恭喜你遇到“坑”，小程序踩坑指南

    上周我们的开发小哥哥带领我们一起领略了开发中遇到的各种问题,以及基于SaaS模式的平台技术架构及实现.本周我们换个方向,由高级开发工程师秋哥带领大家共同探讨下小程序开发中踩过的坑.秋哥会从公司的几个小 ...

  4. android 字体文件压缩,Android 字体使用踩坑指南

    Android 字体使用踩坑指南 最近项目改版,根据ui的设计,需要使用到三字体.在使用过程中遇到一些坑,于是有了这个避坑指南! 字体压缩 第一个坑!字体库的体积太大. 字体压缩的前提是要使用的内容是 ...

  5. weex 一个传说级巨坑-- 2018最新版weex踩坑指南(weex navigator 多界面跳转)

    先说结论,本人极度非常 不推荐weex作为任何商用开发 有很多人会说了... 你瞎扯.. 你看别人阿里.. 啊飞猪... 啊那个支付宝... 人家不是用得好好的么... 当然这也是我们公司作为技术选型 ...

  6. 内网穿透，使用 IPv6 公网访问内网设备踩坑指南

    本文是开启宽带 IPv6 功能并使用公网 IPv6 地址访问内网设备的踩坑指南.IPv6 是目前个人体验最优的内网访问方案,个人体验远胜过 ZeroTier,frp 等方案. 场景 将个人设备暴露于公 ...

  7. Git Commit Message校验踩坑指南

    背景 在团队多人开发中,规范的commit message可以快速定位代码提交历史,回溯问题根源,方便组内多人协作,提高团队效率. 本篇文章主要包含以下两方面内容: commitizen/cz-cli ...

  8. MacBook通过XGP玩女神异闻录5皇家版不踩坑指南

    XGP是微软Xbox游戏通行证服务,全称Xbox Game Pass,俗称西瓜皮. 女神异闻录5皇家版(P5R)登录了全平台,XGP会员可以通过云游戏在MacBook中游玩,本篇为MacBook玩P5 ...

  9. 联调中通wincall平台-踩坑指南

    开发踩坑指南 初始化阶段 new CTIPlus({token: user.token, //tokenagentPhone: user.phone, //坐席工号或者手机号agNo: user.ag ...

最新文章

  1. 悟道·文汇详解：少样本学习等近十个数据集取得第一
  2. PHP下使用FPDF在PDF中插入图片
  3. matlab向量的模_基于MATLAB使用矩阵方法求解一维定态薛定谔方程
  4. ASP.NET获取文件名,后缀名
  5. 卡巴斯基将支持微软企业安全解决方案Forefront
  6. phpcmsV9 的 PHPSSO 配置
  7. python函数定义时参数相当于占位符_python中函数的参数
  8. jdk1.8新特性的应用-Stream 的终止操作
  9. 关于Python编码这一篇文章就够了
  10. PHP给下载链接添加内容信息,PHP自动给文章内容添加关联链接方法和示例
  11. 2022危险化学品生产单位安全生产管理人员考试题库及在线模拟考试
  12. 2012年7月份第2周51Aspx源码发布详情
  13. 图片格式 tif转jpg 用Matlab实现
  14. mkv文件用什么软件打开_什么是MKV文件，以及如何播放它们？
  15. iptable端口重定向 MASQUERADE
  16. VMware虚拟机 centos8 解决全屏问题
  17. ext4文件系统布局
  18. Debian10安装部署DNS服务-正向解析篇
  19. 用计算机控制操作照相机,摄影教程：用电脑控制相机远程拍摄
  20. HIT 2019春软件构造Lab1

热门文章

  1. 全景扭曲变形滤镜PS插件 Flaming Pear Flexify 2 WIN/MAC汉化版
  2. MATLAB环境下基于AlexNet网络的Deep Dream图像生成
  3. 汇咖科技：风口当下，与我们相关的，三大小程序创业红利项目！
  4. java中自加（++）和自减（--）运算符
  5. 牛码宝宝 - Sprint log (No.2)
  6. 运营日记：营销推广模式
  7. 2022年西安市施工员（装修装饰）考试练习题及答案
  8. YOLOv5训练自己的数据集（Windows）
  9. Java 从零开始实现一个画图板、以及图像处理功能，代码可复现
  10. 串口线传输距离之讨论