Vue全局引入JS的方法

两种情况:

1. js为ES5的写法时,如下(自定义的my.js):

function fun(){
    console.log(‘hello‘);
}

 Vue中的全局引入方式为,在index.html中通过如下方式引入即可:

<script src="src/models/my.js"></script>

2. js为 ES6 模块化写法时,即 import,export形式,如下:

var fun=function(){
    console.log(‘hello‘);
}
export default fun;

 Vue中全局引入的方式为,在main.js中添加如下代码:

import fun from ‘src/models/my.js‘;
Vue.prototype.$xx=fun;  //其中$xx为新命的名。

 使用方法为,在要调用的地方使用如下代码调用:

var aa=this.$xx;

  注意,模块化引入方式时,要引入的 js export的值只可为一个,若多余一个如 export {var1,var2,...} 则不可使用这种方式 (经验证无效)。

原文地址:https://www.cnblogs.com/zhcBlog/p/9892883.html

时间: 2024-08-01 11:38:35

Vue全局引入JS的方法的相关文章

webpack全局引入jquery的方法

全局引入jquery后,就能使用jquery的API和插件了,网上有好几种方法,这里推荐'expose-loader'这种方法,包括以下两部: 1.配置webpack.config.js文件.下图红框中的 test 是匹配jquery的路径,loader 是将jquery作为window.jQuery 和 window.$ 暴露到全局. 2.在需要导入的模块中(比如 index.js)正确导入:见下图

vue中引入awesomeswiper的方法以及编写轮播组件

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"

vue全局引入scss文件(推荐)

<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style src="./assets/base.scss" lang="scss"> </style> 直接在app.

vue中引入外部文件js、css、img的方法

第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import方式引入,被引入文件test.js尾部加入 export default {    fn   }  //fn是被引入的方法:在main.js引入  import test from './assets/js/test.js'       Vue.prototype.$test= test; 全局引入

详解vue全局组件与局部组件使用方法

这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' im

Vue.js(25)之 vue全局配置api介绍

本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com/vue/vue-extend.html   1 vue在创建vue实例会经过以下四个过程: 使用vue.extend创建实例也是相似的: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

vue导入外部js文件的方法

1.将需要引入的外部js文件,改成下图的格式,将需要引入的内容放在一个函数内,并通过export暴露出来.  2.在vue里引入该模块 通过import引入,然后写入方法里,再按需求调用 原文地址:https://www.cnblogs.com/webwangjie/p/10950808.html

vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './assets/css.css' src/assets/scss.scss $border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; } 第一步:安装依赖 cnpm install node-sass --sa

vue按需引入/全局引入echarts

npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 import echarts from 'echarts/lib/echarts' // 再引入你需要使用的图表类型,标题,提示信息等 import 'echarts/lib/chart/bar' import 'echarts/lib/component/legend' import 'echar