easycom 的使用

参考官网 easycom

示例:

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

使用路径规范:

1. 可直接使用组件:
   uniapp 框架提供了一种组件自动注册机制，只要你在 components 文件夹下新建的组件满足 /components/组件名/组件名.vue 的命名规范，就能直接使用.

注意:
1. 这种组件自动注册机制叫做 easycom，它可以自动扫描指定目录下的所有组件，并注册到全局组件中。
2. 组件命名必须是小写字母，使用短横线连接单词。例如：hello-world。
3. easycom 支持多种规则，我们可以在 pages.json 文件里面自定义 easycom 规则。

2. 自定义 easycom 规则:
   在 pages.json 里面配置 easycom 属性，其中 autoscan 表示自动扫描，custom 表示自定义规则。注意: $1 表示可变参数
   WeChatcf36533e557775ca1bffd857da483a1a.jpg

"easycom": {
    "autoscan": true,
    "custom": {
        "user-(.*)": "@/components/user/user-$1.vue",
        "order-(.*)": "@/components/order/order-$1.vue" 
    }
},

3. 在同一父文件下面

WeChatd13df44351ef1741592518416f941262.jpg WeChat244bcc05f6d378f0f8c4f06709d645ac.jpg

真实示例:

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

"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-1.vue"**

WechatIMG367.jpg

"^Xtx(.*)": "@/components/Xtx$1.vue"

WechatIMG366.jpg