前言：最近有小伙伴问我，是不是用vue脚手架生成的项目就不能jquery了呢？显然，答案是否定的，必须能用。但是个人建议最好不要用了，用人家vue提供的不好嘛。

一、用vue-cli生成项目

1. vue init webpack-simple vue-jq2. cd vue-jq3. cnpm install4. 使用git bash（只是为了方便）5. package.json 中修改端口 ?--port 80886. npm run dev

二、构建项目结构，引入相关文件

目录结构如下：

 ?|--assets ???|--js ??????|--fn.js ??????|--jquery-1.7.2.min.js ???|--css ??????|--animate.css ??????|--1.css

说明：fn.js为一个函数，里面返回了一个生成随机数的函数

export default { ?rnd:function(m,n){ ???return parseInt(Math.random()*(m-n)+n) ?}, ?b:5};

1.css文件就设置了一个body的背景色

body{ ???background:#399;}

三、配置相关文件

1. 在入口文件main.js引入所需的库

import ‘./assets/css/animate.css‘;import ‘./assets/css/1.css‘;import ‘./assets/js/jquery-1.7.2.min.js‘;

2. 开始配置jquery库

 ??????????1). npm install jquery --save-dev ??????????2). 在webpack.base.conf.js中添加 配置 ????????????????????plugins: [ ???????????????????????new webpack.ProvidePlugin({ ?????????????????????????$: ‘jquery‘, ?????????????????????????jquery: ‘jquery‘, ?????????????????????????‘window.jQuery‘: ‘jquery‘, ?????????????????????????jQuery: ‘jquery‘ ???????????????????????}), ?????????????????????], ??????????3). 在App.vue中引入模块 ???????????????import $ from ‘jquery‘ ???????????????import fn from ‘./assets/js/fn.js‘;

3. 开始配置animate.css库

 ???????1). npm install style-loader --save-dev ???????2). 在webpack.base.conf.js中添加 配置 ???????????????{ ???????????????????test: /\.css$/, ???????????????????loader: ‘style-loader!css-loader‘ //顺序定死的，必须这么写，知道吗？ ?????????????????},

4. 添加事件修改dom

说明：
1. 点击“按钮”，利用jquery将class名为box的元素背景设为粉色
2. 点击“走你”，利用vue提供的方法获取元素并结合animate.css来实现动画效果，注意：这里调用了fn.js文件中生成随机数的函数。
ps：vue中获取元素，首先在该元素上加ref="xxx"，然后在js中用this.$refs.xxx 来获取该元素进行后续操作

<template> ?<div id="app"> ???<button type="button" name="button" @click="change">按钮</button> ???<button type="button" name="button" @click="move">走你</button> ???<h2>{{ msg }}</h2> ???<div class="box"> ?????<span>我是一个普通的div</span> ???</div> ???<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> ?????<div class="animated box" ref="div1" v-show="show"> ?????????我能动起来 ?????</div> ???</transition> ?</div></template><script>import $ from ‘jquery‘;//引入jqimport fn from ‘./assets/js/fn.js‘;//引入外部的fn.js文件export default { ?name: ‘app‘, ?data () { ???return { ?????msg: ‘Welcome to vue‘, ?????show: true ???} ?}, ?methods: { ???change(){ ?????this.msg = ‘div背景色变红了‘ ?????$(‘.box‘).css(‘background-color‘,‘pink‘); ???}, ???move(){ ?????this.show = !this.show;//用来配合动画（animate）使用 ?????this.$refs.div1.style.backgroundColor = ‘lawngreen‘; ?????//利用外部的fn.js中的rnd函数生成一个随机数 ?????let item = ?$(‘.box:first span‘).html() + ‘；<br/>生成的随机数是：‘+ ?fn.rnd(1,100); ?????$(‘.box:first span‘).html(item); ???} ?}}</script>

效果如下：