[Tencent Cloud Studio 実践トレーニング キャンプ] 徹底した体験 | Tencent Cloud Studio を使用して Vue + Vite を迅速に構築し、弁護士の H5 ページを完成させます

前に書かれた言葉

まずCloud Studioとは何かというと、Tencent Cloudと国内有数のワンストップソフトウェア研究開発プラットフォームであるCODINGが共同で立ち上げた、いつでもどこでもコーディングを実現するための完全クラウドベースのIDE「Cloud Studio」です。

一言で言えば、これはブラウザベースの統合開発環境 (IDE) であり、開発者に安定したクラウド ワークステーションを提供します。

Cloud Studioを利用する場合、プログラマーはインストールなどのさまざまな複雑な操作を行う必要がなく、ブラウザを開くだけでいつでもどこでも利用できます。その機能には、コードのハイライト表示、オートコンプリート、Git 統合、ターミナルなどの基本的な IDE 機能が含まれており、リアルタイム デバッグ、プラグイン拡張機能などもサポートされており、開発者が開発、コンパイル、デプロイメントを迅速に完了するのに役立ちます。さまざまなアプリケーションの。

今回、CSDN と Tencent Cloud Studio は一連のアクティビティを開始し、技術的なライブ ブロードキャスト、実験プロジェクトへの実践的な参加、独自のプロジェクト テンプレートのアップロード、その他のアクティビティを通じて、開発者や友人はこのクラウド アーティファクト Cloud Studio を没入的に体験できます。この没入型の体験を、何もせずにブログに書くだけです。

1. Tencent Cloud Cloud Studio の概要

1.1 Cloud Studioの適用シナリオ

Cloud Studio には、次の一般的なアプリケーション シナリオがあります。

• クイック スタート プロジェクト: Cloud Studio のプリセット環境を使用すると、必要なタイプに適応するワークスペースを迅速に作成でき、面倒な環境構成プロセスを回避できます。
• リアルタイムで Web ページをデバッグする: Cloud Studio の組み込みプレビュー プラグインを利用すると、Web アプリケーションの効果をリアルタイムでプレビューできます。コードを変更するたびにプレビュー ウィンドウが自動的に更新され、変更の影響をすぐに確認できます。これにより、開発プロセスがスピードアップするだけでなく、問題を特定して調整を迅速に行うことができます。
• クラウド サーバーへの便利なリモート アクセス: Cloud Studio は個人のクラウド サーバーに接続します。エディターを通じて、クラウド サーバー上のファイルを簡単に参照し、リアルタイムのオンライン プログラミングと展開を実行できます。
• 統合された開発エクスペリエンス: Cloud Studio は、プロジェクトの起動、リアルタイム デバッグ、リモート アクセスなどの機能を統合した、統合された開発エクスペリエンスを開発者に提供します。これにより、プロジェクトの作成からデプロイメントまでのプロセス全体がスムーズになり、異なるツールを行き来する必要がなくなり、開発の効率と快適さが向上します。
• 継続的なイノベーションによる推進: Cloud Studio の強力な機能を使用すると、コア ビジネス コードの開発にさらに集中でき、イノベーションに重点を置くこの方法により、プロジェクトの継続的かつ効率的な開発が促進されます。

1.2 Cloud Studio開発の利点

