【腾讯云 Cloud Studio 实战训练营】从0开始通过云IDE搭建律师项目


前言

最近在进行开源项目调试的时候,发现了一些有意思的小工具,一开始我是将自己的项目通过拉到本地就行开发 debug的,但是我发现如果就是简单改个样式,也需要重复整个流程,重复对程序员来说就是一个很不能忍受的问题了,我也一直在社区中检索,是否有同类的工具呢?是否有人已经意识到这个问题了呢?我之后在不断的翻阅下,我发现了 vercel,他能够我一提交代码就能自动给予出页面的预览,可以避免他人检验我fix的问题时环境部署的情况,后来我在想,他为什么不把代码编辑也一起做了呢?带着这个问题,我发现了 腾讯云 Cloud Studio,因为本人长期混迹于个个IT社区,所以第一时间就在csdn中报名了这次 Cloud Studio 实战训练营,我发现收货是大大出乎我的意料!!!

让我来讲讲这次实在训练营我的所知所感!!还望大家不吝赐教。

一、Cloud Studio是什么?

首先,我们要知其然而知其所以然,我们必然要明白,这是一个什么东西!!
这里。我们通过官方的一段简介来了解一下:

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

在这里插入图片描述

Cloud Studio 作为在线 IDE,包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

在这里插入图片描述
看关键词:基于浏览器的集成式开发环境(IDE)、云端、无需安装、插件扩展

这里不难看出这是一个集大成的 云端 IDE,你平时IDE有的功能他都有,没有的他也有,就是这么牛!

二、使用步骤

2.1 注册

  • 官方网站地址为:https://cloudstudio.net/
    在这里插入图片描述

打开官方链接,注册可以使用三种方式:

  • CODEING
  • 微信
  • GitHub

在这里插入图片描述

这里我直接通过微信注册了,因为微信很方便,只需要扫描一下这个二维码就行了,哈哈!

2.2 准备项目环境

这里我们在体验还是需要前人给我们一些指引的,我在看到活动的第一时间就加入了咱们官方的社群,里面有专门的小助手和技术大拿,随时给我们一些学习方向,同时,群里也提供了还几份实践,这里我们看到有个 使用Cloud Studio社区版快速构建Vue+Vite完成律师H5页面还原 刚好很感兴趣,我就按照这个来演示一下 Cloud Studio 云端IDE

首先就是我们需要一个原型,这个手册中也准备好了:

在这里插入图片描述

登录之后,我们要选择一下模板环境

在这里插入图片描述

可以看到,基本上我们知道的语言框架,都会在里面,可以说是非常全面了。

这里我们打算通过vue来实践,我们需要选择一个vue模板,往下滑

在这里插入图片描述
然后我们就会得到一个vue的大致框架
在这里插入图片描述

2.3 安装项目依赖

为了快速开发,一般我们会采用一些UI库,比如移动端我们经常会选择Vant,在css这块,我们也一般会使用SCSSLESS这些CSS预处理语言,本实验中我们选择Less

  1. 安装 Vant:
yarn add vant@^3.6.12
  1. 按需引入组件样式:

在基于 vitewebpackvue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。

相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致,我们推荐使用更简便的常规用法。

// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components@^0.22.7

