机器学习 casting ionic3 jtable underscorejs 后台管理模板下载 lora开发 SketchUp python环境配置 python中items python基本语法 python中time python支持中文 python代码 java操作mysql java在线课程 java学习文档 java替换字符串 java接口开发 java接口规范 bcdautofix qq飞车剧情辅助 三维看图软件 idataparameter 16进制编辑器 无限视距 jsp源代码 一键root软件下载 js字符串转数字 人物建模教程 c4d克隆 外景拍照姿势 打印机暂停 视频采集软件 凯立德地图包下载 ap天赋 缝合二世 大虫子天赋 ppt怎么删除文本框 老人手机哪款最好
当前位置: 首页 > 学习教程  > 编程语言

Vue封装的组件全局注册-动力节点

2020/10/16 17:48:35 文章标签:

当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。 每当我们需要修改的时候,只需维护那一个功能性…

当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。
每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可。
那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入)。
(注:这里指的是把组件封装到项目中,而不是封装组件库)
如何封装组件就不多赘述了。
参考vue官网的做法:vue官网全局注册
1、正则判断路径以及文件名,获取全部组件并全局注册(可以直接在main.js里写,但是为了规范以及后期可维护性,我们新建个单独的的js文件写入)
(1)main.js引入所有自定义封装的组件
import Vue from ‘vue’;
import App from ‘./App.vue’;
import router from ‘./router’;
import store from ‘./store’;
import ‘./plugins/element’;
// 引入所有自定义封装的组件
import ‘./components/CommonCommponts/GlobalComponents’;

function vue() {
new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’);
}
startup(vue, router);

(2)、全局组件的GlobalComponents.js(参考vue官网提供的做法)
这里需要安装2个插件upperFirst和camelCase
下面是组件相对于这个文件的路径,因为我的封装组件和这个js文件在同一级,所以直接 . 就可以了。
然后是是否查询子目录,即这个路径下你又新建了文件夹,把各个组件区分开,那么就会嵌套很多层,查询子目录可以方便的使我们找到它们。
然后是正则表达式,因为我的所有组件名都是Rdapp开头的,这里看大家的文件命名,不需要的话删除前面的Rdapp即可。
然后下面的部分就可以不用动了。
import Vue from ‘vue’;
import upperFirst from ‘lodash/upperFirst’;
import camelCase from ‘lodash/camelCase’;

const requireComponent = require.context(
// 其组件目录的相对路径
‘.’,
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/Rdapp[A-Z]\w+.(vue|js)$/,
);

requireComponent.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponent(fileName);

// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split(’/’)
.pop()
.replace(/.\w+$/, ‘’),
),
);

// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 export default 导出的,
// 那么就会优先使用 .default
// 否则回退到使用模块的根。
componentConfig.default || componentConfig,
);
});

上面这段代码的核心就是通过require.context找到指定目录下的所有文件并全部引入,然后通过循环拿到对应的组件并进行注册


本文链接: http://www.dtmao.cc/news_show_300193.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?