• 複数言語のサポート: Cloud Studio には、ほとんどの開発者の開発ニーズを満たすことができるさまざまな主流の開発言語が含まれており、切り替えが簡単で効率的です。
• 幅広いアプリケーション: Cloud Studio は、WeChat アプレット開発、中小規模のプロジェクト構築、オンライン コード変更など、さまざまなシナリオで大きな強みを発揮しています。
• 面倒なインストールの必要がなく、複数のプラットフォームをサポート: Web ベースのコード エディターを使用すると、いつでもコードの作成、コンパイル、実行に参加でき、インストールやプラットフォームの制限という束縛がなくなります。
• スマート コード ヒント: Cloud Studio は、Java、JS、HTML、TypeScript のスマート コード ヒントを提供するだけでなく、現在のファイル コンテキストに基づいた深い理解を提供するため、開発効率が大幅に向上します。
• エラー プロンプト: Cloud Studio はバックグラウンドでコードの包括的な分析を継続し、複数の場所で警告メッセージをリアルタイムで監視および表示し、エラー プロンプトを表示します。さらに、システムは問題に対応する修正提案を提供するため、開発者は問題を迅速に解決し、コードの品質を向上させることができます。
• アプリケーションの迅速なデプロイメント: Cloud Studio は、ワンクリックでデプロイメントを実行し、30 以上の主流のフロントエンドおよびバックエンド フレームワークをインテリジェントに認識し、VS Code のマーケット関連プラグインを完全にサポートできます。

2. 没入型​​エクスペリエンスの開発により、H5 ページが迅速に構築されます

2.1 Cloud Studioへの登録とログイン

まず、次のハイパーリンクを使用して登録し、ログインします。

https://www.cloudstudio.net/?utm=csdn

ここで Cloud Studio コミュニティに登録してログインすると非常に便利です。次の 3 つの登録方法が提供されています。

1. WeChatアカウントで登録・ログイン認証を行う
2. GitHubで登録・ログイン認証を行う(GitHubでログインする場合、公開アプリ作成時に実名認証が必要)
3. CODINGアカウントで登録を行う

認証・登録後、ホームページにアクセスすると、すぐに使えるスペーステンプレートが用意されており、すぐにコード開発環境を構築できます。

2.2 開発スペースの作成

一般的な統合開発環境は Cloud Studio コミュニティ コンソールにリストされており、40 を超えるテンプレート (フレームワーク テンプレート、クラウドネイティブ テンプレート、Web サイト テンプレート) をサポートしています。[アプリケーションの作成] をクリックしてテンプレートを選択し、必要なテンプレート カードをクリックして選択します。対応する環境に入ります。

この機能は、いくつかのテクノロジーや一時的な開発機能要件の学習、いくつかのコードフラグメントのテスト、LeetCode のブラッシングなどに非常に適しています。面倒なローカル環境やさまざまな依存バージョンについて心配する必要はもうありません。

Docker は関連する環境をパッケージ化できると言う友人もいるかもしれませんが、それでもイメージをダウンロードしてコンテナーを起動する必要があります。また、Docker に慣れていない開発者にとっては、学習コストやコンピュータのハードウェア構成が増加しますが、Cloud Studio はこれらの問題をうまく解決できます。

2.3 Vue プリセット開発環境を構成する

Cloud Studio を使用してモバイル H5 ページを迅速に構築および復元するため、ここでは Vue テンプレートを使用して機能を実現することを選択します。Vue.js テンプレート カードをクリックして統合環境の読み込みページに入り、正常に読み込まれた後、プログラミングのための開発環境に入ることができます。

以下のようにワークスペースが起動していることがわかります。

Cloud Studio は開発 Vue 環境を初期化し、デフォルトで小さなデモがあり、システムの関連構成情報は次のとおりです。

• 現在のディレクトリは /workspace です
• 現在の Node バージョンは v18.13.0、Npm バージョンは 9.8.0 です。
• 環境はデフォルトで docker をサポートします

2.4 開発依存関係をインストールする

まず、Vant 依存関係パッケージを紹介します。

yarn add vant@^3.6.12

次に、必要に応じてコンポーネント スタイルをインポートします。

vite、webpack、または vue-cli に基づくプロジェクトで Vant を使用する場合、unplugin-vue-components プラグインを使用できます。これにより、コンポーネントを自動的にインポートし、オンデマンドでコンポーネント スタイルを導入できます。

この方法では、従来の使用方法と比較して、コンポーネントの CSS スタイルをオンデマンドで導入できるため、コードサイズが一部削減されますが、使用方法は煩雑になります。

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

次に、ルート ディレクトリの 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))
    }
  }
})

