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>