webpack+vue-cli项目中引入外部非模块格式js的方法

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。

1.直接引用

Note:(红色标注部分)

位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录;

位置2:需要用到位置一中定义的变量Swiper;

位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下;

以上这篇webpack+vue-cli项目中引入外部非模块格式js的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • python下调用pytesseract识别某网站验证码的实现方法

    一.pytesseract介绍 1.pytesseract说明 pytesseract最新版本0.1.6,网址:https://pypi.python.org/pypi/pytesseract Python-tesseract is a wrapper for google's Tesseract-OCR ( http://code.google.com/p/tesseract-ocr/ ). It is also useful as a stand-alone invocation scrip

  • Tesserocr库的正确安装方式

    win10,直接使用 pip install tesserocr 的命令 如果输出如下错误提示: tesserocr.cpp(596): fatal error C1083: 无法打开包括文件: " leptonica/allheaders.h ": No such file or directory error: command 'C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\BIN\x86_amd64\cl.exe'

  • Nodejs调用Dll模块的方法

    公司项目采用Electron(electronjs.org/)开发pc应用,会涉及到与底层硬件设备的通信,而sdk封装 基本上都是通过 C++ 动态链接库dll实现的. 有两种方案可供选择: 方案一: 使用node-ffi 方案二: 使用C++编写一个node addon,通过LoadLibrary调用dll 以上两种方案都可以解决dll调用问题,方案选型要个人对C++ 的掌握程度,如果熟悉C++开发,可以直接选择方案二最方便.如果完全不了解C++,那么只能采用方案一. 由于笔主不太懂C++,最

  • python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别

    前言 写爬虫有一个绕不过去的问题就是验证码,现在验证码分类大概有4种: 图像类 滑动类 点击类 语音类 今天先来看看图像类,这类验证码大多是数字.字母的组合,国内也有使用汉字的.在这个基础上增加噪点.干扰线.变形.重叠.不同字体颜色等方法来增加识别难度. 相应的,验证码识别大体可以分为下面几个步骤: 灰度处理 增加对比度(可选) 二值化 降噪 倾斜校正分割字符 建立训练库 识别 由于是实验性质的,文中用到的验证码均为程序生成而不是批量下载真实的网站验证码,这样做的好处就是可以有大量的知道明确结果

  • 详解Python安装tesserocr遇到的各种问题及解决办法

    Tesseract的安装及配置 在Python爬虫过程中,难免遇到各种各样的验证码问题,最简单的就是​这种验证码了,那么在遇到验证码的时候该怎么办呢?我们就需要OCR技术了,OCR-即Optical Character Recognition光学字符识别,是指通过扫描字符,然后将其形状翻译成电子文本的过程.而tesserocr是Python的一个OCR识别库,所以在安装tesserocr之前,我们需要安装tesseract这个东西 下载地址:https://digi.bib.uni-mannhe

  • tesserocr与pytesseract模块的使用方法解析

    1.tesserocr的使用 #从文件识别图像字符 In [7]: tesserocr.file_to_text('image.png') Out[7]: 'Python3WebSpider\n\n' #查看tesseract已安装的语言包 In [8]: tesserocr.get_languages() Out[8]: ('/usr/share/tesseract/tessdata/', ['eng']) #从图片数据识别图像字符 In [9]: tesserocr.image_to_tex

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • Vue项目中引入外部文件的方法(css、js、less)

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • Java Web项目中Spring框架处理JSON格式数据的方法

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每一个建对应一个值,每个键值对之间用逗号连接.并且最后一个键值对之后没有逗号,整体需要有大括号括起来. 一般正常的servlet返回json时,会像下面这样: response.setContentType("text/JSON;charset=utf-8"); response.getWr

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • vue项目中在外部js文件中直接调用vue实例的方法比如说this

    一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

  • vue项目中引入Sass实例方法

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

  • 在vue项目中引入vue-beauty操作方法

    vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty. 1.vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue init webpack my-projec:初始化cd my-project:进入目录npm install:安装依赖 2.安装vue-beauty 3.查看配置文件package.json,是否有vue-beauty组件的版本号 4.在main.js中引入

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

  • Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

随机推荐