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

先来个结构图:

中规中矩的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. C++ 局部静态变量,全局变量,全局静态变量,局部变量的区别和联系

    C++变量根据定义位置的不同,具有不同的作用域,作用域可分为6种:全局作用域,局部作用域,语句作用域,类作用域,命名作用域和文件作用域. 从作用域看: 全局变量具有全局作用域.全局变量只需在一个源文件 ...

  2. Ubuntu+NDK编译openssl

    为了Android上使用libcurl且支持HTTPS协议,需要依赖openssl,因此先来了解一下如何编译OpenSSL1.编译ARM下的共享库(默认的)我使用的是guardianproject的o ...

  3. ASP.NET Session详解笔记

    (一) 描述 当用户在 Web 应用程序中导航 ASP.NET 页时,ASP.NET 会话状态使您能够存储和检索用户的值.HTTP 是一种无状态协议.这意味着 Web 服务器会将针对页面的每个 HTT ...

  4. 【BZOJ】2599: [IOI2011]Race 点分治

    [题意]给一棵树,每条边有权.求一条简单路径,权值和等于K,且边的数量最小.N <= 200000, K <= 1000000.注意点从0开始编号,无解输出-1. [算法]点分治 [题解] ...

  5. 【leetcode 简单】第二题 反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  6. 关于Re模块的一些基础知识(另附一段批量抓代理ip的代码)

    1.常用匹配规则 . 表示任意字符[0-9] 用来匹配一个指定的字符类别[^5]表示除了5之外的其他字符,^不在字符串的开头,则表示它本身.* 对于前一个字符重复0到无穷次+ 对于前一个字符重复1到无 ...

  7. HDU 2191 珍惜现在,感恩生活 (dp)

    题目链接 Problem Description 急!灾区的食物依然短缺! 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都 ...

  8. MyBatis笔记之配置输出日志并打印输出SQL语句

    1. 引入Log4J的Maven依赖: <dependency> <groupId>log4j</groupId> <artifactId>log4j& ...

  9. arch安装完成之后不能使用笔记本自带的无线网卡

    问题描述如下 我笔记本的wifi网卡识别不了,不知道为什么?? 使用ifconfig -a 只列出了有线网卡以及外接的无线网卡如下 enp4s0f1: flags=<UP,BROADCAST,M ...

  10. Mac nginx 配置

    nginx 安装: 在苹果系统下如果要安装nginx,首先要安装brew.安装brew可以查看网站:https://brew.sh: 一条命令即可搞定:/usr/bin/ruby -e "$ ...