美文网首页
vue-cli 构建项目时引用 jQuery

vue-cli 构建项目时引用 jQuery

作者: djyuning | 来源:发表于2017-06-17 09:07 被阅读174次

    一、安装 jQuery 依赖

    打开终端,进入到项目目录,执行依赖安装:

    $ npm install  --save jquery
    

    如果使用的是 Yarn 管理器,则使用下面的方法添加 jQuery 包:

    $ sudo yarn add jquery --save
    

    yarn 会生成一个 yarn.lock 的文件,某些情况下需要使用 sudo 目录才可以添加新的包到 package.json 文件中。

    二、webpack 配置

    通常基于 vue-cli 构建项目时,都会自动生成一个或多个配置文件在工程目录中,如:

    • 基于 webpack 模板的项目配置项为 ./build/webpack.base.conf.js 文件;
    • 基于 webpack-simple 模板的则为 ./webpack.config.js

    首先,在头部增加引入 webpack 模块( 适用于 webpack 模板构建的项目,webpack-simple 构建的则已存在该项):

    var webpack = require('webpack') // -- 新增的 webpack 模块
    

    然后,在当前配置文件的 module.exports 中增加插件引用(位置无所谓,尽量放在 resolve 对象下方):

    resolve: {
      // ·······
    },
    // 新增插件引用
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    

    三、完成

    执行完上面的两个步骤后,jQuery 就已经被 webpack 全局引用成功了,在任意组件中添加一个测试代码就可以查看到 jQuery 已经生效!

    created: function () {
      console.log( $(document) ); // 输出 [document]
    },
    

    相关文章

      网友评论

          本文标题:vue-cli 构建项目时引用 jQuery

          本文链接:https://www.haomeiwen.com/subject/tquvqxtx.html