vue使用技巧
引入外部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使用技巧的更多相关文章
- vue的技巧代码
转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
- vue 使用技巧总结 18.11
前言: 在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟 ...
- Vue 开发技巧或者说Vue知识点梳理(转,自个学习)
Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...
- Vue 开发技巧总结
博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法 自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...
- vue使用技巧(分页、nextTick、复制对象)
分页技巧 v1.0+ 版本的时候使用过滤器 limitBy 实现 v2.0+ 版本的时候使用compute使用 slice 方法实现 data:{ pageNum:10 }, computed:{ n ...
- Vue小技巧-懒加载
Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...
- 教你一个vue小技巧,一般人我不说的
本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...
- vue 使用技巧总结 19.01
组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...
- Vue小技巧,如何导入普通JS文件
最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库.Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成C ...
随机推荐
- 用OC基于链表实现链队列
一.简言 在前面已经用C++介绍过链队列的基本算法,可以去回顾一下https://www.cnblogs.com/XYQ-208910/p/11692065.html.少说多做,还是上手撸代码实践一下 ...
- 关于Unity中AI随机巡逻障碍物预判与快速运动时物理穿透的思考
如果不想用Unity的导航系统,很多时候就要解决如何预判前进路径中的障碍物问题,之前也看过一些非常经典的寻路算法例如AStar寻路,虽然也可实现功能,但总感觉有些小题大做.寻路算法大多数都是为了得出最 ...
- 【文本处理命令】之awk命令详解
一.awk命令简介 awk 是一种很棒的语言,它适合文本处理和报表生成,其语法较为常见,借鉴了某些语言的一些精华,如 C 语言等.在 linux 系统日常处理工作中,发挥很重要的作用,掌握了 awk将 ...
- Oracle define用法简介教程
目录 1.define常量用法 2.&和&&符号用法 继上一篇博客Oracle绑定变量学习笔记,再写一篇define变量的简单教程 @ 1.define常量用法 注意:defi ...
- 在新的电脑上的Git本地库 与远程库关联前的一些设置
由于你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用户主目录下(user/...),看看有没有.ssh目录,如果有,再看看这个目 ...
- Visual Studio 2019 16.1 使用 .NET Core 3.0
一.前言 早在很久之前微软便公布 .NET Core 3.0 将支持开发Winform应用程序等等新特性,现如今 .NET Core 3.0 预览版已经出来第五个预览版了,从 .NET Core 2. ...
- linux 安装 nvm, node.js, npm
vscode在wsl中开发node应用,如何安装nvm? git clone git@github.com:nvm-sh/nvm.git ~/.nvm 设置淘宝registry npm config ...
- oracle学习笔记(二十二) REF 动态游标
动态游标 定义语法 --声明 $cursor_name$ sys_refcursor --打开动态游标 open $cursor_name$ is 查询语句; --关闭游标 close $cursor ...
- centos 7 搭建Samba
一.Samba简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,由客户端和服务端构成. SMB(Server Message Block的缩写,即服务器消息块)主要是作 ...
- GO与PHP的AES交互,key长度问题
今天在使用go与php的AES加解密交互中,一直有个问题那就是在go中加密后,在php端始终都是无法解密,经过排查最后发现是加密key长度引起的问题, 这里简单记录下. go的AES使用的是第三方的库 ...