Vue全局引入JS的方法

左手的ㄟ右手 2021-12-11 21:19 478阅读 0赞

两种情况：

**1. js为ES5的写法时，如下（自定义的my.js）:**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>function</code>&nbsp;<code>fun(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'hello'</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;script src=</code><code>"src/models/my.js"</code><code>&gt;&lt;/script&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**2. js为 ES6 模块化写法时，即 import，export形式，如下：**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>fun=</code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'hello'</code><code>);</code></p> <p><code>}</code></p> <p><code>export</code>&nbsp;<code>default</code>&nbsp;<code>fun;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>import</code>&nbsp;<code>fun from&nbsp;</code><code>'src/models/my.js'</code><code>;</code></p> <p><code>Vue.prototype.$xx=fun;&nbsp;&nbsp;</code><code>//其中$xx为新命的名。</code></p> </td> 
  </tr> 
 </tbody> 
</table>

使用方法为，在要调用的地方使用如下代码调用：

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

**原文：**[https://www.cnblogs.com/zhcBlog/p/9892883.html][https_www.cnblogs.com_zhcBlog_p_9892883.html]

[https_www.cnblogs.com_zhcBlog_p_9892883.html]: https://www.cnblogs.com/zhcBlog/p/9892883.html