前端库升级小记

借助今年特殊五一假期的空闲，把一个chrome插件小项目升级了下组件。

前端库版本升级（花费1天）：

1. vue cli /webpack -> vite
2. vue2 -> vue 3
3. echart 4 -> echarts 5
4. bootstrap 4 -> bootstrap 5
5. 更换vue3版的codemirror插件

chrome编译工具升级（花费2天）：

1. chrome插件编译热加载webpack-extension-reloader 更换为 @samrum/vite-plugin-web-extension
2. 尝试升级manifest v3 放弃

vue的构建系统升级

从webpack到vite 感觉轻快了不少

1、全局引入jquery和bootstrap

在main.js中

import 'jquery'
import 'bootstrap'

在使用的地方也要引入

import $ from 'jquery'
import * as bootstrap from 'bootstrap'

vue2到3

这个过程还好，感觉还比较平滑，可见：vue2到3的迁移概述

1、入口html文件中不用再引入css了，编译时会自动引入；script 引入中多了type=''module"

<script type="module" src="./main.js"></script>

2、引入*.vue需要带上后缀

import App from './App.vue'

3、$set、$delete被移除，基于代理的变化检测已经不再需要

this.$set(obj, newAttr, value)
// 直接使用
obj.newAttr = value

4、filters过滤器被移除

<template>
<p>{
  { accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    data: {
      accountBalance: 100
    },
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

可以直接使用method替代，也可以使用计算属性或者全局属性

<template>
<p>{
  { currencyUSD(accountBalance) }}</p>
</template>

<script>
  export default {
    data: {
      accountBalance: 100
    },
    methods: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

5、新增emits选项，可以指定组件触发事件

6、v-model已升级，默认指modelValue

<intpu type="text" v-model