关于在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>