OpenTiny Vue2 升级 Vue3 操作手册

1 创建一个 Vue2 项目

1.1 打开VSCode软件，使用Ctrl+~快捷键打开终端。执行以下命令安装Vue CLI工具。

安装 Vue CLI @vue/cli 5.0.8

npm install -g @vue/cli

1.2 使用 Vue CLI 创建一个 Vue2 项目。

创建 Vue2 项目

vue create opentiny-vue2-to-vue3

1.3 选择 Vue2 项目

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

Successfully created project opentiny-vue2-to-vue3.

Get started with the following commands:

cd opentiny-vue2-to-vue3

npm run serve

1.4 创建好之后执行以下命令进入项目目录：

cd opentiny-vue2-to-vue3

1.5 接着执行以下命令启动项目

npm run serve

输出以下日志说明启动成功

App running at:

- Local: http://localhost:8080/

- Network: http://192.168.1.102:8080/

效果如下

2 使用 OpenTiny 搭建表单/表格页面

2.1 安装 VueRouter和OpenTiny Vue组件库

npm i vue-router@3 @opentiny/vue@2

修改package.json文件中的 vue / vue-template-compiler 版本号前面的 ^，删除 package-lock.json 文件，执行下 npm i

2.2 在src/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')

2.3 在App.vue文件中写入以下内容：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    Vue version: {{ version }}
    <p>
      <!-- use the router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
      <router-link to="/">Home</router-link>
      <router-link to="/form">Form</router-link>
      <router-link to="/list">List</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>
</template>

<script>
import * as Vue from 'vue'

export default {
  name: 'App',
  components: {},
  data: function () {
    return {
      version: Vue.version,
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.4 创建以下文件：

• src/components/HomePage.vue
• src/components/FormPage.vue
• src/components/ListPage.vue

2.5 在HomePage.vue中写入以下内容：

<template>
  <div>Hello OpenTiny</div>
</template>

2.6 在FormPage.vue中使用 OpenTiny Vue 的Form组件

打开链接：

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/form

复制Form组件示例代码：

在FormPage.vue中粘贴复制好的代码。

2.7 同理ListPage.vue文件需要复制Grid组件代码，打开链接：

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid

复制Grid组件示例代码：

2.8 切换Home/Form/List路由

效果如下

参考链接：

• 表单：

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/form

• 表格：

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid

3 平滑升级 Vue3

3.1 安装 gogocode

npm install gogocode-cli -g

查看 gogocode版本号：

gogocode --version

0.2.28

3.2 转换源码

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

中间有一个确认的步骤，需要输入 y，按Enter确认

转换完之后会遇到以下两个问题，需要做两处修改：

问题一：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.use(router) // 这一行代码需要放到 mount 之前
window.$vueApp.mount('#app')

3.3 升级依赖

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

3.4 升级 TinyVue 组件库到 3.0 版本

npm i @opentiny/vue@3

3.5 最后重新执行下 npm i / npm run serve 命令即可。

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