本实验是基于 vite 的项目,所以,在根目录下,vite.config.js 文件中配置插件。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入以下2个库
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 增加以下配置
    Components({
      // 不生成类型声明文件自己写
      dts: false,
      // 样式需要单独引入
      resolvers: [VantResolver({ importStyle: false })]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在这里插入图片描述

  1. 安装 Less
yarn add -D less@^3.12.2

在根目录下,vite.config.js 文件中配置less配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 增加以下配置
    Components({
      // 不生成类型声明文件自己写
      dts: false,
      // 样式需要单独引入
      resolvers: [VantResolver({ importStyle: false })]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 增加以下css配置代码
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})
  1. 安装 normalize
yarn add -D normalize.css@^8.0.1

2.4 编写业务代码

  • 在 src/main.js 文件中引入包和库。
import { createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import { Tabbar, TabbarItem } from 'vant';
import 'vant/lib/index.css'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'

// 实例化 Vue 实例
const app = createApp(App)

// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);

// 挂载到 #app 节点
app.mount('#app')

  • 在src/index.html增加移动端默认样式:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!-- built files will be auto injected -->
    <script>
      // rem定义
      /*
      720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例
      */
      getRem(375, 100);

      window.onresize = function() {
        getRem(375, 100);
      };

      function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
        html.style.fontSize = (oWidth / pwidth) * prem + "px";
      }

      // 安卓机中,默认字体大小不让用户修改
      ;(function () {
        if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
          handleFontSize()
        } else {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', handleFontSize)
            document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
          }
        }

        function handleFontSize() {
          // 设置网页字体为默认大小
          WeixinJSBridge.invoke('setFontSizeCallback', {
            fontSize: 0,
          })
          // 重写设置网页字体大小的事件
          WeixinJSBridge.on('menu:setfont', function () {
            WeixinJSBridge.invoke('setFontSizeCallback', {
              fontSize: 0,
            })
          })
        }
      })()
    </script>
  </body>
</html>
  • 在src/src/App.vue增加主要代码
<template>
  <div class="container">
    <van-nav-bar
      title="e租宝案"
      left-arrow
    />

    <div class="list_box">
      <div class="list">
        <div class="list-head">开庭前准备 5</div>
        <div class="list_item">
          <div class="list_item-head">
            <van-checkbox v-model="radio" shape="square">核对证据原件并存档</van-checkbox>
            <div class="list_item-head_name">
              <div class="list_item-head_name-tag"></div>
              <div class="list_item-head_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list_item-info">
            <img class="list_item-info_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list_item-info_tag list_item-info_tag--gray">03-28 截止</div>
            <img class="list_item-info_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list_item list_item--blue">
          <div class="list_item-head">
            <van-checkbox v-model="radio1" shape="square">调取并查阅案卷</van-checkbox>
            <div class="list_item-head_name">
              <div class="list_item-head_name-tag"></div>
              <div class="list_item-head_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list_item-info">
            <img class="list_item-info_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list_item-info_tag list_item-info_tag--blue">下周一 截止</div>
            <img class="list_item-info_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list_item list_item--orange">
          <div class="list_item-head">
            <van-checkbox v-model="radio2" shape="square">领取传票并通知委托人</van-checkbox>
            <div class="list_item-head_name">
              <div class="list_item-head_name-tag"></div>
              <div class="list_item-head_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list_item-info">
            <img class="list_item-info_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list_item-info_tag list_item-info_tag--orange">明天 17:00 截止</div>
            <img class="list_item-info_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list_item list_item--red">
          <div class="list_item-head">
            <van-checkbox v-model="radio3" shape="square">写委托书</van-checkbox>
            <div class="list_item-head_name">
              <div class="list_item-head_name-tag"></div>
              <div class="list_item-head_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list_item-info">
            <img class="list_item-info_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list_item-info_tag list_item-info_tag--red">2019-2-12 截止</div>
            <img class="list_item-info_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>
      </div>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="comment-o">名片夹</van-tabbar-item>
      <van-tabbar-item icon="shop-o">官网</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      active: 0,
      radio: false,
      radio1: false,
      radio2: false,
      radio3: false,
    };
  },
};
</script>

<style lang="less">
html,
body {
  // font-family: PingFangSC-Medium, PingFang SC, Arial, 'Microsoft Yahei', sans-serif;
  font-family: Arial, 'Microsoft Yahei', sans-serif;
  font-size: 0.14rem;
  // line-height: 0.24rem;
  color: #333;
  background: #f9f9f9;
  // iPhone 横屏默认会放大文字,设置text-size-adjust会解决这个问题
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

* {
  outline-style: none !important;
}
</style>

<style lang="less" scoped>
.container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 0.5rem;
  background: #fff;
}

