Vue小技巧,如何导入普通JS文件
最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库。Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成CommonJS比较麻烦(真相是懒综合症发作)。这样的话,只有用常规的html引入js文件的方式来解决这个问题。为了阐述方便,本文使用一个简单例子来展示整个解决方案。
这就本文所用到的例子工程,我们在HelloWorld.vue中的mounted方法里调用了外部引入的方法'testLib。
首先,我们在项目目录里创建一个libs子目录,在libs目录中添加test.js文件。
然后打开build目录下的webpack.dev.conf.js文件,找到CopyWebpackPlugin,按下图所示增加一个copy动作,从..libs拷贝到与index.html的同一目录下。对webpack.prod.conf.js也做如下修改。
运行npm run dev后,浏览器打开localhost:8080,你会发现在浏览器Console栏,‘this is test’被打印出来。
运行npm run build, test.js和index.html都放在了dist目录下。
这个设置其实不止在VUE下有用,在其他以webpack为模板的工程中都可以使用。
Vue小技巧,如何导入普通JS文件的更多相关文章
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
- vue如何导入外部js文件(es6)
也许大家都是使用习惯了es5的写法喜欢直接用<Script>标签倒入js文件,但是很是可惜,这写法.在es6,或则说vue环境下不支持 真的写法是怎样? 首先.我们要改造我们要映入的外部j ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- myeclipse中导入的js文件报错(出现红叉叉,提示语法错误)
为了做一个页面特效,导入了一个jquery文件,怎想,myeclipse竟然报错说是语法错误,但是这个js文件我是从官网上下载的,不应该出错才对,百度谷歌之后终于找到了解决办法: 选中报错的js文件, ...
- js相对路径相关(比如:js中的路径依赖导入该js文件的路径)
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
- sql server 小技巧(1) 导入csv数据到sql server
1. 右击 DataBaseName,选择 Tasks->Import Data 2. 选择数据源: Flat File Source , 选择一个csv文件 Advance: 选择所有的列,改 ...
- 微信小程序——3、逻辑js文件
逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...
- js文件中模块化导入swiper.js文件方法
es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...
- [转]【Windows小技巧】批量重命名文件
注:如果文件名包含空格,命令应写成ren "s0 (1).gif" s001.gif,简而言之,就是加上双引号!!!原因:系统将s0和(1).gif认为是两个参数,再加上后面的s0 ...
随机推荐
- 【Codeforces Round #476 (Div. 2) [Thanks, Telegram!] E】Short Code
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先建立一棵字典树. 显然,某一些节点上会被打上标记. 问题就转化成求所有标记的深度的和的最小值了. (标记可以上移,但是不能在同一位 ...
- 【转】 C# ListView实例:文件图标显示
[转] C# ListView实例:文件图标显示 说明:本例将目录中的文件显示在窗体的ListView控件中,并定义了多种视图浏览.通过调用Win32库函数实现图标数据的提取. 主程序: 大图标: 列 ...
- Dalvik虚拟机垃圾收集(GC)过程分析
前面我们分析了Dalvik虚拟机堆的创建过程,以及Java对象在堆上的分配过程. 这些知识都是理解Dalvik虚拟机垃圾收集过程的基础.垃圾收集是一个复杂的过程,它要将那些不再被引用的对象进行回收.一 ...
- SQL语句将某字段查询出以逗号隔开
MySQL的sql语句有好多能够省去server端的复杂处理 1.group_concat 这玩意儿能够实现 将一个字段如id查询出来 成为这种格式:121,122,123,124,125,12 ...
- Scala语言
一.Scala概述 Scala简介 Scala是一种针对JVM将函数和面向对象技术组合在一起的编程语言.所以Scala必须要有JVM才能运行,和Python一样,Scala也是可以面向对象和面向函数的 ...
- VC下加载多种格式图片的方法总结IPicture, CxImage, CImage(AtlImage), CPictureEx
尽管VC有提供相应的API和类来操作bmp位图.图标和(增强)元文件,但却不支持jpg.gif和png等格式的图片,而这几种格式却是常常要用到的.这里我给大家介绍两种办法来操作这些格式的图片. 1.用 ...
- [JZOJ5166] [NOIP2017模拟6.26卢学魔] 解题报告 (记忆化搜索|拓扑排序)
题目链接: http://172.16.0.132/senior/#main/show/5166 题目: 题解: 这个没什么好讲的,就是注意生产者没人吃也不是食物链,这告诉我们要积累生物知识注意细节 ...
- string的一些操作
//str.insert(1, "bbb"); //str.erase(5);//删除5以后的数字 //str.erase(str.begin()+2);//删除某个字符 //co ...
- Thread Control Block
Thread Control Block The following is the declaration of the Thread Control Block. struct tcb { u32_ ...
- nf_conntrack: table full, dropping packet. 问题
查出目前 ip_conntrack 记录最多的前十名 IP: # cat /proc/net/nf_conntrack|awk '{print $8}'|cut -d'=' -f 2|sort |un ...