Vue3和Uniapp的爱恨情仇：小白也能懂的跨端秘籍

掘金前端

我叫黑大帅

2026年3月1日 00:38

Vue3 与 UniApp 开发经验分享：跨端开发的选择与实践

最近不少刚接触前端的朋友问我，Vue3 和 UniApp 是不是竞争对手？

其实完全不是，我自己两个都在项目里用过，今天就从实际开发角度聊聊它们的区别、踩过的坑，以及怎么选。

先明确两者的定位

简单说：

Vue3 是一个纯 Web 前端框架，主要用来写浏览器里跑的 H5 页面、Web 应用等。
UniApp 是基于 Vue3 封装的跨端框架，它用 Vue3 的语法，但能把同一套代码编译到 H5、微信小程序、支付宝小程序、App、鸿蒙等多个平台。

举个实际例子：

如果你用 Vue3 写微信小程序，得额外用 Taro 这类框架做适配；但用 UniApp 写，代码写完直接选平台打包就行，这是最直观的区别。

核心差别一：构建工具不一样

Vue3 的构建流程

Vue3 默认用 Vite 或 Webpack，我一般用 Vite，创建项目很简单：

 # 创建 Vue3 项目
 npm create vite@latest my-vue-app -- --template vue
 cd my-vue-app
 npm install
 npm run dev

但如果你想把 Vue3 项目打包成 App，得额外加 Capacitor 或 Cordova，步骤会多一些：

 # 1. 先打包成 H5
 npm run build
 
 # 2. 引入 Capacitor
 npm install @capacitor/core @capacitor/cli
 npx cap init my-app com.example.myapp
 
 # 3. 添加 Android 平台
 npm install @capacitor/android
 npx cap add android
 
 # 4. 同步代码并编译
 npx cap sync
 npx cap open android  # 打开 Android Studio 编译安装包

UniApp 的构建流程

UniApp 官方推荐用 HBuilderX，也支持 CLI 方式。我用 HBuilderX 比较多，打包流程很直接：

在 HBuilderX 里打开项目，点击顶部“发行”；
选你要打包的平台（比如“微信小程序”“App-云打包”）；
填一下基本信息（比如 App 名称、证书），点“打包”就行。

如果用 CLI 方式，创建和运行也很简单：

 # 创建 UniApp 项目
 npx degit dcloudio/uni-preset-vue#vite my-uniapp
 cd my-uniapp
 npm install
 npm run dev:h5  # 运行 H5
 npm run dev:mp-weixin  # 运行微信小程序

核心差别二：API 不一样

Vue3 用的是 Web API

Vue3 里发请求、操作页面元素，用的都是浏览器原生 API 或第三方库，比如 axios：

 // Vue3 里发请求（仅 H5 可用）
 import axios from 'axios'
 
 async function getUserInfo() {
   try {
     // 还要处理跨域问题，比如在 vite.config.js 里配代理
     const res = await axios.get('https://api.example.com/user/info')
     console.log(res.data)
   } catch (err) {
     console.error(err)
   }
 }

但这些代码放到小程序里会报错，因为小程序没有 axios，也没有 document 对象。

UniApp 用的是 uni.* API

UniApp 封装了一套跨端 API ，不管在哪个平台都能用，比如发请求：

 // UniApp 里发请求（全平台通用）
 async function getUserInfo() {
   try {
     const res = await uni.request({
       url: 'https://api.example.com/user/info',
       method: 'GET'
     })
     console.log(res.data)
   } catch (err) {
     console.error(err)
   }
 }

再比如获取用户信息，Vue3 里可能要调浏览器的 navigator，但 UniApp 直接用：

 // UniApp 获取用户信息（以微信小程序为例）
 uni.getUserProfile({
   desc: '用于完善用户资料',
   success: (res) => {
     console.log(res.userInfo)
   }
 })

而且 UniApp 的 API 报错信息比较明确，调试起来比 Vue3 适配多端时省心。

核心差别三：页面路由写法不一样

Vue3 用 Vue Router

Vue3 的路由需要自己配置，先安装 vue-router：

 npm install vue-router@4

