vue-cli引入js代码(适合小白)

在vue-cli中想使用自己写的jQuery代码，无奈不能直接引入jquery，所以在网上找解决办法，如下：
一 ~ 三 是引入jQuery的 $ 符号
四 ~ 六 是为了方便引用，封装了一个js小插件
后面有原文链接，看不懂的可以看原文

一、安装jQuery依赖

npm install jquery --save

二、在vue.config.js文件中加入以下代码

const webpack = require('webpack')
module.exports={
    configureWebpack:{
        plugins:[
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            })
        ]
    }
}

三、引入 $

局部挂载

在使用到jquery的文件中引入以下代码

import $ from ‘jquery’

全局挂载

也可在main.js中全局挂载

import $ from ‘jquery’
Vue.prototype.$ = $

四、包装一个js插件，使用Promise，js加载成功，调用resolve，js加载失败，调用reject

function loadJs(src) {
  return new Promise((resolve,reject)=>{
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src= src;
    document.body.appendChild(script);
      
    script.onload = ()=>{
      resolve();
    }
    script.onerror = ()=>{
      reject();
    }
  })
}
 
export default loadJs

五、创建空js文件

在public文件夹中创建一个空的js文件，如 aaa.js

六、使用

import loadJs from '../../utils/base/loadJs'
   
export default {
    mounted(){
       loadJs('aa.js').then(()=>{
            $(function () {
				var id = $("id")
            })
        })
    }
}

参考文章：https://blog.youkuaiyun.com/maJieweb/article/details/124858149
参考文章：http://t.csdn.cn/DUIg1