起

最近需要在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>