一，在HB编辑器中用命令行创建uniapp项目（vite+vue3+TS)

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

注意：搭梯子在创建或者连手机网络创建，按官方提示的下载模板也行。

在HB编辑器中安装vue3插件

---

二，在vscode中导入uniapp项目

导入项目之后，再安装开发所需要的插件

---

三、TS类型校验

1，安装类型声明文件

npm  i -D @types/wechat-miniprogram @uni-helper/uni-app-types
// 小程序和uniapp的声明类型

2，配置 tsconfig,json

{
	"compilerOptions": {
		"types": [
			"@dcloudio/types",
 			"@types/wechat-miniprogram",
 			"@uni-helper/uni-app-types"
		]
	},
 	"vueCompilerOptions": {
 		"nativeTags": ["block", "component", "template", "slot"]
 	}
}

---

四、json 注释问题

1，打开设置

2，搜索框输入文件关联，添加项

---

五、引入uni-ui组件库

1，安装uni-ui

npm i @dcloudio/uni-ui

2，配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

详细请查看uniapp官方文档：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

3，配置uni-ui组件类型声明

3.1 安装依赖

npm i -D @uni-helper/uni-ui-types

3.2 配置依赖

---