时间:2021-05-26
一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入。
步骤一:main.js导出vue实例
var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/>'})export default vue步骤二、在需要使用的js中引入
import context from '../main.js'context.$router.push('/login')补充:vue项目中引入外部css以及js文件的方法
引入css
<template></template> <style scoped> @import "../assets/common/common.css";</style>引入js
1,在需要的页面引入,
import '../../../static/js/jquery-1.9.1.min.js' //jq插件import util from '../../common/js/util' //自己写的一个js文件。然后可以通过util来引用这个文件里面的函数。比如util.getTime()2,在main.js全局引入,每个页面都可以直接使用不必在调用了
//引入echart import echarts from 'echarts' Vue.prototype.$echarts = echarts然后需要的页面不用引入直接使用 let myChartPie = this.$echarts.init(document.getElementById('chartPie'));
总结
以上所述是小编给大家介绍的vue项目中在外部js文件中直接调用vue实例的方法比如说this,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue使用外部JS与调用原生API操作。分享给大家供大家参考,具体如下:vue使用外部JS概要在开发时我们会经常需要使用到外部的JS,这样我们需要
在vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码。需
学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?一.引入外部CSS样式文件1.在app.vue中下直接引入对应的路径使用@i
最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用script元素标签引入即可。Vue我们也可以这种引入的方式{{name}}constvm=
问题描述:在vue项目中运行npmrundev启动服务器,然而在同一个局域网下的外部设备不能该服务器解决方案:在项目的config文件夹下找到index.js中