web前端在线开发

背景：

由于软件限制，一般只能在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，就可以看到入库记录了，如图所示：