1、vue-cli webpack全局引入jquery
(1) 首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。)
(2)在webpack.base.conf.js里加入
var webpack = require("webpack")
(3)在mole.exports的最後加入
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]
(4) 在main.js 引入就ok了 (測試這一步不用也可以)
import $ from 'jquery'
(5)然後 npm run dev 就可以在頁面中直接用$ 了.
2、vue組件引用外部js的方法
項目結構如圖:
content組件代碼：
<template> <div> <input ref='test' id="test"> <button @click='diyfun'>Click</button> </div></template><script>import {myfun} from './js/test.js' //注意路徑export default { data () { return { testvalue: '' } }, methods:{ diyfun:function(){ myfun(); } }}</script>
test.js代碼：
function myfun() {console.log('Success')}export { //很關鍵 myfun}
用到了es6的語法。
3、單vue頁面引用內部js方法
(1) 首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。)
(2) 在需要引用的vue頁面import引入$,然後使用即可
這個圖中有黃色的警告，如果把console.log($)改成這樣:
export default{ mounted: function(){ console.log($) }}
就不會有了，原因可能是得符合vue中js的寫法吧
總結
2. vue-cli中webpack把js文件引入index.html的過程
深入理解 Vue CLI 中 webpack 如何將 JS 文件引入 index.html 的過程，對於 Vue 開發者來說至關重要。本文將詳細解析這一過程，以便幫助開發者更好地掌握 Vue CLI 的工作原理。
在 Vue CLI 項目中，我們通常會發現 index.html 文件中並沒有直接包含任何 JS 文件。這是因為 Vue CLI 使用 webpack 進行構建時，自動處理了 JS 文件的引入。在執行 `npm run build` 命令後，webpack 會將項目打包至 `dist` 目錄下，實現 JS 文件的自動引入。
讓我們從生產環境下的項目結構入手。執行 `npm run build` 後，可以發現項目被打包至 `dist` 目錄下，這個過程實際上是通過 `npm run build` 執行的 `node build/build.js` 腳本來完成的。在 `build.js` 文件中，引入了 webpack，並調用了 `webpack` 函數，將打包配置 `webpackConfig` 作為參數。
關鍵在於理解 `webpackConfig` 的配置，它由 `./webpack.prod.conf` 文件提供。這個文件包含了多個插件的配置，其中 `webpack-html-plugin` 插件尤為關鍵，它負責自動將 JS 文件引入到 `index.html` 文件中。具體來說，`webpackConfig` 實際上是一個合並配置對象，其中包含了 `baseWebpackConfig` 的配置和額外的配置項。
在 `baseWebpackConfig` 中，通常會包含一個 `entry` 屬性，用於指定入口文件。對於 Vue 項目，這通常指向 `src/main.js`。通過 `merge` 函數，配置對象被合並，使得 `main.js` 被正確引入到 `index.html` 中。
理解到這里，我們大致了解了 Vue CLI 如何通過 webpack 將 JS 文件自動引入 `index.html`。這一過程涉及多個配置文件、插件以及合並函數的使用，體現了 webpack 強大的自動化構建能力。通過這個過程，開發者能夠更加專注於 Vue 代碼的編寫，而無需過多關注底層構建細節。
3. vue項目中如何引入外部js文件有什麼需要注意的地方
在Vue項目中引入外部js文件，有多種方式，每種方法都有其適用場景。首先，直接在Vue項目的index.html中使用全局引入方法，例如：
這種方式簡單直接，但可能導致不必要的組件載入，特別是當目標js插件僅在部分組件中使用時。
其次，如果下載的文件為本地靜態文件，可以使用import方法導入。
然而，這種策略只適用於已下載的靜態文件，靈活性受限。
第三，通過Vue組件載入後，手動操作DOM插入js插件，實現特定組件內的js引入。
這種方式直接操作DOM，確保僅在當前組件中載入所需插件，避免全局影響。
第四，採用Vue的render方法，提供了一種更靈活的方式管理組件結構和引入js。
第五，高階策略是將手動DOM操作包裝為js插件，利用Promise確保js載入成功或失敗時的處理邏輯。
最後，更高級的實踐是動態替換要載入的js文件，通過創建一個importJs.js插件，實現根據需求動態載入不同js文件。
總結而言，Vue項目中引入外部js文件時，需根據具體需求選擇合適的方法，確保資源高效利用且不造成全局影響。使用上述方法，開發者可根據項目的復雜度和特定需求，靈活地引入、管理及替換js文件，優化項目性能與開發效率。
4. 如何在.vue文件中引入外部js
在Vue項目中引入外部javaScript文件，可以採用直接操作DOM的方法，也可以通過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',
},
},
);
},
},
},
}
這樣的封裝方式使得外部JavaScript文件的引入變得更加靈活和易於管理。
為了進一步提升代碼的通用性和復用性，可以封裝一個通用組件remote-js，用於引入任何外部JavaScript文件。示例如下：
export default {
components: {
'remote-js': {
render(createElement) {
return createElement(
'script', {
attrs: {
type: 'text/javascript',
src: this.src,
},
},
);
},
props: {
src: {
type: String,
required: true,
},
},
},
},
}
通過使用這個組件，只需傳入src屬性即可引入外部JavaScript文件，使用方法如下：
remote-js>