webpack+Vue2最新版搭配，如何全局使用jquery？

Miyang 發布于2019-08-21 18:34 / 1989人閱讀

摘要：在與搭配的項目，雖然可以完全不用，但是呢，太多的擴展太好用，所以還是得用以下下，然而，總不能每個文件都要一下吧，那樣很大的，所以出現今天的標題。

在webpack與Vue搭配的項目，雖然可以完全不用jquery，但是呢，JQ太多的擴展太好用，所以還是得用以下下，然而，總不能每個文件都要import一下$吧，那樣js很大的，所以出現今天的標題。

1.首先需要安裝jQuery

命令：

npm install jQuery --save-dev

會自動安裝最新版本，同時，會自動在package.json里面增加依賴，自動的，你無需操作其他。如果你想指定版本，在jQuery后面加@1.8.11即可，既然都用Vue2.x了，直接最新版jQuery就好了，個人建議哈。

2.修改webpack.base.conf.js

在第二行(就是"use strict"下面)插入：

const webpack = require("webpack")

然后在module.exports的最后加入：

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

3.重啟服務

因為修改了配置，所以需要重啟服務：

npm run dev

4.全局引入一下【這一步可忽略也可以】在main.js里面：

import $ from "jquery"

以上就是全局使用，如果不想全局使用，在main.js里面，執行步驟4即可。23可以忽略不操作。希望對大家有幫助。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90607.html

vue2.x 如何引入bootstrap

摘要：通過安裝和要使用必須先引入找到文件夾下的文件打開，新增配置找到文件夾下的文件打開，全局引入在入口文件中加入在里導入 1.通過cnpm安裝bootstrap和jquery cnpm install bootstrap jquery --save 2.要使用bootstrap必須先引入jQuery 找到build文件夾下的webpack.prod.conf.js文件打開，新增配置： p...

blastz 2019-08-26 11:48 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

yy736044583 2019-08-20 16:31 評論0 收藏0