vue-cli中引入jquery的方法

以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下:

我们先进入webpack.base.conf.js文件,开始顶部是这样的,我们需要加一行代码

变成这样

var path = require('path')
var utils = require('./utils')
var webpack = require("webpack") //这是我们添加的
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

然后到下面的module.exports内部加入

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

我们在上面引入webpack就是为了在此使用webpack对象;

然后在package.json里的dependencies加入"jquery" : "^1.8.0";或者你可以使用npm install  xxx -save去生成

然后我们就可以在main.js里面去导入jquery了

最后,重启项目

最最后,骚年,去浪吧

vue-cli中引入jquery的方法的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  3. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  4. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  5. vue系列---vue项目(已安装vuex)中引入jquery

    vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

  6. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

  7. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  8. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  9. vue-cli3搭建的vue项目中使用jquery

    装包:npm install jquery --save 方式一 全局使用 1)main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ ...

随机推荐

  1. facebook演讲

    任何为了更大愿景工作的人,可能会被称为疯子,即使你最终获得成功. 任何为了复杂问题工作的人,都会因为不能全面了解挑战而被指责,即使你不可能事先了解一切. 任何抓住主动权先行一步的人,都会因为步子太快而 ...

  2. leetcode个人题解——#8 string to integer

    第八题 class Solution { public: int myAtoi(string str) { ; ; ; while(str[i] == ' ')i++; if (str[i] == ' ...

  3. 安装sqoop 1.99.4

    参考http://sqoop.apache.org/docs/1.99.4/Installation.html 1.简介 sqoop2分为server和client两部分.server作为maprde ...

  4. Lake Counting(DFS连通图)

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  5. JSR303中的来验证数据信息

    spring mvc之实现简单的用户管理三 博客分类: spring spring mvc spring mvc dispatcherServlet springspring mvcbean vali ...

  6. ACM 第十七天

    暑期热身赛 BAPC 2014 The 2014 Benelux Algorithm Programming Contest 题目网址:https://odzkskevi.qnssl.com/3655 ...

  7. 【beta】Scrum站立会议第1次....11.3

    beta阶段,我们nice!团队将进行为期两周的冲刺,Scrum站立会议10次. 小组名称:nice! 组长:李权 成员:于淼  刘芳芳韩媛媛 宫丽君 项目内容:约跑app(约吧) 时间:2016.1 ...

  8. C/S结构

    C/S结构 编辑 同义词 C/S架构一般指C/S结构 C/S 结构,即大家熟知的客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Serv ...

  9. 查询MySQL某字段相同值得重复数据

    1.先查询重复的id: SELECT book_id,COUNT(*) AS COUNT FROM xs_book_source WHERE site_id=5 GROUP BY book_id HA ...

  10. 【Python】python基础语法 编码

    编码 默认情况下,python以UTF-8编码,所有的字符串都是Unicode字符串,可以为代码定义不同的的编码. #coding:UTF-8 #OR #-*- coding:UTF-8 -*-  p ...