Home >Web Front-end >JS Tutorial >What are the ways to introduce js files in vue

What are the ways to introduce js files in vue

清浅Original: 2019-05-05 13:21:4839829browse

Several methods of introducing JS files into VUE projects

When developing Vue projects, sometimes you need to use Some non-ES6 format js libraries without export can be implemented in the following ways:

1. Use the script tag on the index.html page to introduce

. Of course, you can also use The address of the cdn. The content imported in this way is global and can be used everywhere.

<!DOCTYPE html>
 <html>
<head>
      <title>Map</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"/>
      <script src=&#39;./static/libs/three/three.min.js&#39;></script>
      <script src="./static/libs/three/GLTFLoader.js"></script>
   </head>
   <body>
     <p id="app"></p>
     <!-- built files will be auto injected -->
   </body></html>

2. Use window.moduleName in main.js. Use

or put it into Vue.prototype, so that it can be used in the component.

var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

3. Manually add export

Put export default { /**Method to export**/} for the methods that need to be used in the js library, and then import {*} from Use

in the JS library:

function realconsole(){  
    alert("hello world!");  }  
 export {  
     realconsole }

In the components that need to use the JS library:

import realconsole from &#39;./xxx&#39;

4. Use the import method to add the required The method in the js library is mounted to the global

as follows:

 import &#39;@static/libs/GLTFLoader&#39; 
 // 可以从全局获取导入的方法 
 let GLTFLoader = THREE.GLTFLoader

Related recommendations:

2020 front-end vue Summary of interview questions (with answers)

vue tutorial recommendation: 2020’s latest 5 vue.js video tutorial selections

More For programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What are the ways to introduce js files in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What can javascript do?Next article：What can javascript do?

See more

What are the ways to introduce js files in vue

Related articles