您好,欢迎来到测品娱乐。
搜索
您的当前位置:首页uniapp—封装多个全局组件,推荐使用easycom

uniapp—封装多个全局组件,推荐使用easycom

来源:测品娱乐

写在前面:
随着项目的开发,抽离的公共组件越多,为了方便引用,直接在main.js文件内全局注册;为了mian.js文件代码整洁,编者就在组件所在的文件夹下创建了index.js,在这里统一注册,然后在main文件内引入,再Vue.use()。到这里就踩坑了,浏览器模拟是生效的,但是真机调试时就会报
Not found -1,16 at view.umd.min.js:1, 搜索到uniapp Vue.use() 注册自定义组件库无效的帖子,就转变了思路,发现有提供easycom方法。
技术栈:
vue2,uniapp
正文:
vue页面内按需引入不再赘述

一、全局组件较少,单个在main.js文件引入

main.js文件

import Vue from "vue";
import App from "./App";
 // 引入组件  
import noNetwork from "./components/no-network/no-network.vue";
// 注册
Vue.component("no-network",noNetwork);

App.mpType = "app";
const app = new Vue({
  ...App,
});

app.$mount();

在目标vue文件中直接使用

<no-net-work/>

二、多个组件统一引入(APP端错误示范,H5可以)

在所有组件的父文件夹下创建index.js

index.js内容如下:

三、使用uniapp官方的easycom注册多个组件


官网写的很清楚,从自己开发的组件这方面说,总结两点:
1.文件位置:放在根节点的components文件夹下;
2.文件命名:所有的组件要用同名文件夹包裹 ,为了统一最好使用相同的前缀,例 uni-,。

从开发者层面来看,全局无需注册直接使用,但是官网指出easycom是按需引入。手动👍

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- cepb.cn 版权所有 湘ICP备2022005869号-7

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务