首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

yarn start 为此我截了图 终端我用的是 window terminal,推荐我之前的文章:使用 ohmyzsh 打造 windows、ubuntu、mac 系统高效终端命令行工具,用过都说好...一句话概括open原理则是:针对不同的系统,使用Node.js的子进程 child_process 模块的spawn方法,调用系统的命令打开浏览器。...阅读源码前的准备工作 # 推荐克隆我的项目,保证与文章同步,同时测试文件齐全 git clone https://github.com/lxchuan12/open-analysis.git # npm...根据 README,我们在 open-analysis 文件夹下新建一个文件夹 examples ,里面存放一个 index.js。...总结 一句话概括open原理则是:针对不同的系统,使用Node.js的子进程 child_process 模块的spawn方法,调用系统的命令打开浏览器。

57540
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    超简单入门Vuex小示例

    生成基于vue的项目 前提是在自己的系统中安装好了Node.js、npm、cnpm等工具,并且配置好了相关的环境变量,然后选择一个趁手的IDE编辑器,我使用的是VSCode。...然后按上图执行项目,进入vuexexample项目根目录并使用npm run serve命令启动vuexexample项目: cd vuexexample npm run serve ?...vue create 命令有一些可选项,你可以通过运行以下命令进行探索: vue create --help 用法:create [options] 创建一个由 `vue-cli-service...对应的命令行中会运行创建项目的命令,创建项目模板。 进入项目目录,使用npm run serve先试着跑一下。 一般不会出现问题,试跑成功后,就可以写我们的vuex程序了。...介绍一下我们的超简单Demo,一个父组件Parent,一个子组件Child,父组件有一个数据,子组件有一个数据,想要将这两个数据都放置到vuex的state中,然后父组件可以修改自己的和子组件的数据。

    1.1K30

    Hugo在windows安装教程

    首先我得知道winget把hugo下载在哪里了。 1. 先确认下是否真的安装了 winget search 2....PaperMod主题 进入PaperMode主题的github地址,按照安装说明进行主题下载,下载方式有很多中,此处采用git clone方式(要提前安装git工具)。...启动服务 预览博客 hugo serve后面可以接一些参数,比较常用的有: --watch 选项可以在修改文件后自动刷新浏览器。这个很好用,就不用改下文章,还得重启服务预览。...所谓的根目录意思就是,我一输入localhost:1313之后,它访问的是哪个文件夹。 知道这层关系后,你就可以根据content文件夹的目录结构去映射localhost:1313链接路径。...直接使用hugo指令 public文件夹里面就是一个静态网站代码 如果你有服务器,直接把public里面的内容复制到服务器站点根目录就可以啦。 结语 好了。

    61020

    gitbook如何_github入门与实践

    我认为 Git 不仅是程序员管理代码的工具,它的分布式协作方式同样适用于很多场合,其中一个就是写作(这会是一个引起社会变革的伟大的工具!)。...所以在我发现 GitBook 之前,实际上我已经无数次想象过它的使用场景了。 咋一看 GitBook 的名字,你可能会认为它是关于 Git 的一本书。...安装完之后,就会多了一个 gitbook 命令(如果没有,请确认上面的命令是否加了 -g)。...上面我推荐的是 GitBook + Typora + Git,所以你还需要安装 Typora(一个很棒的支持 macOS、Windows、Linux 的 Markdown 编辑工具)和 Git 版本管理工具...当然,build 命令可以指定路径: gitbook build [书籍路径] [输出路径] serve 命令也可以指定端口: gitbook serve --port 2333 你还可以生成 PDF

    84620

    换一种姿势挖掘CORS漏洞

    CORS基础 CORS的全称是跨域资源访问,我们都知道同源策略(SOP)限制了我们的浏览器跨域读取资源,但是我们在设计开发一些网站的时候,本来就需要跨域读取数据,但是因为有同源策略的存在,我们要跨域就太麻烦了...xxe\.sh$ 这个正则表明该域接受所有来自xxe.sh域及其子域的请求,这里的配置是没啥问题的,但是如果xxe.sh子域存在xss漏洞或者子域名劫持漏洞的话,那么我们就可以利用了 那有人就要问了:...我是小白” ok,我们看一个实例吧,以www.redacted.com/api/return这个接口为例 它的cors配置就类似上述正则那样,允许所有子域访问,经过一番搜索,我在他的一个子域banques.redacted.com...* 这个配置允许所有来自xxe.sh域、它的子域以及这些域上任何端口发送过来的请求跨域访问 这次问题出在哪里? 其实和上一个?差不多,?...因为Apache和Nginx对这些有特殊字符的域名支持都不太好,所以,我们直接用NodeJS在我们的主机上搭建一个Server比较好 serve.js var http = require('http'

    1.2K20

    使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

    script Yarn workspace 允许我们通过 yarn workspace @my-app/* 命令模式访问任何子包,但是每次键入完整的命令将变得非常多余。...创建此文件夹后,将以下文件添加到其中: src/index.ts export const APP_TITLE = 'my-app'; 现在我们有一些要导出的代码,我们想告诉 TypeScript 从其他包中导入它时在哪里寻找它...如果你想在运行时改变端口,你可以用一个环境变量作为前缀来启动 serve 命令: PORT=4000 yarn serve。 Docker ? 本节将假定您已经熟悉容器的概念。...# 编译 app RUN yarn build # Port EXPOSE 3000 # Serve CMD [ "yarn", "serve" ] 我将尝试尽可能详细地说明这里发生的事情以及这些步骤的顺序为什么很重要...使 COPY 命令的使用更加容易。 如果您已经熟悉它,它的工作原理就像 .gitignore 文件一样。

    4.2K31

    Git Submodules 介绍(通俗易懂,总结了工作完全够用的 submodule 命令)

    背景我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏。这些游戏是不同的前端项目,而这些项目有很多公共依赖,我是如何管理的呢?...一些技术博客写的很详细,但不适合新人学习。官方文档很全面,适合了解详细命令,但主次不分明。本文会根据我的大量的 submodules 实践经验(包括工作和个人开发),只解释常用的命令。...如果一个大项目是一个大 Git 仓库,需要统一编译,不同的模块由不同团队维护,放在同一个 Git 仓库有诸多难处:例如多个团队的 MR 混在一起、权限难以区分等。...被当作 submodule 的 Git 仓库,其实不知道自己变成了 submodule,它更不知道爸爸们有谁。...submodule 开发常用操作如何给 submodule 仓库提交更新方法一,像普通仓库一样更新之前说过,submodule 仓库也是个普通的 Git 仓库,它并不知道自己有多少个爸爸。

    29.7K146

    使用Gitbook制作发布个人的电子书籍

    2.通过他们提供的命令行开发工具自己构建一个。...在book文件夹里有一个index.html文件,这个文件就是文档网站的HTM入口,把_book文件夹复制到服务器,然后把web服务的入口引向index.html即可完成文档网站的部署。...12.生成项目并上传到github仓库的gh-pages分支 由于打包命令太多,为了简单化,现在写一个脚本命令来自动执行。当然你也可以终端自己执行这些命令。.../_book # 初始化一个仓库,仅仅是做了一个初始化的操作,项目里的文件还没有被跟踪 echo "执行命令:git init\n" git init # 保存所有的修改 echo "执行命令:git...注意:如果没有gh-pages分支说明没有部署成功请查看刚才执行的终端看哪里报错了,解决报错直到成功部署。

    1.8K30

    Laravel Bash 别名

    Bash 别名是让你用更难忘的单词、缩写或者字符引用来另一个命令的方式。...例如,如果你使用 Git,你可能会在一天内运行很多次 git status,而为了节省时间和按键的次数,你可以将 git status 命名为 gs,它自动继承和调用正确的命令。...(我就喜欢看你一脸懵 B 再一副觉得好神奇的样子) 我请社区的人和我分享他们的别名配置,居然有不少的回应,更令我惊讶的是,几乎每个人都为 Artisan 命令做了快捷方式,还有几个是相似的。...然而每个人都还是有一个不同的快捷方式,例如 php artisan 命令的别名会有「a」、「pa」或「art」。...另外还有一些人为很巧合地为同一个命令赋予了同一个别名「nah」: nah='git reset --hard;git clean -df' 话说回来,这个命令真的挺好用的。

    1.8K20

    YesPlayMusic本地部署教程:打造你的私人云音乐播放器随时随地享受音乐

    输入下方命令进行安装: npm install 继续输入下方命令运行 node app.js 3.安装YesPlaymusic 安装完API后回到桌面,再开启一个新的命令执行符执行下方命令来安装Yarn...输入命令创建本地环境变量 copy .env.example .env 输入命令运行(网页端) yarn serve 如果像下方图片显示红色出错 点击ctrl+c,再次输入yarn serve运行 就可以复制红框里面的链接打开网页进入到...但如果想实现不在同一个局域网下,也能随时随地听到自己储存在本地的歌曲,就需要借助cpolar内网穿透工具来实现公网访问了~下面我将介绍一下如何安装cpolar内网穿透,并实现无公网IP访问本地YesPlayMusic...而且它的网址是由随机字符生成,不容易记忆。如果想把域名变成固定的二级子域名,并且不想每次都重新配置新的公网地址来访问YesPlayMusic,我们可以选择创建一个固定的http地址来解决这个问题。...登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。 保留成功后复制保留成功的二级子域名的名称。

    49810

    使用jekyll搭建个人博客

    1.成果展示 我的github仓库 我的博客 2.概述 之前曾经在Github Pages上使用jekyll搭建过一个博客,也绑定了自己的域名,使用体验十分好,每次在本地编辑完,只需要执行git push...教程中,最后使用如下命令启动Jekyll服务: jekyll serve -H 0.0.0.0 -P 80 这样启动的服务在你关闭命令行后就会停止,而我们在服务器的服务不可能保存命令行连接,因此需要修改为...扩展(markdown编辑器及图床工具) 编辑器 本地在编辑markdown时,有许多的工具可供选择,一般推荐的话都要列举一番优缺点,但是我不,我用过好几个,这个是最舒服的,所以给大家推荐一下。...Atom,我目前在用的有Mac版本,Ubuntu版本,都比较好用。 Atom相比于其他的编辑器,有一个很不错的项目展示系统,类似于这样: ?...图床 图床的选择有很多,比如公共的sm.ms免费图床,或者七牛云图床。 七牛云有一定的免费流量,超出之后需要收费,我觉得暂时是够用的,后续的费用也不是很高,可以接受。

    3.3K51

    我是如何调试 Webpack 问题的

    全文 3000 字,欢迎点赞转发 事情是这样的,前两天有个小伙伴问我:「为啥我的 webpack 运行完看不到我写的页面,而是:」 嗯?文件列表页?...好吧,这种情况我似乎没遇到过,一下子没法给出答案,只能要来关键代码: 重点看看 webpack.config.js 配置,用到 devServer + HMR 功能,其中: Webpack 版本为 5.37.0...emmm,成功勾起我的好奇心了,虽然写过一些 Webpack 源码分析的文章,但 webpack-dev-server 确实不在我的知识范围,好在我有秘籍《如何阅读源码 —— 以 Vetur 为例》,是时候展示真正的技术了...局部分析 切入点:验证 serve-index 包的作用 经过上面的分析,虽然我还不知道问题具体出在哪里,但大致可以判定跟 serve-index 包强相关,先搜一下 webpack-dev-server...第五步:总结 嗐,你看,这就是源码分析的过程,繁琐但不复杂,简直人人都能成为技术大牛啊。

    1.1K30

    vue -- Hello World

    前端技术发展太快了,前阵子在v站上看到一个帖说后端看不懂前端(这个笔者在目前所在公司真的有很深很深很深很深深深深的感受,也让我明白了做职业规划的重要性),其实,你找个前端过来也不一定能完全看得懂我个人认为...而且版本更新太快了,打开一个现代版的前端项目,配置文件就够你喝一壶,当然可能还有一些政治因素限制,僧多肉少的局面对源码也有一定的要求,导致难度曲线一下子就上去了,所以说比较难吧。...@vue/cli 注意: 你会发现不知道从哪个版本开始,原来有vue-cli的脚手架变成了@vue/cli,不仅仅是vue,很多框架的脚手架都是这样子的,例如gitbook。...,你可以在上面进行项目的创建和配置,当然你也可以怎么样啊,直接命令行的方式,如果你不是很熟悉的话,那就选默认,如果你很熟悉了知道像什么babel、vuex、vue-router、axios、mocha或者...我们通过在npm run serve这个命令就可运行我们的程序,默认脚手架生成的页面是这样子的 ?

    53110

    我是如何调试 Webpack 问题的

    事情是这样的,前两天有个小伙伴问我:「为啥我的 webpack 运行完看不到我写的页面,而是:」 ? 嗯?文件列表页?好吧,这种情况我似乎没遇到过,一下子没法给出答案,只能要来关键代码: ?...emmm,成功勾起我的好奇心了,虽然写过一些 Webpack 源码分析的文章,但 webpack-dev-server 确实不在我的知识范围,好在我有秘籍《如何阅读源码 —— 以 Vetur 为例》,是时候展示真正的技术了...虽然不知道这是在那一层生成的,但可以肯定绝对不是我写的,而且这是在 HTTP 层面发生的。...局部分析 切入点:验证 serve-index 包的作用 经过上面的分析,虽然我还不知道问题具体出在哪里,但大致可以判定跟 serve-index 包强相关,先搜一下 webpack-dev-server...第五步:总结 嗐,你看,这就是源码分析的过程,繁琐但不复杂,简直人人都能成为技术大牛啊。

    2.9K30

    小姐姐笔记:我是如何学习简单源码拓展视野的

    2.1 开始动手 我使用的编辑器是 VSCode。 打开 vue3-project 目录的 package.json,点击调试,选择 serve。...这一步操作,使得我们以 debug 的形式,运行了 vue-cli-service serve 这个命令。 ?...img 跟着文章实现到这里的时候,我有点懵逼,因为我不知道接下来为什么突然要搜索【launch-editor-middleware】这个库。...,是否存在 editor 猜测当前正在使用的编辑器:guessEditor 使用 child_process.spwan 异步打开一个子进程模块,它调起了 cmd.exe 工具打开我们的编辑器,并打开了文件...(这也可以理解为自顶向下的编程方法) 拓展视野:源码中包含了很多与 Node.js 相关的方法,有很多都是我不熟悉的,在解读源码的过程也是我学习 Node.js 的过程。

    89420

    三面面试官:运行 npm run xxx 的时候发生了什么?

    vue项目 npm run serve的时候,实际上就是执行了vue-cli-service serve 这条命令。...由此我们可以知道,当使用 npm run serve 执行 vue-cli-service serve 时,虽然没有安装 vue-cli-service的全局命令,但是 npm 会到 ....面试官:可以啊,真不错,但是我还想继续问问,你说.bin 目录下的文件表示软连接,那这个bin目录下的那些软连接文件是哪里来的呢?它又是怎么知道这条软连接是执行哪里的呢?...我(窃喜,这个我们刚刚也讨论了):我们可以直接在新建的vue项目里面搜索vue-cli-service [image.png] 可以看到,它存在项目最外层的package-lock.json文件中 从...我(疯狂点头):嗯嗯,是的,就是这样 面试官:我有点好奇。刚刚看到在node_modules/bin中 有三个vue-cli-service文件。为什么会有三个文件呢?

    1.5K30

    Git 版本控制的核心概念

    Git解决了这个问题? 也许你已经在自己的项目中增加了一个新功能,破坏了以前工作得很好的东西,但不知道在哪里找到错误或如何解决它。你已经在编辑器中关闭了文件,因此就不能再使用“撤消”了。...(如果你不知道这些变化是什么,那么“做出一些改变”的消息有什么用呢?想象一下,在相册中找到一个页面,上面写着“这里有一些人……”)始终使用良好的描述性提交消息来描述你添加到代码库中的功能或修复。...安装 首先,你可能已经安装了Git。打开终端或命令提示符并尝试运行 git --version。如果它显示了版本号,请跳过后面这一步。如果它提示不知道你的 git 是什么意思,你需要安装它。...再次使用 git status ,显示在暂存区域有一个新文件,但它现在变成了绿色!这是提示你它已经被添加到临时区域的简单方法。...我可以回顾一下我的提交历史,选择其中一个唯一的提交哈希值,然后用 git checkout 命令查看它。

    99150
    领券