首页 > 其他分享 >web前端在线开发

web前端在线开发

时间:2022-12-12 13:57:49浏览次数:58  
标签:web github 在线 前端 stackblitz 点击 按钮 可以 代码

背景

由于软件限制,一般只能在win/osx/linux等电脑端进行编程,随着平板设备的升级,想在平板上编程的需求越来越强烈,之前有看过微软出品的github-codespaces ,体验是很好的,但是要收费就不推荐了。还有一种方法是在云服务器部署 code-server ,动手能力强的同学可以尝试一下,前提是需要购买云服务器。最后就是我推荐的 stackblitz ,不用部署,且免费功能够用,还支持预览。

使用前准备:

因为这个网站可以使用 github 管理代码,而且可以使用 github 账号关联登录,所以首先需要先注册 github 账号。

基本使用:

1.打开 https://stackblitz.com/ 使用github账号关联登录,成功后可以看到如下界面:

2.可以看到流行的前端开发语言都已经支持了,选择一个开发语言,会自动生成初始化模板,如图所示:

界面风格和vscode很像,更方便我们进行切换,左边是代码管理,中间是编辑区,右边是可以预览的视图区(支持热更新),会自动读取package.json文件安装依赖并运行项目,浏览器中的地址相当于代码片段的地址,可以在任意浏览器打开,可以方便代码分享。

联合 github 使用:

前面的内容在网上有很多,其实这篇文章最主要的是分享联合 github 仓库实现代码版本控制,这样有电脑的时候使用电脑,有平板的时候使用平板,可以进行无缝切换。

1.登录 github ,新建一个项目,这里我初始化了一个vue3的项目,如图所示:

2.stackblitz 是通过 URL 来进行项目导入的,可以查看 官方的说明 ,简单来说,是使用下面的链接,告诉 stackblitz 到哪里去获取源代码。

stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

3.对应我们的 github 仓库,链接就是stackblitz.com/github/guduqiucai/vue3-demo ,打开浏览器直接访问,会得到如下图所示页面

同样的,发现也是自动安装依赖,运行了项目。但是并没有完,现在的url也是一个可以随便打开的代码片段,现在还是无法直接将修改提交到 github ,接着看。

4.刚才的操作只是打开查看功能的代码片段,点击左上角的 Fork 按钮,建立一个自己的代码仓,可以看到左上角多了一个 save 按钮,和连接 github仓库的入口

5.我们直接点击 Connect repository 按钮,在弹窗中选择导入已存在的仓库

6.输入自己的 github 仓库链接,并点击 Import repository 按钮:

7.在左上角看到当前的分支,可以进行分支切换和新建。

8.我们打开 App.vue 文件,①写入文本;②可以在预览中看到修改后的效果;③点击 Commit 按钮;④写上入库注释;⑤点击弹框中的 Commit 按钮

9.提示 change commited 后,我们打开 github,就可以看到入库记录了,如图所示:

标签:web,github,在线,前端,stackblitz,点击,按钮,可以,代码
From: https://www.cnblogs.com/caicai521/p/16975841.html

相关文章

  • robotframework中导入selenium执行脚本后显示'WebDriver' object has no attribute 'f
    robotframework中导入selenium执行脚本后显示'WebDriver'objecthasnoattribute'find_elements_by_id',经检查是selenium版本导致,版本selenium4不支持find_elements_by_......
  • 微信公众号服务号配置对接在线客服系统教程
    如果只需要实现微信公众号的关注自动回复,关键词自动回复功能,普通订阅号就可以当需要对接实现公众号的模板消息提醒,模板消息与客服端H5的对接,访客在微信点击或扫码时获取到......
  • 前端_js设计模式
    什么是设计模式1.什么是设计模式设计模式是前人总结出的,解决开发中某类问题的方法;我们在过去的代码编写中已经接触过很多的设计模式了,只不过当时咱们不知道这就......
  • webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——
    使用three.js(webgl)搭建智慧楼宇、3D定位、三维室内定位、设备检测、数字孪生、物联网3D、物业3D监控、物业基础设施可视化运维、3d建筑,3d消防,消防演......
  • Tomcat 配置web项目
    1.首先你需要安装好Tomcat然后启动它,并将你下载的java的web项目源码放在tomcat目录的看到这个界面就是启动成功了2.然后将你的javaweb源码存放在tomcat的webapps目录......
  • Webpack构建速度优化
    前言当我们的项目越来越大,webpack的配置项越来越多时,构建速度会越来越慢,所以我们需要通过一些配置来提高webpack的构建速度。目录缩小范围noParseIgnorePlugin优化......
  • Webpack最佳实践
    先简单回顾下webpack原理Webpack可以看做是模块打包机,把解析的所有模块变成一个对象,然后通过入口模块去加载我们的东西,然后依次实现递归的依赖关系,通过入口来运行所有......
  • 9 年小厂老前端的年终总结
    前言时光飞逝,岁月如梭,转眼来到2021年底,这一年少了些理性,多了点感性,少了些自由,多了一份责任,这一年视乎没做什么事情,但又过得非常充实,最欣慰的是回家有个人等待着我的拥抱,最......
  • 【敏捷研发系列】前端DevOps流水线实践
    作者:胡骏一、背景现状软件开发从传统的瀑布流方式到敏捷开发,将软件交付过程中开发和测试形成快速的迭代交付,但在软件交付客户之前或者使用过程中,还包括集成、部署、运维等环......
  • 杭漂5年前端感受-白驹过隙,人生如梦 | 2022 年中总结
    高中物理老师每次开年级大会的时候,开场白总是喜欢说一句:”人生如梦!“,当时没有什么感受,直到工作了几年以后,这种感受尤为强烈。算上读大学的时间,来杭州已经9年了,4年读大学+5年......