引入外部js文件


1.在根目录创建文件夹,例如‘libs’,将js文件拷贝至libs目录下

2.修改webpack.dev.conf.js和webpack.prod.conf.js,在CopyWebpackPlugin下添加以下代码

new CopyWebpackPlugin [
....
{
from: path.resolve(__dirname, '../libs'),
to: './'
}
]

运行npm run build后,libs下的js文件会被放到dist目录下,组件内可以直接使用js文件内的方法

参照博客,前往>>>

vue启动ip与localhost访问


本地调试,运行npm run dev后,我们可以在地址栏中输入localhost+端口号访问我们的vue应用,但如果我们想要使用ip地址实现局域网内访问的话怎么办呢?

非常方便的是,我们只需要将config/index.js中dev下的【host】配置为本机的内网ip地址即可

dev:
{
env: require('./dev.env'),
port: 8888,
host: '192.168.1.101',
......
}

但是这样的话本地localhost就没法访问了,如果本地使用了代理啥的还得去更改,那localhost和ip能不能都可以呢?--可以的,操作如下:

1.上面更改的地方将host改为'0.0.0.0'

2.package.js文件scripts节点下的dev节点末尾,增加'--host 0.0.0.0'

再次运行npm run dev,你会发现localhost和ip都可以访问了

vue使用技巧的更多相关文章

  1. vue的技巧代码

    转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...

  2. vue小技巧之偷懒的文件路径——减少不必要的代码

    众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import  '../../../s ...

  3. vue 使用技巧总结 18.11

    前言: 在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟 ...

  4. Vue 开发技巧或者说Vue知识点梳理(转,自个学习)

    Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...

  5. Vue 开发技巧总结

    ​博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法 自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...

  6. vue使用技巧(分页、nextTick、复制对象)

    分页技巧 v1.0+ 版本的时候使用过滤器 limitBy 实现 v2.0+ 版本的时候使用compute使用 slice 方法实现 data:{ pageNum:10 }, computed:{ n ...

  7. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

  8. 教你一个vue小技巧,一般人我不说的

    本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...

  9. vue 使用技巧总结 19.01

    组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...

  10. Vue小技巧,如何导入普通JS文件

    最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库.Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成C ...

随机推荐

  1. Paper | Attention Is All You Need

    目录 1. 动机详述 2. 相关工作 3. 转换器结构 3.1 注意力机制详解 3.1.1 放缩的点积注意力机制 3.1.2 多头注意力机制 3.2 全连接网络 3.3 编码位置信息 [这是一篇400 ...

  2. Python连载44-XML其他注意点

    一.XML文件注意点 1.内容中不能出现尖括号 例如:下面是不合法的 <grade>成绩<90</grade> 解决方案:使用实体引用<EntityReferenc ...

  3. Python连载6-time包函数简介

    一.接连载5中time模块 1.函数:altzone (1)含义:获取当前时间与UTC时间相差的秒数,再有夏令时的情况下. (2)格式:time.altzone 2.函数:daylight (1)含义 ...

  4. angularjs事件通信$on,$emit,$broadcast详解

    公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...

  5. 【OCR技术系列之二】文字定位于切割

    要做文字识别,第一步要考虑的就是怎么将每一个字符从图片中切割下来,然后才可以送入我们设计好的模型进行字符识别.现在就以下面这张图片为例,说一说最一般的字符切割的步骤是哪些. 当然,我们实际上要识别的图 ...

  6. Unity 利用Cinemachine快速创建灵活的相机系统

    在第一或第三人称ACT和FPS游戏中,相机的运动需求是多种多样的,Unity内置的Cinemachine包可以助你快速实现不同相机功能,例如范围追踪,边界设置等. 例如,考虑这样一个功能,这在很多游戏 ...

  7. 黄聪:PHP转换网址相对路径到绝对路径的一种方法

    相信很多程序(尤其是采集类的程序)都会有需要把网址的相对路径转换成绝对路径的需要,例如采集到某页面的HTML代码中包含资源文件经常会看到这样的文件名: <link rel="style ...

  8. Oracle 中Number的长度定义

    Number可以通过如下格式来指定:Field_NAME Number(precision ,scale),其中precision指Number可以存储的最大数字长度(不包括左右两边的0),scale ...

  9. UITableView总结

    .协议介绍 UITableViewDataSource() UITableViewDelegate(常用) .刷新 下拉刷新: 上拉刷新 .搜索 .重用 自定义cell 不使用重用方法 注册Cell ...

  10. BayaiM__Linux安装MySQL的两种方法

    BayaiM__Linux安装MySQL的两种方法     < 以下内容,纯属抄袭,如有雷同,爱咋咋地 >  阅读(21210) | 评论(4340) | 转发(5660) | 删除 编辑 ...