第一步:安装jQuery

npm/cmpn方式安装(默认安装1.7.X版本的JQ)

npm/cnpm install jQuery

如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断(当前图片安装的是2.2.3版本,如果想安装更高或者其他可以更改版本号)

然后在命令行窗口中输入指令,即可完成安装

npm install

第二步:更改webpack.base.conf.js文件

在文件指定位置添加代码

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

位置如图所示:

第三步:(必须操作),重启一下服务器不然会报错,重启之后就好了

npm run dev

第四步:更改main.js文件

添加代码

import $ from 'jquery'

如图所示: 

之后在文件中即可随意使用JQ,不过切记不能直接使用,必须这样

$(function(){
$('.button').click(function(){
alert('JQ引入测试');
});
});

如果不写$(function(){ }),会无法生效的

错误写法:

$('.button').click(function(){
alert('JQ引入测试');
});
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_19327991/article/details/78148930

Vue2.0 --- vue-cli脚手架中全局引入JQ的更多相关文章

  1. vue cli web pack 全局引入jquery

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

  2. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  3. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  4. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  5. vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则

    第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...

  6. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  7. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  8. nuxt中全局引入element-ui

    介绍 对于一个前端小白来说,使用一套已有的框架作为基础,可以达到事半功倍的效果,在这里我们选择Element.Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库( ...

  9. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

随机推荐

  1. Android之webview详解

    文章大纲 一.webview基本介绍1.什么是webview2.为什么要使用webview3.webview基本操作 二.webview高级使用1.WebView状态2.资源加载3.WebView加载 ...

  2. SQL Server 数据库基于备份文件的【一键还原】

    1. 备份与还原的基础说明 我们知道在DBA的日常工作中,SQL Server 数据库的恢复请求偶有发生,可能是用作数据的追踪,可也可能能是数据库的灾难恢复. 数据库常用的备份命令如下: ----完整 ...

  3. 【转载】Sqlserver数据库备份的几种方式

    在实际的数据库Sqlserver的运维的过程中,很多时候我们需要做到数据的备份操作,可以做到定时备份,也可以进行手动数据库备份.在实际的过程中,有时候因业务需要备份出完整数据库,而有时候又因为实际业务 ...

  4. Linux stat函数和stat命令

    stat函数和stat命令 linux文件里的[inode = index node]解释:要理解inode必须了解磁盘和[目录项],inode实际是连接[目录项]和磁盘的中间物质. 图里的大圈代表硬 ...

  5. python3 函数传参练习 全局变量与局部变量 的理解

    额 还是继续抄一边NLP第二条: 2.一个人不能控制另外一个人   一个人不能改变另外一个人,一个人只能改变自己. 每个人的信念,价值观,规条系统只对本人有效,不应强求别人接守. 改变自己,别人才会有 ...

  6. vue 预渲染遇到的坑

    前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerend ...

  7. 从fastjson多层泛型嵌套解析,看jdk泛型推断

    给你一组json数据结构,你把它解析出来到项目中,你会怎么做? // data1 sample { "code" : "1", "msg" ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  9. Ubuntu16.04 部署配置GO语言开发环境 & 注意事项

    1. 安装GO 安装go语言包: $ curl -O https://storage.googleapis.com/golang/go1.10.1.linux-amd64.tar.gz   下载完成后 ...

  10. ToastUtil【简单的Toast封装类】【未自定义Toast的显示风格】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 一个简单的Toast封装类. 效果图 API = 6.0 API = 4.4.2 代码分析 实现了不管我们触发多少次Toast调用, ...