原文链接：vite+vue3搭建开发环境

最近想启动一个移动端或者小程序的Vue3项目，所以选择一个跨终端的开发平台非常重要。业界主要有两个跨端开发平台Taro和Taro，但是他们对vue3的支持似乎不是特别友好。所以我在Taro和Taro之间犹豫了一段时间，最后尝试选择一些相对熟悉的东西来开发。

::: 前排提醒

目前，对Vue3的支持还处于开发阶段，你很有可能会遇到很多问题。

:::

开发环境设置

推荐安装，主要是uni cli只支持在APP平台生成离线打包的wgt资源包，不支持云打包生成apk/ipa，而且配置一些打包参数也不方便。

推荐安装这里的版本，后面会解释原因。

：：： 注意

正式版本中是无法直接创建Vue3项目的，而且版本有Vue2和3可供选择，但是创建的模板大部分还是用vue2编写的（没有语法糖），所以这时候你要么需要自己改代码，或者使用官方提供的

:::

# 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-project # 创建以 typescript 开发的工程 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

当然，下载也有可能失败。您可以直接访问下载模板。

项目结构

|-- src |-- App.vue |-- env.d.ts |-- main.ts |-- manifest.json |-- pages.json |-- uni.scss |-- pages | |-- index | |-- index.vue |-- static |-- logo.png |-- index.html |-- package-lock.json |-- package.json |-- postcss.config.js |-- tsconfig.json |-- vite.config.ts

下载完成后，开始安装依赖，然后就可以开始测试了。

运行编译

运行之前，先删除vuex包，否则会有如下提示。简而言之，就是不推荐使用它，同时也推荐使用状态管理。所以执行yarn vuex

(node:26968) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at F:\Uniapp\my-vue3-project1\node_modules\vuex\package.json. Update this package.json to use a subpath pattern like "./*".

H5

运行、编译均正常

应用程序

使用npm run dev:app后，你会发现终端卡在如下界面，无法继续。 （后来测试发现除了H5可以正常运行，其他都会卡）

编译器版本：3.4.3（vue3） 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式 。 正在编译中... vite v2.8.6 building for development... DONE Build complete. Watching for changes... ready in 1554ms.

然后呢？ ？ ？

算了，先用cli在手机或者模拟器上运行一下吧，然后打开app的时候就显示如下错误。点击“忽略”后，发现应用无法正常运行。

我查了一下我本地的版本是官方版本v3.3.13，Vue3模板版本是v3.4.3

好家伙，都是直接使用官方模板的，无奈，只能点击查看详情，解决问题。最终测试后，建议使用最新版本，即最新版本，于是更换了本地官方版本，应用程序可以正常运行。

既然在开发环境中可以正常运行，那么我们就尝试打包一下。由于打包应用程序只能打包成APP资源，所以要打包成apk，要么创建一个项目，然后将APP资源放入并打包成apk，要么使用云打包（云打包是一个独特的功能）。如果本地没有相关环境，建议使用云打包（简单方便）。封装过程这里不再演示。

小程序

这里只测试微信小程序。上述app处理完毕后，微信小程序正常运行。不过不知道和上面的Vue3模板和官方版本有没有关系，也懒得重新安装测试了。不过猜测应该和上面没有关系，毕竟和手机的SDK有关。

元件库

官方提供了uni-ui组件库，但是有一个比较知名的组件库，而且比前者更容易使用和实用。但是，当我尝试导入它时，出现以下提示。

显然它不支持vue3，但是我在社区找到了一个同时支持Vue3.0和Vue2.0的，但是经过测试最终失败了。

我也在社区里搜索过组件库，不过好像需要会员费，所以没有测试就果断放弃了。

然后我想到太郎里有这个，就开始尝试。果然支持Vue3组件库，肯定是支持的。演示如下

但遗憾的是，这里的支持仅限于h5开发。官方也有说法只能开发h5

@/@next 基于Vue3视觉风格京东APP 10.0规范，仅可开发h5

@/-taro基于Vue3视觉风格京东APP 10.0规范，必须基于taro + vue3框架进行多端开发（多端是指一套代码来部署多端环境微信小程序） h5等第三方小程序）

而如果要开发多端，必须基于taro+vue3框架，那么自然就跑不了app和小程序了（已测试）

那么一开始在芋头和芋头之间选择的时候，为什么不用芋头呢？并且还支持Vue3（相比之下）？

最终选择的组件库是官方的uni-ui。

使用开发

编码体验对我来说不太友好，所以我将项目转入开发并使用了 npm 包。

首先创建一个vite+vue3项目（或者使用一开始介绍的官方提供的Vue3模板，主要是用cli，需要自己安装），然后删除原来的src目录，替换为创建的项目根目录。但还需要进行以下操作

安装sass

vite支持sass只需要安装sass依赖即可。

npm install sass

允许js文件

由于使用了ts，如果项目中有js文件，就会发出警告。您可以将 "": true 添加到 .json。

组件语法提示

npm i @dcloudio/uni-helper-json @types/uni-app @types/html5plus -D

但是我发现uni-ui组件库的代码提示不太友好。很有可能需要在本地引用组件。我这里没有使用npm包导入，而是使用了官方的。不过组件库的代码提示问题不是很大。大了，查阅文档就可以解决。

导入代码块

uni-app 代码块()()

找不到模块“./App.vue”或其相应的类型声明

在src目录下创建env.d.ts文件，填写以下内容

/// declare module '*.vue' { import { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component }

然后只需将一些非vue3的#VUE3代码块，以及一些js文件重写为ts文件即可。在这里上传我修改后的模板。如果需要的话可以自行下载：/vite-vue3-()

如果你不想使用官方的vue3模板，这里还有一篇关于如何迁移的文章。

项目迁移至主流前端IDE开发（支持VS Code等编辑器/IDE）

但最终，如果你想在应用程序或小程序上运行它，你仍然需要打开它。

总结

整个流程下来，其实对Vue3支持还是不够友好，生态也没有及时更新。而且官方提供的Vue3模板也存在一定的问题。

但最终我还是用它来开发。首先，我对Vue3足够了解并且已经使用过它。其次，Taro支持Vue3，但如何将其编译成App是我的主要需求。最重要的是我不想再踩太郎了。被骗了。