vue-cli为了ueditor 引入jquery

Background :

Ueditor “单图片上传”在加载到vue-cli后，并不能工作，返回error "$ is not an available function" error message没copy下来，反正大概意思是$找不到该function。

查看ueditor js 后可以知道, ueditor使用了 $.ajax 的 jquery 方法。

            // 判断文件格式是否错误
            var filename = input.value,
              fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
            if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
              showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
              return;
            }

            var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
            var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
            var formData = new FormData();
            formData.append("upfile", form[0].files[0] );
            $.ajax({
              url: action,
              type: 'POST',

所以，我们需要引入jquery.

1、首先在package.json里加入，

dependencies:{
 "jquery" : "^2.2.3"
}

2、安装依赖

npm install jquery --save-dev

3、在webpack.base.conf.js里加入

var webpack = require("webpack")
4、在module.exports的最后加入

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

5、重启cpm run dev



6、在main.js 引入就ok了

import $ from 'jquery'

Vue.use($)