1、首先在package.json里加入,

dependencies:{
"jquery" : "^2.2.3"
}

2、安装依赖

npm install jquery --save-dev

3、在webpack.base.conf.js里加入

var webpack = require("webpack")
4、在module.exports的最后加入

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

5、然后一定要重新npm run dev

会报错:npm install --save !!vue-style-loader!css-loader

执行命令:npm install stylus-loader css-loader style-loader --save-dev

6、在main.js 引入就ok了

import $ from 'jquery'

vue-cli webpack全局引入jquery的更多相关文章

  1. vue工程化之项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  2. 如何在vue-cli webpack中全局引入jquery

    1.首先执行:npm install  jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首 ...

  3. vue-cli webpack 中全局引入 jquery

    1.安装 jquery npm install jquery --save-dev 2.修改 webpack.base.conf.js 方法一 首先加入: const webpack = requir ...

  4. vue框架(三)_vue引入jquery、bootstrap

    一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...

  5. vue-cli webpack 全局引用jquery

    一.初始化项目 首先,执行vue init webpack F:\ZhaoblTFS\Zeroes\Document\代码示例\vue-cli-webpack-jquery>vue init w ...

  6. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  7. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  8. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  9. vue-cli项目中,全局引入jquery

    命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...

随机推荐

  1. Java中的异常 Exceptions

    1. 概念 exception是“exceptional event”的缩写,是指执行程序中发生的事件,破坏了程序的正常执行流程.Java 异常处理机制使程序更加健壮易于调试,它可以告诉程序员三个问题 ...

  2. springmvc源码解析(二)

    架构流程: 1.  用户发送请求至前端控制器DispatcherServlet, 2.  DispatcherServlet收到请求调用HandlerMapping处理器映射器.  处理器映射器根据请 ...

  3. leecode第一百二十四题(二叉树中的最大路径和)

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  4. es6 export 和export default的区别

    区别 export 每个文件中可使用多次export命令 import时需要知道所加载的变量名或函数名 import时需要使用{},或者整体加载方法 export export default 每个文 ...

  5. 将本地项目上传到gitlab下

    转载自: https://blog.csdn.net/litianxiang_kaola/article/details/74075151 1.安装git    https://git-scm.com ...

  6. Python+Appium环境搭建

    1.python环境搭建,这里就不做过多介绍 2.安装 node.js 2.1.官网下载node.js:https://nodejs.org/en/download/ 2.2.获取到安装文件后,直接双 ...

  7. ThinkPHP表单自动验证(注册功能)

    控制器中: 模型中: 视图中:

  8. 常见的ORACLE语句

    基本 --新建表: create table table1( id varchar(300) primary key, name varchar(200) not null); --插入数据 inse ...

  9. 一个使用Jmeter做接口性能测试的实战案例

    1 安装并配置Jmeter Jmeter的安装不在这里阐述,安装步骤非常简单. 直接进入主题 1.1 数据库连接配置 由于测试过程需要调用数据库获取响应部署数据,因此需要先建立与数据库的连接. 如果不 ...

  10. WCF初见之SQL数据库的增删改查

    1.首先要连接数据库,自然要有数据库啦,创建一个数据库表Login,并插入一个数据: --创建数据库表login CREATE TABLE Login ( UName VARCHAR(20) PRIM ...