然后在 src/router/index.js 里写配置：

 // Vue3 路由配置
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import Cart from '../views/Cart.vue'
 
 const routes = [
   {
     path: '/',
     name: 'Home',
     component: Home
   },
   {
     path: '/cart',
     name: 'Cart',
     component: Cart
   }
 ]
 
 const router = createRouter({
   history: createWebHistory(),
   routes
 })
 
 export default router

最后在 main.js 里挂载：

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
 createApp(App).use(router).mount('#app')

UniApp 用 pages.json

UniApp 不需要自己装路由插件，直接在 pages.json 里配置就行：

 // UniApp pages.json 配置
 {
   "pages": [
     {
       "path": "pages/index/index",
       "style": {
         "navigationBarTitleText": "首页",
         "navigationBarBackgroundColor": "#ff0000"
       }
     },
     {
       "path": "pages/cart/cart",
       "style": {
         "navigationBarTitleText": "购物车",
         "navigationStyle": "default"
       }
     }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "white"
   }
 }

页面跳转也很简单，直接用 uni.navigateTo：

 // UniApp 页面跳转
 uni.navigateTo({
   url: '/pages/cart/cart'
 })

另外，UniApp 支持三种页面文件：

.vue：通用文件，全平台能用；
.nvue：原生渲染文件，App 端性能更好；
.uvue：鸿蒙专用文件，编译后接近原生性能。

核心差别四：生态不一样

Vue3 的生态

Vue3 用 npm 包，生态非常丰富，比如做 3D 可以用 Three.js，做工具函数可以用 VueUse：

 // Vue3 里用 Three.js
 import * as THREE from 'three'
 
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
 const renderer = new THREE.WebGLRenderer()
 renderer.setSize(window.innerWidth, window.innerHeight)
 document.body.appendChild(renderer.domElement)

但这些包很多是为 Web 端设计的，放到小程序或 App 中可能用不了。

UniApp 的生态

UniApp 有自己的插件市场，里面的插件都是跨端适配好的，比如支付可以用 uni-pay，地图可以用 uni-map：

 <template>
   <view>
     <uni-map :latitude="39.908823" :longitude="116.397470" :scale="14"></uni-map>
   </view>
 </template>

不过插件市场的数量肯定不如 npm 多，一些特别小众的功能可能找不到现成的插件。

什么时候选 UniApp？什么时候选 Vue3？

选 UniApp 的场景

我之前帮一个创业团队做过项目，他们需要同时做微信小程序、App 和 H5，预算有限，开发周期也紧。用 Vue3 的话得分别开发三端，至少要 2-3 个开发；用 UniApp 一个人就能搞定，代码写完直接打包，开发周期缩短了一半。

另外，如果项目需要高频迭代，比如外卖小程序，今天改满减活动，明天改商品列表，UniApp 改一次代码所有平台同步，测试一次就行，效率很高。

还有对 App 性能有要求的场景，用 UniApp 的 .nvue 或 .uvue 文件，能调用原生组件，滑动长列表比纯 Vue3 写的 H5 套壳 App 流畅很多。

选 Vue3 的场景

如果只做 Web 端，比如企业官网、后台管理系统，选 Vue3 更合适。UniApp 为了跨端会有一些额外的代码开销，而且 Vue3 可以随便用 npm 上的 Web 插件，比如做复杂的 3D 交互、数据可视化，Vue3 比 UniApp 灵活很多。

还有做图形密集型应用，比如手机游戏，UniApp 的性能跟不上，得用 Vue3 配合专业的游戏引擎。

最后总结

根据我的经验：

要做小程序、App、H5 多端，选 UniApp；
只做 Web 端，或者需要复杂的 Web 交互，选 Vue3。

而且先学 Vue3 再学 UniApp 很快，因为语法基本一样，就是多了 uni.* API 和 pages.json 配置。

两者不是竞争对手，而是可以搭配用的：用 Vue3 打好前端基础，用 UniApp 拓展跨端场景，这样开发起来更顺手。

如果你有具体的项目场景，也可以留言，我可以帮你分析一下用哪个更合适。

阅读视图