摘要:前言最近,为公司开发交付的一个后台管理系统项目,我使用了框架进行开发实践。所以,我希望能够将这些公共的方法,抽离出来放到同一个中,这里就取名。在组件中先引用,再调用公用样式进行抽离复用建一个公共样式文件在中进行全局引用,方法同本文,未完待续
1、前言
最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践。 模块化、组件化、工程化的开发体验非常好。良好的 api,优雅的设计,对于工程师非常友好。 但是由于模块比较多,我对于每个模块分配了不同的组件,发现一个项目中有许多相同的方法, 在每个组件中我都需要进行重复的编写。 所以,我希望能够将这些公共的方法,抽离出来放到同一个 js 中,这里就取名 util.js。2、模型设计 3、实现方法
1、方法一
暴露接口的方式,直接在组件中进行引用
首先在 util.js 多带带文件中写两个方法:
在组件中引用,测试了无法在 main.js 中全局引用(有方法请告诉我):
import {a,b} from "../static/js/util.js"
调用:
test: function() { a(); b(); }
2、方法二:
将公共方法集成到 Vue 原型上,Vue.prototype.name
首先在 util.js 中写方法:
在 main.js 中进行全局引用:
调用:
this.adminApi.a(); this.adminApi.b();
其实我想要实现是这样的,感谢 @wow511287680 留言提供的思路:
// utils.js let utils = { toPath (name) { location.href = "/#/" + name; } }; export { utils } xxx.vue import {utils} from "@/js/utils";
这样,不同对象中分别有不同的方法,分层更加的清晰,可维护性也更高。
在组件中先引用,再调用:
import {obj, obj1} from "../../static/js/utils"
obj.fun1(); obj1.fun1();4、CSS 公用样式进行抽离复用
建一个公共样式 css 文件:
在 main.js 中进行全局引用,方法同 js:
import "./static/css/common.css"
.
..
...
....
本文,未完待续 ... ...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91955.html
摘要:前言最近,为公司开发交付的一个后台管理系统项目,我使用了框架进行开发实践。所以,我希望能够将这些公共的方法,抽离出来放到同一个中,这里就取名。在组件中先引用,再调用公用样式进行抽离复用建一个公共样式文件在中进行全局引用,方法同本文,未完待续 1、前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践。 模块化、组件化、工程化的开发...
摘要:一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多,在等最大的技术社区搜索两者,的搜索结果是的十倍左右,另外据近期统计使用的站点是的几百倍以上。其中是基于技术,依然是浏览器应用。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早,但其在原理上并没有React创新的性能优化...
阅读 3039·2021-10-12 10:12
阅读 1547·2021-09-09 11:39
阅读 1817·2019-08-30 15:44
阅读 2270·2019-08-29 15:23
阅读 2880·2019-08-29 15:18
阅读 2907·2019-08-29 13:02
阅读 2667·2019-08-26 18:36
阅读 711·2019-08-26 12:08