vuecli3集成easyui

思路是这样的，首先要将jquery设置成全局，然后就可以正常使用easyUI了。

jquery安装命令：

npm install --save jquery

jquery-easyui安装命令：

npm install --save jquery-easyui

然后，重点是项目中的各个环节。

首先，在根目录(package.json目录)下新建两个文件，babel.config.js和vue.config.js

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

vue.config.js

var webpack = require("webpack");

const Timestamp = new Date().getTime();

module.exports = {
    configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
        resolve: {
            alias: {
                'jquery': 'jquery'
            } // 别名配置
        },
        plugins: [
          new webpack.ProvidePlugin({
            $:"jquery",
            jQuery:"jquery",
            "windows.jQuery":"jquery"
          })
        ]
    },
    devServer: {
        overlay: {
            warnings: false,
            errors: false
        }
    }
}

这两个文件完成之后，需要再main.js中引入jquery。

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueResource from 'vue-resource'
import router from './router'
import App from './App.vue'
import store from './store/store.js'
import Cookie from "js-cookie"
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import VueClipboards from 'vue-clipboards';
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
import $ from 'jquery'
import easyui from 'jquery-easyui/js/jquery.easyui.min.js'
import 'jquery-easyui/css/easyui.css'

Vue.config.productionTip = false;
Vue.prototype.$ = $;
Vue.prototype.jQuery = $;

Vue.use(ElementUI)
Vue.use(VueResource)
Vue.use(iView)
Vue.use(VueClipboards)
Vue.use(easyui)

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

router.beforeEach(function(to, from, next){
  if(to.name != null && to.name != 'Login'){
    var uuid = Cookie.get("uuid");
    if(uuid != undefined && uuid != null && uuid != ''){
      next()
    }else{
      next({
        path: '/login',
        name: 'Login',
        query: { redirect: to.fullPath }
      })
    }
  }
  next()
})

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

至此，就可以像jquery项目一样的在vuecli中使用easyui了，完美！