全面解析vue-cli生成的项目中使用其他库（js库、css库）

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

一、用vue-cli生成项目

1. vue init webpack-simple vue-jq
2. cd vue-jq
3. cnpm install
4. 使用git bash（只是为了方便）
5. package.json 中修改端口  --port 8088
6. 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 来获取该元素进行后续操作

效果如下：