【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

news2024/12/24 3:06:16

【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

  • 前言
  • 一、基本介绍
    • 1.应用场景
    • 2.产品优势
  • 二、准备工作
    • 1.注册 Cloud Studio
    • 2.进入 Vue 预置开发环境
  • 三、使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面
    • 1.安装相关依赖包
    • 2.主文件引入相关库和包
    • 3.首页增加移动端默认样式
    • 4.增加主要代码
    • 5.验证
  • 四、将代码提交到远程仓库
  • 五、开发空间

前言

腾讯云与国内领先的一站式软件研发平台 CODING 联合推出一款完全基于云端的 IDE:Cloud Studio,实现 Coding Anytime Anywhere。

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个稳定的云端工作站。

用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。其功能包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

一、基本介绍

云端 IDE ( Cloud Studio )是腾讯云为编程者打造的专属开发利器,开发者无需考虑编程本身以外的限制,无缝对接部署至腾讯云,还有协作、团队管理等功能强势辅助,让开发者安心高效编程。官方网站

在这里插入图片描述

1.应用场景

  • 快速启动项目: 使用 Cloud Studio 的预置环境,直接创建出对应类型的工作空间即可进行开发,无需进行繁琐的环境配置;
  • 实时调试网页: Cloud Studio 内置预览插件,可以实时显示网页应用;当代码发生改变时,预览窗口会自动刷新;
  • 远程访问云服务器: Cloud Studio 支持连接自己的云服务器,可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作。

2.产品优势

  • 使用场景: Cloud Studio 适用于开发微信小程序、中小型项目、在线修改代码等多种场景;
  • 无需安装,跨平台: 基于 Web 端的代码编辑器,无论在哪里,都可以进行代码编写和编译运行;
  • 智能的代码提示: Cloud Studio 支持 Java、JS、HTML 和 TypeScript 的代码提示,基于当前文件上下文的理解,提高开发效率;
  • 错误提示: Cloud Studio 后台会不间断地对代码进行分析,并会在多处显示实时提醒,并会给予相应的修改建议。

二、准备工作

1.注册 Cloud Studio

这里注册和登录 Cloud Studio 非常方便,提供了三种注册方式:

  • 使用 CODING 账号注册;
  • 使用微信授权注册;
  • 使用 GitHub 授权注册。

在这里插入图片描述

  • 授权注册后即可进入首页,空间模板开箱即用,可以快速搭建环境进行代码开发;
  • 同时 Cloud Studio 也对所有新老用户每月赠送 3000 分钟的工作空间免费时长。

2.进入 Vue 预置开发环境

Cloud Studio 控制台中包含了常见的集成开发环境,支持 40+ 的多种模板(框架模板、云原生模板、建站模板),单击所需模板卡片即可进入对应环境中,也可以选择新建工作空间中的云服务器模式,连接云服务器进行开发环境搭建。

在这里插入图片描述

因为本文实验主旨是利用云 IDE Cloud Studio 快速搭建还原一个移动端 H5 的页面,所以,这里我们选择使用 Vue 模板来实现功能。点击 Vue.js 模板卡片,进入集成环境加载页面,加载成功后即可进入开发环境进行编程。

在这里插入图片描述


Cloud Studio 帮助我们初始化好开发 Vue 环境,并且默认有一个小 Demo,系统相关配置信息:

  • 服务器配置:2C 4G
  • 当前目录为:/workspace
  • 当前 Node 版本为 v16.17.0,Npm 版本为 8.18.0

在这里插入图片描述

  • 这里上手非常简单操作界面,基本跟我们平时使用的 VS Code 操作界面非常类似,可以快速迁移。

三、使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

1.安装相关依赖包

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

1)安装 Vant

yarn add vant@^3.6.12

在这里插入图片描述

2)按需引入组件样式

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

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

3)在 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 会解析模板并自动注册对应的组件。

4)安装 Less

yarn add -D less@^3.12.2

5)在 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,
      },
    },
  },
})

6)安装 Normalize

Normalize 是 CSS 重置的现代替代方案,可以为默认的 HTML 元素样式上提供了跨浏览器的高度一致性;相比于传统的 CSS Reset,Normalize 是一种现代的、为 HTML5 准备的优质替代方案。

yarn add -D normalize.css@^8.0.1 

2.主文件引入相关库和包

上面我们安装了开发中常用的一些包和库,安装完后,需要在主文件 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')

3.首页增加移动端默认样式

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>

4.增加主要代码

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>

5.验证

Cloud Studio 内置预览插件,可以实时显示网页应用,当代码发生改变之后,预览窗口会自动刷新,即可在 Cloud Studio 内实时开发调试网页,同时还提供二维码以方便在手机端进行调试。

在这里插入图片描述

