vue 引入外部脚本（将脚本单独放在一个js文件中，避免vue文件臃肿）

最新推荐文章于 2024-05-23 17:22:01 发布

cici_cmh

最新推荐文章于 2024-05-23 17:22:01 发布

阅读量3k

点赞数

分类专栏： vue小白炼成记 vue3

本文链接：https://blog.youkuaiyun.com/chpswg/article/details/103047751

版权

vue小白炼成记同时被 2 个专栏收录

28 篇文章

订阅专栏

18 篇文章

订阅专栏

本文介绍如何在Vue项目中将大量方法移到独立的JS文件中进行管理，以避免.vue文件过于庞大。通过export导出函数并在需要的地方import导入，实现代码复用和组织，例如将日期转换和大小写转换等通用方法单独处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.vue文件可以很好的模块化，但是对于从纯js前端转变过来的人可能会有点困难，尤其是习惯了html引入js脚本，在vue文件中，通常将脚本放在method中，但是有的时候如果方法过多，造成vue文件过大不利于管理，尤其是这些方法可能就是纯数据处理，对于组件关系不大，比如日期转换，大小写转换等，可以将其放在一个js文件中，export出去，然后在.vue文件中调用。

demo：

表示基于风速和风向计算其方向和代号值：

/**
 *  
 * 功能：基于站点风的角度值获取方位，如东北、东偏北等
 * 参数：@param {float} degree  站点的角度值
 * @return {String}     
 */
function getWindDirection(degree) {
    var d = "";
    if (11.25 <= parseInt(degree) && parseInt(degree) < 33.75) {
        d = "北偏东";
    } else if (33.75 < parseInt(degree) && parseInt(degree) < 56.25) {
        d = "东北";
    } else if (56.25 < parseInt(degree) && parseInt(degree) < 78.75) {
        d = "东偏北";
    } else if ((78.75 <= parseInt(degree) && parseInt(degree) < 101.25)) {
        d = "东";
    } else if (101.25 <= parseInt(degree) && parseInt(degree) < 123.75) {
        d = "东偏南";
    } else if (123.75 < parseInt(degree) && parseInt(degree) < 146.25) {
        d = "东南";
    } else if (146.25 < parseInt(degree) && parseInt(degree) < 168.75) {
        d = "南偏东";
    } else if ((168.75 <= parseInt(degree) && parseInt(degree) < 191.25)) {
        d = "南";
    } else if (191.25 <= parseInt(degree) && parseInt(degree) < 213.75) {
        d = "南偏西";
    } else if (213.75 < parseInt(degree) && parseInt(degree) < 236.25) {
        d = "西南";
    } else if (236.25 < parseInt(degree) && parseInt(degree) < 258.75) {
        d = "西偏南";
    } else if ((258.75 <= parseInt(degree) && parseInt(degree) < 281.25)) {
        d = "西";
    } else if (281.25 <= parseInt(degree) && parseInt(degree) < 303.75) {
        d = "西偏北";
    } else if (303.75 < parseInt(degree) && parseInt(degree) < 326.25) {
        d = "西北";
    } else if (326.25 < parseInt(degree) && parseInt(degree) < 348.75) {
        d = "北偏西";
    } else {
        d = "北";
    }
    return d;
}


/**
 *  
 * 功能：基于站点风的风力值和角度获得风的key("w-1-2")构造字符串
 * 参数：@param {float} value   站点的风力值
 * 参数：@param {float} degree  站点的角度值
 * @returns
 */
function getWindKey(value, degree) {
    var s, d;
    if (value < 2) {
        s = 0;
    } else if (value >= 2 && value < 3) {
        s = 1;
    } else if (value >= 3 && value < 5) {
        s = 2;
    } else if (value >= 5 && value < 7) {
        s = 3;
    } else if (value >= 7 && value < 13) {
        s = 4;
    } else if (value >= 13 && value < 19) {
        s = 5;
    } else if (value >= 19 && value < 21) {
        s = 6;
    } else {
        s = 7;
    }
    if (11.25 <= parseInt(degree) && parseInt(degree) < 33.75) {
        d = "1";
    } else if (33.75 < parseInt(degree) && parseInt(degree) < 56.25) {
        d = "2";
    } else if (56.25 < parseInt(degree) && parseInt(degree) < 78.75) {
        d = "3";
    } else if ((78.75 <= parseInt(degree) && parseInt(degree) < 101.25)) {
        d = "4";
    } else if (101.25 <= parseInt(degree) && parseInt(degree) < 123.75) {
        d = "5";
    } else if (123.75 < parseInt(degree) && parseInt(degree) < 146.25) {
        d = "6";
    } else if (146.25 < parseInt(degree) && parseInt(degree) < 168.75) {
        d = "7";
    } else if ((168.75 <= parseInt(degree) && parseInt(degree) < 191.25)) {
        d = "8";
    } else if (191.25 <= parseInt(degree) && parseInt(degree) < 213.75) {
        d = "9";
    } else if (213.75 < parseInt(degree) && parseInt(degree) < 236.25) {
        d = "10";
    } else if (236.25 < parseInt(degree) && parseInt(degree) < 258.75) {
        d = "11";
    } else if ((258.75 <= parseInt(degree) && parseInt(degree) < 281.25)) {
        d = "12";
    } else if (281.25 <= parseInt(degree) && parseInt(degree) < 303.75) {
        d = "13";
    } else if (303.75 < parseInt(degree) && parseInt(degree) < 326.25) {
        d = "14";
    } else if (326.25 < parseInt(degree) && parseInt(degree) < 348.75) {
        d = "15";
    } else {
        d = "0";
    }
    return "w-" + s + "-" + d;
}
export {
    getWindDirection,
    getWindKey
};

使用时，在需要的.vue文件中，先import

import {getWindDirection,getWindKey} from "../tempFunc/index.js"; //引入临时脚本地址

然后直接调用方法

	obj1.direct=getWindDirection(list[i][arrEle[6]]);
	obj1.value=[obj1.lon,obj1.lat,obj1.windValue],
    var key=getWindKey(obj1.windValue,obj1.directValue);

这样既可以了，这种方式可以对常用的函数放在一起管理，重复使用