如何在.vue文件中引入外部js vue怎么导入自己写的js文件

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

Vue 的 createElement 方法，简单的封装一个组件解决问题。

解决方法
第一版代码（直接在操作 Dom ）如下：
export default {
mounted() {
const s = document.createElement(script)
s.type = text/javascript
s.src = https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js
document.body.appendChild(s)
},
}
使用 createElement 方法：
export default {
components: {
dingtalk: {
render(createElement) {
return createElement(
script,
{
attrs: {
type: text/javascript,
src: https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js,
},
},
)
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 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>

vue怎么导入自己写的js文件

1. 首先我们要改变我们要映入的外部js文件，改成以下这个格式。



代码：<pre class="html">function realconsole(){ alert("hello.thanks use me") } export { realconsole } </pre>
2. 到我们的寄主那里，我们需要导入仿造的文件，方法是这样的：



代码：<pre class="html">&lttemplate&gt &ltdiv class="teslist"&gt &ltbutton @click="methods1"&gt显示console&lt/button&gt &lt/div&gt &lt/template&gt &ltscript src="../../lib/myconsole.js"&gt&lt/script&gt &ltscript&gt import { realconsole } from ../../lib/myconsole.js export default { methods:{methods1:function(){ realconsole() } }} &lt/script&gt &ltstyle&gt .teslist { } &lt/style&gt</pre>
注意红色叉的部分，那是我们es5的写法，绿色才是正确的，下面是效果图

vue文件里面怎么引用外部的js文件

vue-loader么... 如果是vue-loader可以通过 require来引来入就可以源比如知Js文件写到assets/js中 在main.js中可以 require(./src/assets/xxx.js) 如果道只是单页面html,可以直接引入就行了

vuejs 怎么引入第三方js

在 Vue.js 中使用第三方库的方式有：
1.全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require(lodash)
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? Lodash everywhere! : Uh oh..)
}
}
这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

2.在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from lodash

export default {
created() {
console.log(_.isEmpty() ? Lodash is available here! : Uh oh..)
}
}

vuejs 怎么引入自己写的js

Vue.directive(my-directive, {
deep: true,
update: function (obj) {
// 在 `obj` 的嵌套属性变化时调用
}
})