使用内置 Chrome 浏览器窗口的域名,同样可以在外网进行访问。
在这里插入图片描述

四、将代码提交到远程仓库

1)创建 Coding 仓库账号、项目(我们下面以 Coding 为例)

  • Coding 仓库地址:传送门
  • GitHub 仓库地址:传送门

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2)初始化仓库(直接在终端操作即可)

git init
git add ./
git commit -m "feat: 初始化项目"

在这里插入图片描述

3)发布到 Coding 仓库
在这里插入图片描述

打开 Coding 查看仓库,确实已经初始化一个仓库:
在这里插入图片描述

五、开发空间

查看正在使用的开发空间,可以看到我们使用的模板是基于 Vue CLI 4.5.13 版本的。
在这里插入图片描述

点击图中的停止按钮,就可以停止该开发空间(后面使用时再进行启动即可)
在这里插入图片描述

通过费用中心,我们可以看到每月免费赠送时长的剩余时间。
在这里插入图片描述

如果觉得标准版本不符合要求,还可以进行配置升级,不过,修改需要下次重启后才能生效。可以根据自己的需求,购买不同价位的配置,如果只是在学习、写 Demo、小项目开发的场景下,默认的配置就足够了。
在这里插入图片描述

总结: 本文通过使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面项目,整体体验下来,时间基本上没花在依赖环境的准备上,开箱即用,不需要安装任何本地开发工具。所有的功能都在浏览器中进行操作,随时随地进行开发。

界面类似 VSCode,包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。对于电脑配置不高或者初学者来说,Cloud Studio 是一个不错的学习工具。

另外,Cloud Studio 还提供了多人协助的功能,多个开发人员可以在同一个云开发环境中进行协作,提高了协作效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/852105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【FAQ】安防监控视频EasyCVR平台分发的FLV视频流在VLC中无法播放

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上&#xff0c;视频监控…

C语言---数据结构实验---哈夫曼树及哈夫曼编码的算法实现---图的基本操作

文章目录 写在前面哈夫曼树及哈夫曼编码的算法实现实验内容代码实现 图的基本操作实验内容代码实现 写在前面 本篇实验代码非本人写&#xff0c;代码源自外部&#xff0c;经调试解决了部分warning和error后在本地vs上可以正常运行&#xff0c;如有运行失败可换至vs 未来会重构…

将朴素矩阵乘法在共享内存中分块,每个线程只计算结果矩阵中的单个元素

