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

先来个结构图:

中规中矩的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. Adaboost 算法的原理与推导——转载及修改完善

    <Adaboost算法的原理与推导>一文为他人所写,原文链接: http://blog.csdn.net/v_july_v/article/details/40718799 另外此文大部分 ...

  2. kotlin 变量声明

    Kotlin 是强类型的语言,Kotlin 要求所有的变量必须先声明.后使用,声明变量时必须显示或隐式指定变量的类型(隐式的是指,声明的时候同时初始化,这样编译的时候就可以推断出该变量的类型了,Jav ...

  3. 手脱PEtite v2.1

    1.载入PEID PEtite v2.1 2.载入OD,先F8跟一下 0042C10F > B8 00C04200 mov eax,跑跑排行.0042C000 ; //程序入口点 0042C11 ...

  4. 微信小程序传值

    方式一:通过设置id方式传值 <button class="btninvest" bindtap="goinvet" id="{{item.tx ...

  5. Linux下如何卸载软件(Debian系)

    说明:此方法适用于Debian.Ubuntu等带apt工具的操作系统. 步骤: 1.首先我们需要知道将要卸载的软件名称,比如我现在打算卸载tightvncserver,但是如果你不确定名称,没关系,可 ...

  6. bzoj 2844: albus就是要第一个出场 高斯消元

    LINK 题意:看题目不如看样例解释.给出有n个数的集合,对这些子集中的数求异或,升序统计所有子集得到的数(重复会被计入),询问一个数x,问这个数出现的第一个位置 思路:在这里要求一个所有可能出现的异 ...

  7. ZOJ 3777 B - Problem Arrangement 状压DP

    LINK:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3777 题意:有N(\( N <= 12 \))道题,排顺序 ...

  8. 重构改善既有代码设计--重构手法12:Extract Class (提炼类)

    某个类做了应该由2个类做的事.建立一个新类,将相关的字段和函数从旧类搬移到新类. 动机:一个类应该是一个清楚地抽象,处理一些明确的责任.但是在实际工作中,类会不断成长扩展.你会在这儿加入一些功能,在哪 ...

  9. ASP.NET网站伪静态下使用中文URL

    首先解释一下,什么是中文URL呢?它并不是我们常见的把汉字编码为 %CF%EC 这种形式,而是在URL中直接使用汉字 这种形式目前还不是很多见.因为不同的浏览器处理起来可能会有所不同,不过据我测试,I ...

  10. 【leetcode 简单】第十八题 爬楼梯

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...