vue如何引入js文件

JavaScript011

vue如何引入js文件,第1张

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在module.exports的最后加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了(测试这一步不用也可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.

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 src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>