【腾讯云 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这块，我们也一般会使用SCSS和LESS这些CSS预处理语言，本实验中我们选择Less。

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

在基于 vite、webpack 或 vue-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 的出现无疑为开发者带来了全新的体验，在学习、测试和临时开发需求等场景下表现非常突出，为开发者提供了一个方便、高效的开发利器。

# 腾讯云 # ide # 云计算
Logo
信创技术联盟

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

更多推荐

花非花，物非物，AI岂是池中物(人工智能篇)

转载请标明出处：http://blog.csdn.net/DJY1992/article/details/74979436本文出自:【奥特曼超人的博客】AI（Artificial Intelligence），即人工智能。人工智能领域的研究包括机器人、语音识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大所谓的人工智能，是可以对人的意识、思维的

avatar 信创技术联盟

5 款非常好用的AI在线图片处理工具

作为一名 Web 前端开发工程师，我们经常需要处理一些图片。为了提升工作效率，我也会在平时收集整理一些小工具，因此，在今天的文章中，我将向你介绍 5 款可以在线处理图片的AI工具。使用这些工具，我们可以轻松应对工作中的许多场景。比如一键去物、一键抠像、一键去水印、无损图片放大、按图搜图等，拥有了它们，将大大提高我们的工作效率，强烈建议你收藏使用。01、Magic Eras...

avatar 信创技术联盟

AI 正变成黑客手中的强大武器

罪犯越来越能精准定位弱势用户和系统，充满AI技术的黑客时代来临。

avatar 信创技术联盟