uniapp升级Vue3：避坑指南与步骤详解

最新推荐文章于 2024-09-12 15:10:57 发布

程序员王天

最新推荐文章于 2024-09-12 15:10:57 发布

阅读量657

点赞数 3

文章标签： vue.js javascript 前端 uni-app 微信小程序

本文链接：https://blog.csdn.net/qq_36435177/article/details/142069392

版权

为什么要升级到 Vue3

Vue3 是 Vue.js 的最新版本，相比 Vue2，它带来了许多改进和新特性，比如更小的包体积、更好的性能、更强大的组合式 API 等。通过升级到 Vue3，我们可以享受到这些新特性带来的好处，提升项目的开发效率和用户体验

二、升级步骤

1、Hbuildx 安装 vue3 依赖版本

2、vue2 项目依赖库切换 vue3

3、替换 index.html 文件

在项目根文件 index.html 文件替换为以下内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

三、语法替换

vue3 新增了一些新语法和使用限制，需升级为 vue3 新语法、使项目在 vue3 版本正常运行

创建实例新写法

vue3 中使用 createSSRAapp 创建实例，在 main.js 代码如下

import App from './App'
import { createSSRApp } from 'vue'
// 不能修改导出的 createApp 方法名，不能修改从 Vue 中导入的 createSSRApp。
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

1、commonJs 改为 ES6 模块规范

所有 require 不可使用，改为 import

// 导入
// 之前 - Vue 2, 使用 commonJS
var utils = require("../../../common/util.js");
// 之后 - Vue 3， 只支持 ES6 模块
import utils from "../../../common/util.js";
// 导出
// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;
// 之后 - Vue 3， 只支持 ES6 模块
export default { X };