zoukankan      html  css  js  c++  java
  • vuecli3集成easyui

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

    jquery安装命令:

    npm install --save jquery

    jquery-easyui安装命令:

    npm install --save jquery-easyui

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

    首先,在根目录(package.json目录)下新建两个文件,babel.config.jsvue.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了,完美!

  • 相关阅读:
    NLP 中的embedding layer
    Java Web -- Servlet(5) 开发Servlet的三种方法、配置Servlet具体解释、Servlet的生命周期(2)
    我对REST的理解
    QML 与 C++ 交互之工厂方法
    Hive分析窗体函数之LAG,LEAD,FIRST_VALUE和LAST_VALUE
    【C/C++】:用C实现输出日期的阴历日子
    Android6.0执行时权限解析,RxPermissions的使用,自己封装一套权限框架
    统计报表
    2015 HDU 多校联赛 5363 Key Set
    查看sedna创建的数据库和集合,文档之类
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/11290007.html
Copyright © 2011-2022 走看看