.list_box {
  padding: 0.2rem 0.1rem;
  box-sizing: border-box;
  .list {
    padding: 0.1rem 0.1rem 0.3rem;
    box-sizing: border-box;
    background: #f4f4f4;
    width: 100%;
    border-radius: 3px;
    &-head {
      padding: 16px 15px 12px 0;
      box-sizing: border-box;
      font-size: 0.16rem;
    }
  }
}

.list_item {
  background: #fff;
  padding: 0.1rem;
  box-sizing: border-box;
  border-radius: 3px;
  margin-bottom: 0.1rem;
  &--gray {
    background: #cccccc;
  }
  &--blue {
    border-left: 2px solid #75A8F7;
  }
  &--orange {
    border-left: 2px solid #E8A743;
  }
  &--red {
    border-left: 2px solid #E8311F;
  }
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_name {
      display: flex;
      align-items: center;
      &-tag {
        width: 6px;
        height: 6px;
        background: #5F8DD8;
        border-radius: 50%;
        margin-right: 0.05rem;
      }
      &-text {
        font-size: 0.12rem;
        color: #989A9C;
      }
    }
  }

  &-info {
    padding-top: 8px;
    padding-left: 25px;
    display: flex;
    align-items: center;
    &_img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    &_tag {
      padding: 0 5px;
      box-sizing: border-box;
      height: 18px;
      line-height: 18px;
      background: #989A9C;
      border-radius: 3px;
      margin-right: 10px;
      color: #fff;
      font-size: 0.1rem;
      &--gray {
        background: #cccccc;
      }
      &--blue {
        background: #75A8F7;
      }
      &--orange {
        background: #E8A743;
      }
      &--red {
        background: #E8311F;
      }
    }
    &_clock {
      width: 10px;
      height: 10px;
    }
  }
}
</style>

Cloud Studio 内置预览插件,非常方便,可以实时显示网页应用,当代码发生改变之后,预览窗口会自动刷新,然后就可以在 Cloud Studio 内实时开发调试网页了,还提供了二唯码在手机端进行调试。
在这里插入图片描述

在这里插入图片描述

复制内置 Chrome 浏览器窗口的地址栏,分享给团队的其它成员,免去了部署 nginx 的繁琐配置。

总结

这里我分两部分进行总结:

  1. 就是ide到底在什么场景下使用呢?
  2. 我使用的一些感受是怎么样的?

ide到底在什么场景下使用呢?

  1. 快速启动项目

如果你需要快速启动项目,就比方说我的开源项目,每次都需要逐步调试,我可以直接使用 Cloud Studio 的预置环境,直接创建对应类型的工作空间,快速启动项目进入开发状态,就不需进行繁琐的环境配置。

  1. 实时调试网页

Cloud Studio 内置预览插件,可以实时显示网页应用。这个我们在实践完后也发现,当代码发生改变之后,预览窗口会自动刷新,我们都不用自己配置nginx,就可以在线debug和分享我们的程序。

  1. 远程访问云服务器

Cloud Studio 支持连接我们自己的云服务器,这样就可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作,一个字:绝。

使用感受总结

在本次,我真的被云 IDE 的便捷与高效给震惊到了,它稳定、高效的开发环境,让我们可以随时随地地进行代码开发,还不用过多的消耗精力,一站式服务,解决开发环境部署问题,解放开发者的生产力,只需要专注业务逻辑开发,而不用担心环境的搭建和维护

在本次实践中,我们成功使用 Cloud Studio 快速搭建了律师系统,但是在我们真实的项目中,可能也会有一些不足之处,特别是对于大规模代码库和定制化环境的适应性相对较差,目前上面给出的一些都是标准化的脚手架,而我们的微服务、或者微前端会更加地难以治理。

综合来看,腾讯云 Cloud Studio 作为一款云 IDE 平台,。但在面对一些复杂项目和特殊需求时,开发者可能仍然需要依赖本地 IDE 来满足更灵活的配置和更多的插件支持。

不过,无论如何,云 IDE 的出现无疑为开发者带来了全新的体验,在学习、测试和临时开发需求等场景下表现非常突出,为开发者提供了一个方便、高效的开发利器。

Logo

领路信创诚邀您共建高质量内容社区,投稿申请~

更多推荐