实操指南|如何用 OpenTiny Vue 组件库从 Vue 2 升级到 Vue 3-低调大师

实操指南|如何用 OpenTiny Vue 组件库从 Vue 2 升级到 Vue 3

2023-10-13 319

前言

根据 Vue 官网文档的说明，Vue2 的终止支持时间是 2023 年 12 月 31 日，这意味着从明年开始：

Vue2 将不再更新和升级新版本，不再增加新特性，不再修复缺陷

虽然 Vue3 正式版本已经发布快3年了，但据我了解，现在依然还有很多业务在使用 Vue2，迟迟没有升级 Vue3。

为什么要等到 Vue2 彻底停止维护，才考虑升级 Vue3 这个如此重要的问题呢？？？

本文是一篇 Vue2 升级 Vue3 的指南，主要包含以下部分：

使用 Vue CLI 搭建 Vue2 工程
使用 ElementUI 搭建表格、表单
使用 OpenTiny Vue 替换一个组件
使用 OpenTiny Vue 替换一个页面
使用 OpenTiny Vue 替换整个应用
使用 gogocode 升级到 Vue3，组件代码无需修改

创建 Vue 2项目

先用 Vue CLI 创建一个 Vue2 项目（也可以使用 Vite 配合 @vitejs/plugin-vue2 或 vite-plugin-vue2 插件）。

// 安装 Vue CLI
npm install -g @vue/cli

// 创建 Vue2 项目
vue create vue2-demo

输出以下信息说明项目创建成功

🎉  Successfully created project vue2-demo.
👉  Get started with the following commands:

$ cd vue2-demo
$ yarn serve

创建好之后可以执行以下命令启动项目

yarn serve

输出以下命令说明启动成功

App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.1.102:8080/

效果如下

使用 ElementUI 搭建表格、表单

安装 VueRouter

npm i vue-router@3

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('./components/HomePage.vue')
    },
    {
      path: '/form',
      component: () => import('./components/FormPage.vue')
    },
    {
      path: '/list',
      component: () => import('./components/ListPage.vue')
    }
  ]
})

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <p>
      
      
      
      <router-link to="/">Home</router-link>
      <router-link to="/form">Form</router-link>
      <router-link to="/list">List</router-link>
    </p>
    
    
    <router-view></router-view>
  </div>
</template>

安装 ElementUI

npm i element-ui

在 src/views/FormPage.vue 中使用 ElementUI 组件，从 ElementUI 官网组件 demo 里面拷贝代码即可。

典型表单：https://element.eleme.io/#/zh-CN/component/form#dian-xing-biao-dan

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

效果如下

表格页面也一样。

src/views/ListPage.vue

<template>
  <div>
    <div class="filter-bar">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker v-model="value1" type="daterange"> </el-date-picker>
      <el-input
        v-model="search"
        placeholder="输入关键字搜索"
        style="width: 300px"
      />
      <el-button>搜索</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      options: [
        {
          value: '选项1',
          label: '王小虎'
        },
        {
          value: '选项2',
          label: '张三'
        },
        {
          value: '选项3',
          label: '李小萌'
        },
        {
          value: '选项4',
          label: '令狐冲'
        }
      ],
      value: '',
      search: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '张三',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '李小萌',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '令狐冲',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.filter-bar {
  display: flex;

  & > * {
    margin-right: 20px;
  }
}
</style>

效果如下

首页可以放一张轮播图。

src/views/HomePage.vue

<template>
  <el-carousel>
    <el-carousel-item v-for="item in 4" :key="item">
      <img :src="`https://picsum.photos/1350/900?random=${item}`" style="width: 100%;">
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>

效果如下

参考：

表单：https://element.eleme.io/#/zh-CN/component/form
表格：https://element.eleme.io/#/zh-CN/component/table
轮播：https://element.eleme.io/#/zh-CN/component/carousel

****

使用 OpenTiny Vue 替换一个组件

OpenTiny Vue 的组件都是支持按需引入的，一开始我们步子不要迈得太大，先尝试替换一个 Button 组件。

安装 @opentiny/vue@2

npm i @opentiny/vue@2

