话不多说,直接上代码呀~

先来个结构图:

中规中矩的vue-cli就写了一个自己的js文件

那么我想要引入到vue组件里。

1.首先写我的js文件

2.引入到vue组件!!!一定要用{}把方法名拿过来

3.可以开心使用了

【关于引入第三方插件:简单的说一下三种方式】

一.可以cdn直接引入到index.html里,记得放在</body>前面哦

二.配置webpack :

1、首先在package.json里加入,

dependencies:{
"jquery" : "^2.2.3"
}

2、安装依赖

npm install jquery --save-dev

3、在webpack.base.conf.js里加入

var webpack = require("webpack")
4、在module.exports的最后加入

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]

5、然后一定要重新npm run dev

会报错:npm install --save !!vue-style-loader!css-loader

执行命令:npm install stylus-loader css-loader style-loader --save-dev

6、在main.js 引入就ok了

import $ from 'jquery'

3.如果这个插件是某个人写的并不能通过npm下载安装,怎么办?

参考:https://www.cnblogs.com/mengfangui/p/7552471.html

参考:http://blog.csdn.net/meishuixingdeququ/article/details/76338632

vue引入自己写的js文件的更多相关文章

  1. vue 调用常量的config.js文件

    我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...

  2. vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)

    文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...

  3. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  4. Vue中ESlint配置文件eslintrc.js文件详解

    最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认 ...

  5. jquery与自己写的js文件冲突解决办法

    先加载JQUERY,然后使用语句  jQuery.noConflict(); 再加载其他JS文件,后面在使用jQuery时都换下,如:$('#div') 换成 jQuery('#div'), 如果嫌j ...

  6. CI框架引入外部css和js文件

    首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on  ...

  7. 页面中引入带中文的JS文件乱码问题

    1. WebConfig: <globalization requestEncoding="gb2312" responseEncoding="gb2312&quo ...

  8. eclipse3.7之后,在引入的jquery的js文件打红叉

    使用Eclipse 3.7时,工程中加入jquery.xx.js文件,发现该文件出现错误提示(红×),但使用Eclipse 3.7以前的版本就不会出现这种提示.是因为Eclipse 3.7在.proj ...

  9. 在引入的css或者js文件后面加参数的作用

    有时候可能会遇到js或者css文件引用后传递参数: css和js带参数(形如.css?v=与.js?v=) <script type=”text/javascript” src=”jb51.js ...

随机推荐

  1. 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) F dfs序+树状数组

    Performance ReviewEmployee performance reviews are a necessary evil in any company. In a performance ...

  2. [JLOI2014] 松鼠的新家 (lca/树上差分)

    [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在 ...

  3. nodejs express框架一个工程中同时使用ejs模版和jade模版

    在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使 ...

  4. 「Linux」centos7安装mysql

    1.yum仓库下载MySQL:sudo yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch. ...

  5. Jenkins使用教程之用户权限管理(包含插件的安装)

    在工作的过程中由于分工合作的关系,我们因为工作内容的不同可能分为不同的组织里,但是jenkins默认的权限管理并没有用户组的概念,所以我们需要第三方插件的支持来解决问题.插件:Role-based A ...

  6. 给APP增加RSA签名

    RSA签名,Google主要用于APP的来源控制与结算.所谓的结算,也是就是控制了APP只有使用现在机子上登录的Google账户从Google市场曾经下载过该APP的才能够使用,这样也就达到了app销 ...

  7. JQuery 中三十一种选择器的应用

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  8. 【NOIP】提高组2014

    Day1 T1(暴力):大水题 #include<cstdio> ][]={ ,,,,, ,,,,, ,,,,, ,,,,, ,,,,, }; ],b[]; int main() { in ...

  9. Count on a tree(SPOJ COT + 树上第k大 + 主席树 + LCA)

    题目链接:https://www.spoj.com/problems/COT/en/ 题目: 题意: 给你一棵有n个节点的树,求节点u到节点v这条链上的第k大. 思路: 我们首先用dfs进行建题目给的 ...

  10. 41、用Python实现一个二分查找的函数

    data = [1, 3, 6, 7, 9, 12, 14, 16, 17, 18, 20, 21, 22, 23, 30, 32, 33, 35] def binary_search(dataset ...