vue-引入外部js文件的方法和常量

本文详细介绍如何在JavaScript中使用模块化编程,包括函数的定义与调用,以及常量的引用方法。通过具体示例展示了如何从一个JS文件中导入并使用函数,以及如何在另一个文件中引用和使用常量。

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

1、方法调用 

a:  js文件(static/js/public.js)

1

2

3

4

//函数的定义  返回上一页

export function goback(laststep) { 

  laststep

} 

b: 调用

1

2

3

4

5

6

7

8

9

10

import {goback} from 'static/js/public.js'//记得带上{}花括号

 

methods:{

    _goback(){

        goback(this.$router.go(-1));

    }

 

}

 

<span class="gobakc" @click="_goback"></span>   

2、常量引用  

a:文件 static/js/publicstate.js

1

2

3

4

5

6

const staticimg='../../../../static/images/';

export default

  {

  staticimg,

 

  }  

b: import commonstate from 'static/js/publicstate.js'//引用模块进来

1

2

3

4

5

6

7

data(){

    return {

        imgsrc:commonstate.staticimg,

    }

}

 

 <p>wrww{{imgsrc}}</p>

Vue项目中引入外部JavaScript库是常见的需求,这不仅关系到代码的组织结构,也影响到项目构建的效率最终产出的性能。对于ES6模块,推荐使用`import`语句来引入,这符合ES6的模块化规范,便于管理维护。而对于不支持ES6模块系统的库或插件,如jQuery,则推荐使用CDN或将其放置在静态资源目录中。 参考资源链接:[Vue.js的两种外部JS引用方法详解](https://wenku.youkuaiyun.com/doc/6401ac51cce7214c316eb683?spm=1055.2569.3001.10343) 当你使用Vue CLI 3.0或其他基于Webpack的脚手架构建项目时,可以通过修改`main.js`或相应的入口文件来实现模块的导入。对于ES6模块,例如: ```javascript import { someFunction } from './path/to/your/some-module.js'; // 假设some-module.js是ES6模块 ``` 在这里,`someFunction`是你要从`some-module.js`中导入的函数或常量。使用`import`语句可以直接引入你需要的功能模块,这样做的好处是编译时会自动处理依赖关系,提高代码的可读性可维护性。 对于非ES6库,如jQuery,你可以通过CDN或在`index.html`中添加`<script>`标签来引入。使用CDN的好处是减少了服务器的负载,同时利用CDN提供的缓存机制提升访问速度稳定性。例如: ```html <script src= 参考资源链接:[Vue.js的两种外部JS引用方法详解](https://wenku.youkuaiyun.com/doc/6401ac51cce7214c316eb683?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值