表单页面里面有两个按钮，我们尝试将其替换成 OpenTiny Vue 的 Button 组件。

替换的步骤很简单，不需要修改现有的代码，只需要增加4行代码即可。

src/views/FormPage.vue

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  ...
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
+  import { Button } from '@opentiny/vue'

  export default {
+    components: {
+      ElButton: Button
+    },
    data() {
      return {
        form: {
          name: '',
          ...
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

效果如下

使用 OpenTiny Vue 替换一个页面

接下来我们步子逐渐迈大一点，将整个 FormPage 页面的 ElementUI 组件全部替换成 OpenTiny Vue 的组件。

FormPage 页面一共有以下组件：

Button
Form
FormItem
Input
Select
Option
Col
DatePicker
TimePicker
Switch
CheckboxGroup
Checkbox
RadioGroup
Radio

替换的方式和前面替换 Button 组件一模一样，只需要多加一些组件。

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  ...
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  import {
    Button,
+    Form,
+    FormItem,
+    Input,
+    Select,
+    Option,
+    Col,
+    DatePicker,
+    TimePicker,
+    Switch,
+    CheckboxGroup,
+    Checkbox,
+    RadioGroup,
+    Radio,
  } from '@opentiny/vue'

  export default {
    components: {
      ElButton: Button,
+      ElForm: Form,
+      ElFormItem: FormItem,
+      ElInput: Input,
+      ElSelect: Select,
+      ElOption: Option,
+      ElCol: Col,
+      ElDatePicker: DatePicker,
+      ElTimePicker: TimePicker,
+      ElSwitch: Switch,
+      ElCheckboxGroup: CheckboxGroup,
+      ElCheckbox: Checkbox,
+      ElRadioGroup: RadioGroup,
+      ElRadio: Radio,
    },
    data() {
      return {
        form: {
          name: '',
          ...
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

效果如下

使用 OpenTiny Vue 替换整体应用

最后一步就是使用 OpenTiny Vue 替换整个应用的 ElementUI。

我们可以用前面的方法进行替换，但考虑到整个应用的页面众多，我们采取另一种方式。

我们已经全局注册了 ElementUI 组件库，接下来我们全局注册 OpenTiny Vue 组件库。

import Vue from 'vue'
- import ElementUI from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.css'
+ import TinyVue from '@opentiny/vue'
import App from './App.vue'
import VueRouter from 'vue-router'

- Vue.use(ElementUI)
+ Vue.use(TinyVue)

const router = new VueRouter({
  routes: [
    ...
  ]
})

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

然后全局替换 el- 为 tiny-，一步到位！

效果如下

首页轮播

表单

表格

是不是非常丝滑，更丝滑的还在后面！

接下来我们将借助一款神器：gogocode，实现 Vue2 项目平滑升级 Vue3。

使用 gogocode 升级到 Vue3

安装 gogocode：

npm install gogocode-cli -g

转换源码：

gogocode -s ./src/ -t gogocode-plugin-vue -o ./src/

升级依赖：

gogocode -s package.json -t gogocode-plugin-vue -o package.json

升级 TinyVue 组件库到 3.0 版本

npm i @opentiny/vue@3

组件代码无需做任何修改，完成 Vue2 项目平滑升级到 Vue3 🎉

执行 npm run dev 命令启动项目，除了 Vue 版本号变化之后，其他任何效果都没有变化。

首页轮播

表单

表格

遇到的问题

问题一：error 'v-model' directives require no argument vue/no-v-model-argument

解决方法：修改 FormPage.vue 中的 v-model:value 为 v-model 即可

问题二：Failed to resolve component: router-link

解决方案：修改 main.js 中 use(router) 代码顺序即可

window.$vueApp = Vue.createApp(App)

window.$vueApp.mount('#app')
import * as Vue from 'vue'
import TinyVue from '@opentiny/vue'
import App from './App.vue'
import * as VueRouter from 'vue-router'

- window.$vueApp.use(TinyVue)

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    ...
  ],
})

window.$vueApp = Vue.createApp(App)
+ window.$vueApp.use(TinyVue)
+ window.$vueApp.use(router) // 这一行代码需要放到 mount 之前
window.$vueApp.mount('#app')
window.$vueApp.config.globalProperties.routerAppend = (path, pathToAppend) => {
  return path + (path.endsWith('/') ? '' : '/') + pathToAppend
}

- window.$vueApp.use(router)

如果你在升级 Vue3 的过程中遇到任何问题，欢迎在评论区进行讨论，也欢迎添加 OpenTiny 小助手 opentiny-official 与我们交流！

本文涉及到的源码链接：

https://github.com/opentiny/cross-framework-component

Element 升级 OpenTiny 的 demo 项目在 packages/element-to-opentiny 子包里。

vue2 项目在 vue2 分支
vue3 项目在 vue3 分支

关于 OpenTiny

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架的UI组件库，适配 PC 端 / 移动端等多端，支持 Vue2 / Vue3 / Angular 多技术栈，拥有灵活扩展的低代码引擎，包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

核心亮点：

跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
组件丰富：PC 端有100+组件，移动端有30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等。
低代码引擎：低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过下载源码进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。
配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化。
周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，提供覆盖前端开发全流程的 TinyCLI 工程化工具，提供强大的在线主题配置平台 TinyTheme。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

TinyVue 源码： https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

往期文章推荐

1、低代码引擎 TinyEngine 正式发布！！！

2、必不可少的UI组件一——组件的基础知识

3、OpenTiny Vue 3.10.0 版本发布：组件 Demo 支持 Composition 写法，新增4个新组件

4、前端Vuer，请收好这份《Vue组件单元测试》宝典

5、OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生

6、从自研走向开源的 TinyVue 组件库

7、我要做开源，提交我的第一个PR

微信关注我们

原文链接：https://my.oschina.net/u/6769809/blog/10117578

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

基于 EventBridge 轻松搭建消息集成应用

作者：昶风前言本篇文章主要介绍基于阿里云 EventBridge 的消息集成能力，结合目前消息产品的需求热点，从能力范围到场景实战，对 EventBridge 的消息集成解决方案进行了概要的介绍。从消息现状谈起消息队列作为应用解耦，流量削峰填谷的有效工具，早已被开发者广泛应用于各类分布式服务中。随着业务的不断发展迭代，越来越多的服务面临着稳定性和可维护方面的挑战，对消息队列的需求也不再局限于普通的订阅-消费，这里列举 3 个场景的能力需求：消息路由能力这里主要的需求场景是数据同步和异地灾备。对于大多数消息队列用户而言，消息队列中的业务数据一般由一类服务来消费和处理，当用户有多个应用，且需要一个全局视野来汇总分析这些不同应用的数据时，消息路由就成了一个避不开的能力需求。同样，出于数据灾备的考虑，云上大用户通常也有在不同 region 同步消息数据的需求。但在云上实现消息路由可能并不是一件容易的事情。众所周知，云上个 region 之间网络是严格隔离的，用户想要实现数据的跨 region 传输，要么使用 CEN 等网络打通方案，要么使用公网进行数据传输。前者需要业务在设立之初...

2023-10-13

324

作者：啃唯 SQL Server 简介 SQL Server 是什么？ Microsoft SQL Server 是 Microsoft 推出的关系型数据库解决方案，支持企业 IT 环境中的各种事务处理、商业智能和分析应用程序。Microsoft SQL Server 是市场领先的数据库技术之一。 SQL Server 特点稳定：针对企业的应用需求，制定出适应环境的解决方案，保证了企业的数据安全和顺利运行。易用：提供了丰富的图形化管理工具，方便用户快速搭建数据库系统。兼容：原生适配 Windows 系统，提供丰富的 API 访问。性能：多种数据库引擎优化算法，支持大量数据查询存储。 SQL Server 核心概念关系引擎：关系引擎控制存储引擎对数据的处理，并提供 SQL Server 组件来准确确定应如何执行查询。关系引擎由三个主要部分组成。CMD 解析器（parser）主要负责识别和消除语义和语法错误，并生成查询树。优化器（Optimizer）通过消除冗余任务和寻找最优计划，确保所请求的查询响应尽可能高效。查询执行器（Query Executoe）会生成数据获取逻辑的行为...

2023-10-13

328

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。