关于在vue中引入jquery或js文件

起

最近需要在vue中引入jquery，在网上找了若干资料。
以下文章比较靠谱：
[参考传送门1](http://www.jianshu.com/p/3746cf6cebe2)
[参考传送门2](https://segmentfault.com/a/1190000007020623)

承

概述

大致步骤：
1，你需要一个jquery.js文件
2，你需要修改webpack.base.conf.js
3，使用时你需要引入
具体操作上面链接有不多废话了。
下面主要是遇到的一些坑。

坑们

坑-1

在网上看到了一个版本，在第二步时类似这样配置：

'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery-1.10.1.min')

试了下，jquery文件放在任何地方都可以，就是不能放在src文件夹下面，暂时不知道是为什么，仅作现象记录。

坑-2

各类方法其实大同小异，但是也就“参考传送门1”那篇文章能算言简意赅。大部分的资料都没有归纳以及说明要害。

结

其实，要在vue中引入js文件就是三部:
1，拿到你要引入的js文件；
2，在webpack.base.conf.js中添加一行代码就行了。

可以这样

'jquery': 'jquery'
或
'jquery': path.resolve(__dirname, '../node_modules/jquery/dist/jquery.min')

3，别忘了import $ from 'jquery'
最后是一个简单的应用实例。
整个写得有点乱，后续会完善。

实例

<template>
  <div id="loginPage">
    <div>
      <el-input id="name" v-model="input" placeholder="用户名"></el-input>
    </div>
    <div>
      <el-input id="passwd" v-model="input" placeholder="密码"></el-input>
    </div>

    <!-- <button id="button" onclick="test()">测试</button> -->

    <div id="example-1">
      <button v-on:click="test()">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>

    <!-- <div>
      <el-input placeholder="请输入内容" v-model="input3">
        <template slot="prepend">Http://</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input4">
        <template slot="append">.com</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input5">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="search"></el-button>
      </el-input>
    </div> -->
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      input: '',
      counter: 0,
    }
  },

  methods: {
    test: function () {
      // console.log("hello, world!");
      $('#name').hide();
    },
  }
  // $('#name').hide(1000)
}

document.title = "登录";

// $('#button').click(function() {
//   console.log("hello, world!");
// });

// function test () {
//   alert("hello, world!");
// }

// $.backstretch("../assets/bk_scene.jpg")

</script>

<style scoped>

  #loginPage {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background: url(../assets/bk_scene.jpg);*/
    color: ;
    text-align: center;    
  } 

  #name {
    margin-top: 150px;
  }

  .el-input {
    margin-top: 15px;
    width: 300px;

  }

</style>