全面解析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 来获取该元素进行后续操作

<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>

效果如下:


推荐阅读更多精彩内容

  • 在线阅读 http://blog.poetries.top/FE-Interview-Questions 关注公众...
    poetries阅读 53,309评论 16 394
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 20,245评论 7 121
  • 不知什么时候起,我喜欢上了行走,喜欢上行走带来的思绪飞扬,也迷上了行走间片刻地驻足停歇,带给浮燥的心层层沉淀的瞬间...
    锦州悟空阅读 117评论 0 7
  • 下载简书好久了,一直都是在看,想写东西,但又不敢!虽然自己爱看书,但肚子里的那点东西,要想写出来,真的还是不容...
    岚妮阅读 28评论 0 0
  • 前几天的时候,一个小伙子,很小的小伙子,有一颗牙还没长出来的小伙子,才九岁,下半年即将踏入小学四年级的大门的小...
    冬雨的陶阅读 56评论 2 0