前端框架Vue（9）——vue 中如何对公共css、 js 方法进行单文件统一管理，全局调用

hot_pot_Leo 发布于2019-08-22 11:11 / 3215人阅读

摘要：前言最近，为公司开发交付的一个后台管理系统项目，我使用了框架进行开发实践。所以，我希望能够将这些公共的方法，抽离出来放到同一个中，这里就取名。在组件中先引用，再调用公用样式进行抽离复用建一个公共样式文件在中进行全局引用，方法同本文，未完待续

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"

.
..
...
....

本文，未完待续 ... ...

GPU云服务器云服务器 vue中调用js vue中 php中如何调用方法 vue 中使用 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91955.html

前端框架Vue（9）——vue 中如何对公共css、 js 方法进行单文件统一管理，全局调用

摘要：前言最近，为公司开发交付的一个后台管理系统项目，我使用了框架进行开发实践。所以，我希望能够将这些公共的方法，抽离出来放到同一个中，这里就取名。在组件中先引用，再调用公用样式进行抽离复用建一个公共样式文件在中进行全局引用，方法同本文，未完待续 1、前言最近，为公司开发交付的一个后台管理系统项目，我使用了 Vue 框架进行开发实践。模块化、组件化、工程化的开发...

asce1885 2019-08-29 13:29 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0