Generally, we introduce vue in it, and then use this directly in the vue file (this points to a vue instance). However, in actual development, we often introduce external js files to use this, and this will point to window, which is not the vue instance we expect, so we need to reintroduce the vue file (import Vue from 'vue'), which is very troublesome. The method I use in the current project is to export the vue instance and then introduce it in the js that need to be used.
Step 1: Export vue instance
var vue = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
export default vue
Step 2: Introduce in js that need to be used
import context from '../'
context.$('/login')
Supplement: Methods to introduce external css and js files in vue project
Introduce css
<template></template> <style scoped> @import "../assets/common/"; </style>
Introduce js
1. Introduce on the required page,
import '../../../static/js/jquery-1.9.' //jq pluginimport util from '../../common/js/util' //One written by myselfjsdocument。Then it can passutil来引用这个document里面的函数。for example()
2. In global introduction, each page can be used directly without having to call it
//Introduce echart import echarts from 'echarts' .$echarts = echarts
Then use the required pages without introducing them let myChartPie = this.$(('chartPie'));
Summarize
The above is the method of calling vue instances directly in external js files in the vue project introduced by the editor. For example, this is hoped to be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!