kenel的block中的每个线程用于计算共享内存中矩阵Pd中的一个元素Pd_(i&#xff0c;j)&#xff0c;每个线程都读取Md的一行和Nd的一列。Pd_(0&#xff0c;0)和Pd_(1,0)两个结果是由两个线程完成的。这里一开始只有Pd被加载进共享内存&#xff0c;Md和Nd还在全局内存中&#xff1…

嵌入式软件测试方法-质量模型

软件测试评估质量的时候用到的很多测试度量项 质量大师朱兰提出了“质量管理三部曲”&#xff0c;来对企业质量进行管理。 第一部曲&#xff1a;质量策划&#xff0c;致力于制定质量目标并规定必要的运行过程、准备相关资源以实现质量目标。 第二部曲&#xff1a;质量控制&am…

【java】【经验】java: 错误: 不支持发行版本 6

前言&#xff1a;配置过maven之后&#xff0c;发现原来的一些项目运行提示java: 错误: 不支持发行版本 6或者java: 错误: 不支持发行版本 5&#xff0c;主要原因&#xff1a;是因为项目使用的Java版本和安装的Java版本不符合 目录 1 设置项目java版本 2 设置模块版本 3 set…

马尔可夫链的性质和例子

马尔可夫链的重要性质以及两个例题如下&#xff1a; 注意&#xff1a; 例5中有几个地方需要注意&#xff1a; &#xff08;1&#xff09;为什么 P 11 P 22 p q ( 1 − p ) ( 1 − q ) &#xff0c;而 P 33 p q ( 1 − p ) P_{11} P_{22} pq (1-p)(1-q)&#xff0c;而P…

低代码开发平台:无限潜力,适用于各类应用程序开发!

随着技术的不断进步和市场需求的变化&#xff0c;低代码开发平台成为了构建应用程序的一种热门选择。低代码开发平台通过简化应用程序开发过程&#xff0c;降低了编程门槛&#xff0c;使非技术人员也能够快速构建功能强大的应用程序。不过&#xff0c;低代码开发平台究竟可以开…

[vue-element-admin]下载与安装

一、环境搭建 1 nodejs 源码地址 sudo apt install build-essential # 内含gcc g make等全家桶git clone git://github.com/nodejs/node.git # 下载源码 cd node sudo ./config sudo make && make install # 编译 node -v # 查看是否编译成功二、遇见的问题 问题…

清风数学建模——插值算法

插值法 文章目录 插值法作用定义概念一维插值问题一维插值多项式原理定理 拉格朗日插值法和牛顿插值法埃尔米特插值分段线性插值分段三次埃尔米特插值法代码三次样条插值及其代码例子n维数据的插值&#xff08;了解&#xff09; 作用 数模比赛中&#xff0c;常常需要根据已知的…

QT笔记——QT自定义事件

我们有时候想发送自定义事件 1&#xff1a;创建自定义事件&#xff0c;首先我们需要知道它的条件 1&#xff1a;自定义事件需要继承QEvent 2&#xff1a;事件的类型需要在 QEvent::User 和 QEvent::MaxUser 范围之间&#xff0c;在QEvent::User之前 是预留给系统的事件 3&#…

[ubuntu]创建root权限的用户

一、创建新用户 1、创建新用户 sudo useradd -r -m -s /bin/bash 用户名 # -r&#xff1a;建立系统账号 -m&#xff1a;自动建立用户的登入目录 -s&#xff1a;指定用户登入后所使用的shell2、手动为用户设置密码 passwd 用户名 二、为用户增加root权限 1、添加写权限 ch…

适配器模式:将不兼容的接口转换为可兼容的接口

适配器模式&#xff1a;将不兼容的接口转换为可兼容的接口 什么是适配器模式&#xff1f; 适配器模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换为客户端所期望的另一个接口。它允许不兼容的类能够合作&#xff0c;使得原本由于接口不匹配而无法工作的类能够一…

1.Fay-UE5数字人工程导入(UE数字人系统教程)

Fay-UE5数字人工程导入 1、工程下载&#xff1a;xszyou/fay-ue5: 可对接fay数字人的ue5工程 (github.com) 2、ue5下载安装&#xff1a;Unreal Engine 5 3、ue5插件安装 依次安装以下几个插件 4、双击运行工程 5、切换中文 6、检查插件已启用 7、测试运行

一文看懂intel处理器型号

cpu型号命名 cpu 后缀 外形/功能类型/细分市场后缀优化/设计台式机K高性能&#xff0c;未锁频Φ需要独立显卡S特别版T功耗优化生活方式X/XE最高性能&#xff0c;未锁频移动设备&#xff08;笔记本电脑 2、2 合 1 电脑&#xff09;HX最高性能&#xff0c;所有 SKU 未锁频HK高性…

Python源码:使用Tkinter写一个诗词答题软件

废话不多&#xff0c;直接上源码 # 导入用到的库 import tkinter from tkinter import * from tkinter.messagebox import * import random# 准备一个诗词题库列表 shici_list [(词苑千载&#xff0c;群芳竞秀&#xff0c;盛开一枝女儿花"说的是哪位历史上的哪位才女&am…

陀螺玩具跨境电商亚马逊CPC认证

陀螺指的是绕一个支点高速转动的刚体。陀螺是中国民间最早的娱乐工具之一.形状上半部分为圆形&#xff0c;下方尖锐。从前多用木头制成&#xff0c;现代多为塑料或铁制。玩时可用绳子缠绕&#xff0c;用力抽绳&#xff0c;使直立旋转。或利用发条的弹力旋转。传统古陀螺大致是木…

移动端自动化测试实战

UI自动化测试的价值 1、提升回归测试的效率 2、可以进行兼容性测试 UI 自动化测试应用场景 • 冒烟测试自动化&#xff1a;提测之前自动断言提测质量&#xff0c;提供准入参考。 • 功能测试自动化&#xff1a;辅助 QA 与测试工程师的快速验证。 • 验收测试自动化&#xf…

大模型AI人才培养研习会,上海、武汉站同期招募!

伴随预训练大语言模型技术引发的产业变革&#xff0c;市场对AI人才需求也同样发生着深刻变化&#xff0c;教育迎来了新的机遇与挑战。由中国自动化学会主办&#xff0c;百度公司联合知名高校承办的大模型AI人才培养研习会&#xff0c;首场将于8月19日在武汉、上海双城同期举办&…

python安装xgboost报错

ERROR: Could not find a version that satisfies the requirement xgboost (from versions: none) ERROR: No matching distribution found for xgboost 解决办法&#xff1a; 换成国内的pip源 pip install xgboost -i http://pypi.doubanio.com/simple/ --trusted-host py …

python3学习--使用pandas 数据透视表分析数据--入门示例

什么是透视表&#xff1f; 透视表是一种可以对数据动态排布并且分类汇总的表格格式&#xff0c;可以以多种方式和视角查看数据特征 Pandas库提供了一个名为pivot_table的函数&#xff0c;它将一个特性的值汇总在一个整洁的二维表中。 使用示例 pivot_table函数说明 pandas.…