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

Posted 2020-10-21 glauto

 

前言：最近有小伙伴问我，是不是用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 来获取该元素进行后续操作

<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‘;//引入jq
import 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>

效果如下：