关于在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.js3，使用时你需要引入具体操作上面链接有不多废话了。下面主要是遇到的一些坑。

坑们

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