HBuilder + uniapp 项目切换到VsCode

用户2204603958682026-06-28 17:51

在我们要创建把原来基于HBuilder上的uniapp项目(转换原因HBuilder上不兼容Ts类型提示，如果硬要用Ts,要下载Ts类型的相关插件)，转换到vscode开发时。

这里我先在HBuilder 上,自己新建一个vue3 +TS 的项目我这里是基于Vite CLI 先创建了一个项目。

bash 复制代码

npx degit dcloudio/uni-preset-vue#vite-ts uni_app_shop_ts

前面的 npx degit dcloudio/uni-preset-vue#vite-ts是HBuilder内用来创建Vue3 + TS的环境的（不可更改）（存在坑点）

后面的uni_app_shop_ts是项目名称（根据需要替换）

之后就是安装相应包来适配uniapp的代码。

bash 复制代码

# 安装第三方库
npm install

当执行完上述所有步骤，我们切换到VsCode平台，推荐下载的插件这几个是用来方便写代码的:

shell 复制代码

#当我们手动创建网页，分包等内容时，会自动加载到src/pages.json文件内
uni-create-vie

#uniapp的代码提示
uni-helper  

#鼠标悬停提示
uniapp小程序扩展

以下第三方库是为了能让ts实现类型检验要装的（第一个必须装，第二个包要求 TypeScript 5.0 或更高版本）

ruby 复制代码

# 安装 uni-app 类型声明（注意：正确的包名是 @dcloudio/types）
npm add -D @dcloudio/types

# 安装 uni-app 组件类型（这个包可以增强 Vue 组件的类型提示）
npm add -D @uni-helper/uni-app-types

说明一下npm add 是 npm install 的别名, -D全称为 --save-dev是把下载的第三方包添加到 package.json 文件 devDependencies下。

包名	用途	说明
`@dcloudio/types`	uni-app 全局 API 类型（如 `uni.request`、`uni.showToast` 等）	✅ 官方包，必须安装
`@uni-helper/uni-app-types`	uni-app 组件类型（如 `<view>`、`<text>` 等 Vue 组件的 props 类型）	✅ 社区维护，可选但强烈推荐