uni-app中vue写法好像不支持

uni-app中vue写法好像不支持

开发环境 版本号 项目创建方式
Mac CLI 
产品分类：uniapp/H5

PC开发环境操作系统版本号：Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)

浏览器平台：Chrome
浏览器版本：Chrome: 80.0.3987.149

CLI版本号：4.5.13

运行环境的信息  
System:  
OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)  
CPU: (20) x64 Intel(R) Xeon(R) CPU E5-2660 v3 @ 2.60GHz  
Binaries:  
Node: 14.15.4 - /usr/local/bin/node  
Yarn: 1.22.10 - /usr/local/bin/yarn  
npm: 6.14.11 - /usr/local/bin/npm  
Browsers:  
Chrome: 80.0.3987.149  
Firefox: 93.0  
npmPackages:  
[@dcloudio](/user/dcloudio)/uni-app-plus-nvue:  0.0.1  
[@dcloudio](/user/dcloudio)/uni-app-plus-nvue-v8:  0.0.1  
[@dcloudio](/user/dcloudio)/uni-mp-vue: ^2.0.0-32220210818002 => 2.0.0-32920210927002  
[@dcloudio](/user/dcloudio)/vue-cli-plugin-hbuilderx: ^2.0.0-32220210818002 => 2.0.0-32920210927002  
[@dcloudio](/user/dcloudio)/vue-cli-plugin-uni: ^2.0.0-32220210818002 => 2.0.0-32920210927002  
[@dcloudio](/user/dcloudio)/vue-cli-plugin-uni-optimize: ^2.0.0-32220210818002 => 2.0.0-32920210927002  
[@dcloudio](/user/dcloudio)/webpack-uni-nvue-loader:  0.0.1  
[@hap-toolkit](/user/hap-toolkit)/dsl-vue:  0.6.13  
[@intlify](/user/intlify)/vue-devtools:  undefined (9.1.7)  
[@vue](/user/vue)/babel-helper-vue-jsx-merge-props:  1.2.1  
[@vue](/user/vue)/babel-helper-vue-transform-on:  1.0.2  
[@vue](/user/vue)/babel-plugin-jsx:  1.1.0  
[@vue](/user/vue)/babel-plugin-transform-vue-jsx:  1.2.1  
[@vue](/user/vue)/babel-preset-app:  4.5.13  
[@vue](/user/vue)/babel-preset-jsx:  1.2.4  
[@vue](/user/vue)/babel-sugar-composition-api-inject-h:  1.2.1  
[@vue](/user/vue)/babel-sugar-composition-api-render-instance:  1.2.4  
[@vue](/user/vue)/babel-sugar-functional-vue:  1.2.2  
[@vue](/user/vue)/babel-sugar-inject-h:  1.2.2  
[@vue](/user/vue)/babel-sugar-v-model:  1.2.3  
[@vue](/user/vue)/babel-sugar-v-on:  1.2.3  
[@vue](/user/vue)/cli-overlay:  4.5.13  
[@vue](/user/vue)/cli-plugin-babel: ~4.5.0 => 4.5.13  
[@vue](/user/vue)/cli-plugin-eslint: ~4.5.0 => 4.5.13  
[@vue](/user/vue)/cli-plugin-router:  4.5.13  
[@vue](/user/vue)/cli-plugin-typescript: ~4.5.0 => 4.5.13  
[@vue](/user/vue)/cli-plugin-unit-jest: ~4.5.0 => 4.5.13  
[@vue](/user/vue)/cli-plugin-vuex:  4.5.13  
[@vue](/user/vue)/cli-service: ~4.5.0 => 4.5.13  
[@vue](/user/vue)/cli-shared-utils:  4.5.13  
[@vue](/user/vue)/compiler-core:  3.2.20  
[@vue](/user/vue)/compiler-dom:  3.2.20  
[@vue](/user/vue)/compiler-sfc: ^3.0.0 => 3.2.20  
[@vue](/user/vue)/compiler-ssr:  3.2.20  
[@vue](/user/vue)/component-compiler-utils:  3.2.2 (3.1.0)  
[@vue](/user/vue)/devtools-api:  6.0.0-beta.19 (6.0.0-beta.15)  
[@vue](/user/vue)/eslint-config-standard: ^5.1.2 => 5.1.2  
[@vue](/user/vue)/eslint-config-typescript: ^5.0.2 => 5.1.0  
[@vue](/user/vue)/preload-webpack-plugin:  1.1.2  
[@vue](/user/vue)/reactivity:  3.2.20  
[@vue](/user/vue)/ref-transform:  3.2.20  
[@vue](/user/vue)/runtime-core:  3.2.20  
[@vue](/user/vue)/runtime-dom:  3.2.20  
[@vue](/user/vue)/server-renderer:  3.2.20  
[@vue](/user/vue)/shared: ^3.0.0 => 3.2.20  
[@vue](/user/vue)/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29  
[@vue](/user/vue)/web-component-wrapper:  1.3.0  
jest-serializer-vue:  2.0.2  
mpvue-page-factory:  1.0.1  
mpvue-template-compiler:  1.0.13  
typescript: ^3.0.0 => 3.9.10  
uni-h5-vue:  2.6.10  
uni-mp-vue:  2.6.10  
vue: ^3.2.20 => 3.2.20  
vue-eslint-parser:  7.11.0  
vue-hot-reload-api:  2.3.4  
vue-i18n:  undefined (9.1.7)  
vue-jest:  3.0.7  
vue-loader:  15.9.8 (15.8.3, 16.8.1)  
vue-router:  3.0.1  
vue-style-loader:  4.1.3 (4.1.2)  
vue-template-compiler:  2.6.14 (2.6.11)  
vue-template-es2015-compiler:  1.9.1  
vue-virtual-scroll-list: ^2.3.2 => 2.3.3  
vue3:  1.0.0  
vuex: ^4.0.0-0 => 4.0.2 (3.6.2)  
vuex-module-decorators: ^1.0.1 => 1.0.1  
npmGlobalPackages:  
[@vue](/user/vue)/cli: 4.5.11  

