㈠ vue中怎麼使用原生js插件
在Vue.js中使用jquery插件需要利用 ProvidePlugin導入jquery全局庫。 1、在內build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可容
㈡ VUE.JS怎麼在組件內使用第三方的插件
引入jQuery
通過npm安裝依賴引入
1、安裝
```
npm install jquery -S
```1234
2、修改webpack配置文件
build/webpack.base.conf.js
...var webpack = require("webpack") // 1. 確保引入 webpack，後面會用到
mole.exports = { ...
resolve: {
extensions: ['.js', '.vue', '.json'],
moles: [
resolve('src'),
resolve('node_moles')
],
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'),
// 2. 定義別名和插件位置 'jquery': 'jquery'
}
},
plugins: [
// 3. 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery", "window.jQuery": "jquery"
})
]
}
手動載入
手動下載jquery 放在static 目錄下，如：static/js/jquery.min.js
和npm不同的只是在第二步定義別名和插件位置：
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // 2. 定義別名和插件位置
"jquery": path.resolve(__dirname, '../static/js/jquery.min.js')
}12345678
引入jquery第三方插件
可以通過npm安裝的插件
這種引入第三方插件的方法和上一節種引入echarts的方法是一樣的
手動引入
㈢ 如何在.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 src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>
㈣ 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..');
}
}