• vue+webpack 引入jquery


    1 首先 cnpm install jquery;这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/dist/jquery.min.js,

    inport $ from "jquery/dist/jquery.min.js" 就可以使用$了;

    我们也可以在webpack.base.config.js中配置;路径的别名方便引入:2


    之后我们就可以在使用jquery的组件中这样引入

    3 import $ from 'jquery';

    这是jquery不是全局的,如果要使用在每一个模块中需要import 。比较麻烦,下面是设置jquery为全局的方法:

    一。引入jQuery

    在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。在上面步骤的前提下:

    修改webpack.base.conf.js(在build文件下)两个地方:

    4:加入 

    var webpack=require('webpack');

    5 在module.exports的里面加入

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

    6 最后在main.js中加入import $ form 'jquery',完成jquery的引入

    ok,这是jquery就是全局的了,在任意模块中都可以使用了

    tip:在webpack的output.libraryTarget,需要设置为var,默认值就是var(当 library 加载完成,入口起点的返回值将分配给一个变量),如果设置为commonjs等可能会报错,原因见:output.libraryTarget

    如果想要引入不会以commonjs规范书写的js就可以这样引入,在组件中import之后,因为是commonjs规范,所以会按顺序加载,引入成功

  • 相关阅读:
    JAVA中使用FTPClient上传下载
    js 计算题
    js 中的call apply
    js闭包、原型、继承、作用域
    jQuery中.bind() .live() .delegate() .on()的区别
    Javascript中String、Array常用方法介绍
    常用函数
    事件委托,阻止默认事件
    【探讨】javascript事件机制底层实现原理
    css 垂直水平居中
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/7605912.html
Copyright © 2020-2023  润新知