我的项目构建方式  
vue create -p dcloudio/uni-preset-vue#vue3 aisonlin  

main.ts的2.0写法，因为3.0写法会报错，我明明升级到v3  
import Vue from 'vue'  
Vue打印出来还是v2的实例方法，所以无法导入createApp方法  

import Vue from 'vue'  
import App from './App.vue'  
// [@ts-ignore](/user/ts-ignore)  
const app = new Vue({  
...App  
})  
app.$mount()  

bug描述：  
vue写法好像不支持

更多关于uni-app中vue写法好像不支持的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中vue写法好像不支持的实战教程也可以访问 https://www.itying.com/category-93-b0.html


从你的描述来看，问题出在项目配置上。虽然你使用了Vue 3版本的依赖（vue: ^3.2.20），但项目实际上仍然运行在Vue 2模式下。

主要问题分析：

  1. 项目模板问题：你使用的dcloudio/uni-preset-vue#vue3模板可能没有正确配置Vue 3环境。uni-app的Vue 3支持需要特定的项目结构和配置。

  2. 依赖版本冲突：从你的package.json可以看出，项目中同时存在Vue 2和Vue 3的相关依赖：

    • vue-template-compiler: 2.6.14（Vue 2的编译器）
    • vue: ^3.2.20（Vue 3运行时） 这种混合会导致运行时错误。

  3. uni-app版本兼容性：你的CLI版本是4.5.13，需要确认是否完全支持Vue 3。

解决方案：

  1. 创建正确的Vue 3项目：
# 使用官方推荐的创建方式
npx degit dcloudio/uni-preset-vue#vite my-project
# 或者
vue create -p dcloudio/uni-preset-vue my-project
# 创建时选择Vue 3版本

  1. 检查项目配置：

    • 确保vue.config.js中配置了正确的Vue版本
    • 检查package.json中uni-app相关依赖是否都是Vue 3版本

  2. main.ts的正确写法（Vue 3）：

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
  1. 清理并重新安装依赖：
rm -rf node_modules
npm cache clean --force
npm install
回到顶部