如何將外部js導入vue實例（vuejs引入方式）

本文目錄一覽：

• 1、vue文件裡面怎麼引用外部的js文件
• 2、vue怎麼導入自己寫的js文件？
• 3、vue文件裡面怎麼引用外部的js文件？
• 4、如何在.vue文件中引入外部js
• 5、vue文件裡面怎麼引用外部的js文件並調用

vue文件裡面怎麼引用外部的js文件

vue-loader么… 如果是vue-loader可以通過 require來引入就可以 比如Js文件寫到assets/js中 在main.js中可以 require(‘./src/assets/xxx.js’) 如果只是單頁面html,可以直接引入就行了

vue怎麼導入自己寫的js文件？

1. 首先我們要改變我們要映入的外部js文件，改成以下這個格式。

代碼：pre class=”html”function realconsole(){ alert(“hello.thanks use me”); } export { realconsole } /pre

2. 到我們的寄主那裡，我們需要導入仿造的文件，方法是這樣的：

代碼：pre class=”html”lt;templategt; lt;div class=”teslist”gt; lt;button @click=”methods1″gt;顯示consolelt;/buttongt; lt;/divgt; lt;/templategt; lt;script src=”../../lib/myconsole.js”gt;lt;/scriptgt; lt;scriptgt; import { realconsole } from ‘../../lib/myconsole.js’ export default { methods:{methods1:function(){ realconsole(); } }} lt;/scriptgt; lt;stylegt; .teslist { } lt;/stylegt;/pre

注意紅色叉的部分，那是我們es5的寫法，綠色才是正確的，下面是效果圖

vue文件裡面怎麼引用外部的js文件？

步驟：

首先。我們要改造我們要映入的外部js文件，改成下面這個格式。主要是紅色方塊內部代碼，我們需要將我們的模塊「拋出」，讓人能獲取到以下及相應代碼：

其次，到我們的寄主那裡，我們需要導入，仿造其他的文件，寫法如下及相應代碼：

注意紅色叉的部分，那是我們es5的寫法，綠色才是正確的；接著是效果圖：

其他方法：直接@import就行了

style

@import “../../scss/retinaLine”;

@import “../../scss/css3Module”;

…

/style

如何在.vue文件中引入外部js

Vue 的 createElement 方法，簡單的封裝一個組件解決問題。

解決方法

第一版代碼（直接在操作 Dom ）如下：

export default {

mounted() {

const s = document.createElement(‘script’);

s.type = ‘text/javascript’;

s.src = ”;

document.body.appendChild(s);

},

}

使用 createElement 方法：

export default {

components: {

‘dingtalk’: {

render(createElement) {

return createElement(

‘script’,

{

attrs: {

type: ‘text/javascript’,

src: ”,

},

},

);

},

},

},

}

// 使用在頁面中調用

終極方案

通過封裝一個組件 remote-js 實現：

export default {

components: {

‘remote-js’: {

render(createElement) {

return createElement(‘script’, { attrs: { type: ‘text/javascript’, src: this.src }});

},

props: {

src: { type: String, required: true },

},

},

},

}

使用方法：

remote-js src=””remote-js

vue文件裡面怎麼引用外部的js文件並調用

可以通過npm安裝的就安裝，在通過Vue.use()插入到vue里使用；如果想單個頁面使用的就在使用的.vue頁面通過import導入並使用。