我们知道，创建uniapp项目有两种方式
1、通过HBuilder X进行可视化项目创建，优点是可以任意选择模板，比如uni-ui，这样就可以快速的搭建一套集成uni-ui的项目工程，也不需要nodejs环境，但是缺点也是无法支持强类型校验
2、通过vue-cli命令方式创建，这种方式创建的项目就和我们平时做的工程化项目比较类似，我在前文讲过该如何通过cli创建一个uniapp项目，这里就不再赘述，这种方式创建项目的缺点就是需要手动安装一些插件和第三方ui库，虽然麻烦，但是我们应该更熟悉这种操作，不是么？说干就干：
第一步，安装uni-ui
官网地址：zh.uniapp.dcloud.io/component/u…
执行命令：
npm i @dcloudio/uni-ui
第二步，自动导入uni-ui
uni-ui提供了一个很方便的自动导入方式，是通过正则匹配进行按需导入，官网也有详细介绍
page.json
//组件自动引入规则
"easycom": {
//是否开启自动扫描
"autoscan": true,
//以正则方式自定义组件匹配规则
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
在page.json中配置好后，我们就可以在页面中使用uni-ui组件
我们引入uni-card,就会根据正则匹配到@dcloudio/uni-ui/lib/uni-card/uni-card.vue
第三步，类型校验
uni-ui是用js开发的，并没有升级到ts，官方提供的uni-ui组件库并没有类型声明文件，好消息是，已经有热心的大神，给uni-ui开发除了匹配的类型声明文件：
@uni-helper/uni-ui-types
我们安装一下：
npm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
安装成功后，在tsconfig.json中配置一下：
配置完成后，我们回到页面中，把鼠标悬停在刚刚引入的uni-card上：
组件就被识别出来了。
