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();

其实我想要实现是这样的:

  // 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'

  

  

vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用的更多相关文章

  1. vue中添加util公共方法&&ES6之import、export

    vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...

  2. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  3. vue中push()和splice()的使用方法

    vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...

  4. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  5. 使用fiddler将网站上的css js重定向至本地文件

    使用fiddler将网站上的css js重定向至本地文件,进行在线调试 https://github.com/annnhan/ReRes 1条回复 这是一篇写给公司负责切图和调样式的前端的文章.主要适 ...

  6. 如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?

    如何在PIXI.js里面使用json文件来管理瓦片集(tileset)? PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json ...

  7. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  8. 用Vue中遇到的问题和处理方法(一)

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  9. 用Vue中遇到的问题和处理方法

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

随机推荐

  1. windows 中java开发环境搭建

    安装jdk1.6 1.下载tomcat服务器 2. 解压缩tomcat  * 不要使用含有空格和中文目录 3.启动tomcat之前 配置 JAVA_HOME 环境变量 ------ 配置JDK安装路径 ...

  2. 转载:Eureka 开发时快速剔除失效服务

    原文地址:https://www.cnblogs.com/flying607/p/8494568.html 服务端配置: # 关闭保护机制 eureka.server.enable-self-pres ...

  3. liux三剑客grep 正则匹配

    001正则匹配(大部分需要转义) ‘^‘: 锚定行首 '$' : 锚定行尾 [0-9] 一个数字 [^0-9] 除去数字所有,^出现在[]这里表示取反 [a-z] [A-Z] [a-Z] \s 匹配空 ...

  4. Java编制至今总结和学习报告

    日期:2018.8.19 星期日 博客期:006 说个事,本来想把博客园做一个交流平台的,可是交流度有点少...嗯...我看我还是把这个平台当作经验传授平台和自己的作品发布平台吧!Java的知识详解, ...

  5. 操作dom获取datatable中的某一行的某一列的数据

    需求描述:编辑的时候,点击的那一行,进入后台的验证方法,验证通过后,再进入编辑页面,进入的时候需要把本行<tr>数据中的某一列<td>的值传递过去 思路表述:之前我想的是,给列 ...

  6. 《剑指offer》栈的插入弹出序列

    本题来自<剑指offer> 栈的插入弹出序列 题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2, ...

  7. 《剑指offer》重建二叉树

    本题来自<剑指offer> 重构二叉树 题目: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2 ...

  8. 使用react 在页面上引用静态图片,图片不显示

    const url='../assets/logo.png'; <img src={url} alt=''/> 1.使用require <img src={require('../a ...

  9. cf1144E 假高精度平均数

    /* 先一轮求和,再一轮做除法 */ #include<bits/stdc++.h> using namespace std; ],s2[]; ],n; int main(){ cin&g ...

  10. Java Insets获取窗口的顶、底、左、右的大小

    import java.awt.Insets; import javax.swing.JFrame; public class NewFrame { public static void main(S ...