vue-cli随机生成port源码的方法

vue-cli随机生成port源码的方法

const portfinder = require('portfinder')；
const port = await portfinder.getPortPromise()；

两行代码

端口搜索范围

默认情况下，portfinder将开始搜索8000并扫描，直到达到最大端口号（65535）

源码的路径是在node_modules/@vue/cli-service/lib/commands/serve.js

知识点扩展：

vue 随机色生成

把标题的颜色设置成随机色

<h4 v-rainbow>标题随机色</h4>

在script写局部自定义指令（如果想要写全局的需要在main.js里面书写）

局部

 directives:{
  'rainbow':{
    bind(el,binding,vnode){
    el.style.color = '#' + Math.random().toString(16).slice(2,8);//随机颜色
   }
  },
 }

全局（main.js）

Vue.directive("rainbow",{
  bind(el,bind,vnode){
   el.style.color = '#' + Math.random().toString(16).slice(2,8);//随机颜色
  }
})

总结

以上所述是小编给大家介绍的vue-cli随机生成port源码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法

    发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的文件,标注错误的地方是这样的一段代码: import {normalTime} from './timeFormat';

  • 详解VUE中常用的几种import（模块、文件）引入方式

    1 引入第三方插件 import echarts from 'echarts' 2 引入工具类 第一种是引入单个方法 import {axiosfetch} from './util'; 下面是写法,需要export导出 export function axiosfetch(options) { } 第二种  导入成组的方法 import * as tools from './libs/tools' 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中

  • 解决vue中修改export default中脚本报一大堆错的问题

    在写vue代码的时候遇到了一修改.vue文件中export default下脚本的时候总是报一堆莫名其妙的错误的问题: 出错原因: 在构建项目的时候Use ESLint to lint your code? (Y/n)选择了y,规范了js代码 解决途径: 在webpack.base.conf.js里面删掉/注释掉: { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), r

  • vue生成随机验证码的示例代码

    vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • vue-cli随机生成port源码的方法

    vue-cli随机生成port源码的方法 const portfinder = require('portfinder'): const port = await portfinder.getPortPromise(): 两行代码 端口搜索范围 默认情况下,portfinder将开始搜索8000并扫描,直到达到最大端口号(65535) 源码的路径是在node_modules/@vue/cli-service/lib/commands/serve.js 知识点扩展: vue 随机色生成 把标题的颜

  • 深入了解Vue使用vue-qr生成二维码的方法

    深入了解Vue使用vue-qr生成二维码的方法

    目录 npm下载 步骤 (1)导入 (2)vue-qr参数 示例 总结 "二维码"的英文是"QR Code","QR"是"Quick Response"的缩写,反映出这种二维码具有"超高速识读"的特点."Quick Response Code"也就是"快速响应码". npm下载 npm install vue-qr --save 下载成功: 步骤 (1)导入 impo

  • vue 虚拟dom的patch源码分析

    本文介绍了vue 虚拟dom的patch源码分析,分享给大家,具体如下: 源码目录:src/core/vdom/patch.js function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0]

  • 随机生成八位优惠码并保存至Mysql数据库

    目前很多商家通过优惠码做活动,现在我们简单的实现八位的优惠码,并保存在数据库中. 1.随机生成优惠码代码如下: import java.util.Random; /** *功能:随机生成优惠码 *@author iamwiam * */ public class Activatedcode { public int ACTIVATEDCODENUM = 200; //生成的优惠码数量 Random random = new Random(); String candicatedCode = "a

  • vue中实现动态生成二维码的方法

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    目录 一.效果 二.说明 三.思路 四.效果 五.代码实现 六.遇到的问题 一.效果 二.说明 公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后h5下载的实现原理是生成一个a标签链接,然后下载,在电脑模拟器可以下载,在微信浏览器一点反应没有,所以退一步,长按保存),下面是使用版本,UI插件用的是vant(有赞) vue:“^2.6.11”, “html2canvas”:

  • js基于qrcode.js生成二维码的方法【附demo插件源码下载】

    本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr

  • Nacos源码阅读方法

    Nacos源码阅读方法

    为什么我会经常阅读源码呢,因为阅读源码能让你更加接近大佬,哈哈,这是我瞎扯的. 这篇文章将会带大家阅读Nacos源码 以及 教大家阅读源码的技巧,我们正式开始吧! 先给大家献上一张我梳理的高清源码图,方便大家对nacos的源码有一个整体上的认识. 有了这张图,我们就很容易去看nacos源码了. 如何找切入点 首先我们得要找一个切入点进入到nacos源码中,那么就从nacos依赖入手 <dependency> <groupId>com.alibaba.cloud</groupI

  • 详解ZXing-core生成二维码的方法并解析

    二维码无处不在,扫一扫有礼品哦,现在二维码这么流行,想必大家不是很清楚二维码是怎么生成的吧,现在小编通过给大家分享本文帮助大家学习二维码生成的方法. 其实主要是利用goggle发布的jar来使用的此功能. 1.二维码的生成 将Zxing-core.jar 包加入到classpath下. 二维码的生成需要借助MatrixToImageWriter类,该类是由Google提供的,可以将该类拷贝到源码中,这里我将该类的源码贴上,可以直接使用. 直接可以生成二维码的代码 public void test

  • python随机生成指定长度密码的方法

    本文实例讲述了python随机生成指定长度密码的方法.分享给大家供大家参考.具体如下: 下面的python代码通过对各种字符进行随机组合生成一个指定长度的随机密码 python中的string对象有几个常用的方法用来输出各种不同的字符: string.ascii_letters 输出ascii码的所有字符 string.digits 输出 '0123456789'. string.punctuation ascii中的标点符号 print string.ascii_letters print s

随机推荐