uniapp 小程序 使用vue3+ts运行项目，Uniapp小程序使用Vue 3 + TypeScript运行项目实践指南

摘要：使用uniapp框架开发小程序时，可以基于Vue 3和TypeScript（TS）来运行项目。Vue 3提供了更高效的组件化开发方式和性能优化，而TypeScript的静态类型检查可以增强代码的可维护性和健壮性。通过结合uniapp，开发者能够利用Vue 3的响应式系统和组件化特性，以及TypeScript的类型注解和接口等功能，构建出高性能、易于维护的小程序应用。

uniapp官网教程链接：uni-app官网。

（插入图片）

创建方式有两种：

1、通过HBuilderX可视化界面创建。

2、使用vue-cli命令行进行创建。

二、本次我选择了使用vue-cli命令行进行创建。

1、全局安装vue-cli（如果已经安装，此步可跳过）。

安装命令：

npm install -g @vue/cli

2、创建一个基于typescript的开发项目（如命令行创建失败，建议从gitee下载模板）。

下载模板的命令为：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

注意：如果无法直接使用命令下载，可以去gitee下载模板使用。

3、打开文件。

下载完模板后需要解压，使用vscode打开文件，此时可能会遇到报错，主要是因为缺少依赖。

（插入报错图片）

解决此问题的方法是使用npm下载全部依赖。

安装依赖的命令为：

npm i

4、运行uniapp项目。

使用的命令为：

npm run dev:mp-weixin

终端会提示操作步骤。

（插入操作步骤图片）

dist文件夹里的dev文件就是小程序打包生成的文件。

（插入文件位置图片）

使用微信开发者工具导入项目（选择dist文件下的dev/map-weixin），务必填写已注册的AppID。

（插入微信开发者工具页面图片）

打开微信开发者工具，即可看到项目，祝贺你的项目成功创建并运行！👏👏😊😊😊👍👍