uni-app：配置通用组件自动导入

https://uniapp.dcloud.net.cn/collocation/pages.html#easycom

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要符合路径规范，就可以自动导入

路径规范：

• 安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue

• 安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

如果要自动导入的组件不符合路径规范，可以定制

在项目的pages.json文件中配置easycom，在它的下面使用custom来定制，例如：

  // 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置  
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 以Xtx开头的组件,在 components 文件夹中查找引入
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }
  },

注意：直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发；当然，也可以手工重新运行编译命令，例如编译成微信小程序：pnpm dev:mp-weixin

加上ts类型提示

https://www.bilibili.com/video/BV1Bp4y1379L/?p=14&vd_source=5ccd106cda18d778b6b1ecebef66af7b

https://vuejs.org/guide/extras/web-components.html#web-components-and-typescript

如果使用ts，尽管可以定制自动导入自定义的组件，但还不支持ts的类型识别。例如XtxSwiper这个组件还没有显示为绿色：

为了能识别ts类型，就需要增加类型声明文件。在components目录下新建一个components.d.ts文件，内容如下：

现在XtxSwiper变为绿色了，可以识别ts类型了：

鼠标放上去，给出了提示：