使用 HBuilderX 创建 uni-app 项目 并编译到微信开发者工具。

1. 通过 HBuilderX 创建
2. 通过命令行创建

首先我们需要先下载HBuilderX

下载链接地址：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

 下载安装 HbuilderX 编辑器

下载会自动匹配电脑系统，直接下载即可，不需要更改。

 通过 HbuilderX 创建 uni-app vue3 项目

 通过 HBuilderX 创建 uni-app 项目

首先我们需要下载微信小程序：

下载链接：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

进入小程序点击设置进行开启服务端口（服务端口只需初次使用时开启一次即可）

在 HBuilderX 中新建一个uniapp项目

之后直接运行到微信开发者工具上面即可。（会自动继续打开跳转）

整体流程：

 使用 VS Code 创建 uni-app 项目 并编译到微信开发者工具。

 准备工作

1. 下载vscode 地址Download Visual Studio Code - Mac, Linux, Windows

 找一下教程傻瓜式安装即可，这里不过多解释。

• HbuilderX 对 TS 类型支持暂不完善
• VS Code 对 TS 类型支持友好，熟悉的编辑器

例如：

安装插件：

 

创建一个uniapp项目方式：

1.如果下载了HBuilderX ：

在HBuilderX创建项目之后直接使用 vs code 打开文件夹即可

适用：

1. 支持 js 创建模板   （没有ts模板）
2. 模板类型多种多样  快速高效   
3. 在vs code 中无需配置 可以直接使用uniapp-run运行到微信开发者工具上面tsconfig.json

2. 没有下载了HBuilderX

使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

流程：

环境安装

全局安装 vue-cli

npm install -g @vue/cli

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 giteehttps://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip 下载模板）

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

 my-vue3-project（为你想要的文件名称） 自行修改即可

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

注意

• Vue3/Vite版要求 node 版本 18+、20+

 适用：

适合创建 ts 的 uniapp 的模板

运行方式：

在vscode中下载插件

点击设置  >  扩展设置

我们需要配置

 HBuilderX 和vscode 的安装路径 方便我们运行的时候 自启动

看自己电脑上面的安装路径即可 到文件夹的位置比如 

这个文件夹下面即可

HBuilderX 同理 

接下来我们就可以尝试运行了

点击侧边栏

点击添加配置

如果第一次使用可以使用默认模版方式快速创建 launch.json

 点击运行旁边的选择

对文件进行配置

 新增如下两条 

上面其他的是默认的，无需修改

"vueVersion": "v3",  // vue版本
"openDevTool": true,  // 是否自动启动模拟器

添加完成之后点击启动即可

问题：

使用HBuilderX 创建的 js  模板不会有问题

直接在此目录下运行即可

但是  使用 脚手架创建的 ts 模板有些问题

这是我们所在的目录结构

运行时候报错

我们发现使用 uniapp run 运行的时候它直接找 my-vue3-project 下的 manifest.json文件

但是我们创建的ts模板 manifest.json文件在src下面 才会产生这样的问题

为了不报错 我们需要手动配置一些内容

首先 

在我们的ts模板目录下面安装

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

并且配置一下 tsconfig.json 文件

{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types","@types/wechat-miniprogram","@uni-helper/uni-app-types"]},"vueCompilerOptions": {"nativeTags": ["block", "component", "template", "slot"]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

 这样我们运行的时候也不会有类型校验的问题

还有一个问题

当我们配置完成之后再次运行 还是报错 因为我们并没有改变运行路径只是修改了类型校验的问题

我们修改我们文件的运行位置将目录进入到src中

再次运行 

成功运行 并且弹出了微信开发者工具

至此 使用vscode 并且使用ts模板的配置 全部完成.