上記のインストールを完了して構成ファイルを変更すると、テンプレートで Vant コンポーネントを直接使用できるようになり、unplugin-vue-components がテンプレートを解析して、対応するコンポーネントを自動的に登録します。

次に、Less をインストールします

yarn add -D less@^3.12.2

関連するlessの設定をvite.config.jsファイルに追加します。

  // 增加以下css配置代码
  css: {
    
    
    preprocessorOptions: {
    
    
      less: {
    
    
        javascriptEnabled: true,
      },
    },
  },
})

この時点での全体的な構成を次の図に示します。

次に、normalize をインストールします。

Normalize.css は、CSS リセットの最新の代替手段であり、デフォルトの HTML 要素のスタイル設定において、ブラウザー間での強力な一貫性を提供します。Normalize.css は、従来の CSS リセットに代わる最新の HTML5 対応のプレミアムな代替手段です。

yarn add -D normalize.css@^8.0.1

2.5 main.js ファイルには関連するライブラリとパッケージが導入されています

上記の操作が完了したら、まず 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 ファイルに、Rem を使用してコードを記述する次のスクリプト コードを追加します。

<!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>

2.6 コアコードを書く

上記の関連操作を実行すると、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 でウェブページをリアルタイムで開発およびデバッグできるようになります。

次のように Web ページの詳細ページが表示されます。

2.7 コードリポジトリのアップロード

コードを書いたら、プロジェクトを Tencent Cloud のコーディングにリモートでアップロードできます。

ハイパーリンクは次のとおりです:コーディング ウェアハウスのアドレス

まず、プロジェクトテンプレートを作成することを選択します~

次のように基本情報を入力してください~

次に、Cloud Studio ターミナルで git 操作を実行します。関連するコードは次のとおりです。

// git初始化操作
$ git init
Initialized empty Git repository in /workspace/vuejs-quickstart/webapp/.git/
// 添加文件
$ git add ./
// 提交
$ git commit -m "feat: 初始化项目"
[master (root-commit) 3805d4c] feat: 初始化项目
 12 files changed, 9700 insertions(+)
 create mode 100644 .gitignore
 ......
 create mode 100644 vue.config.js
 create mode 100644 yarn.lock

次に、倉庫に提出することを選択します。

プッシュが完了すると、それがすでにコーディング ウェアハウスに存在していることがわかります。とてもシンプルで効率的で完璧です！

2.8 開発スペースを見る

実際のコード開発では、すべてのプロジェクトを確認できるので、非常に便利です。

SSH接続プロジェクトを作成できます。

プロジェクトはいつでも中止することも可能です。

3. 全文の要約

Cloud Studio を使用すると、依存環境の面倒な準備に時間を費やすことなく、Vue + Vite に基づいて弁護士の H5 ページ プロジェクトを簡単に構築でき、すぐに使用できます。この完全にブラウザで動作する開発環境では、ローカルの開発ツールに依存することなく、いつでもどこでもプロジェクトを開発できます。

Cloud Studio のインターフェイス設計は VSCode に似ており、コードのハイライト表示、オートコンプリート、Git 統合、ターミナル、その他の基本的な統合開発環境機能が組み込まれています。同時に、リアルタイム デバッグやプラグイン拡張などの高度な機能もサポートしているため、開発効率が大幅に向上し、開発者がアプリケーションの開発、コンパイル、展開タスクをより迅速に完了できるようになります。コンピュータ構成が限られている開発者であっても、初心者であっても、Cloud Studio は貴重な学習ツールです。

さらに、Cloud Studio には、複数人でのコラボレーションの強力な機能もあります。複数の開発者が同じクラウド開発環境で同時に共同作業できるため、チームのコラボレーション効率が大幅に向上します。この機能により、チーム メンバーはコードを共有し、リアルタイムでアイデアを交換できるため、プロジェクトでよりスムーズに共同作業できるようになります。

一言でまとめると、Cloud Studio はプロジェクト開発のための効率的、便利、強力なクラウド開発プラットフォームを提供します。

何を待っていますか? 興味のある友達は急いで使ってください！