【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5

🐱 个人主页:不叫猫先生,公众号:前端舵手
🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫优质专栏:vue3+vite+typeScript从入门到实践
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼(文末有我wx或者私信)

目录

  • 一、写在前面
  • 二、腾讯云 Cloud Studio(云端 IDE)
    • 1、应用场景
    • (1)在线编程
    • (2)腾讯云 SCF 平台集成
    • 2、产品优势
  • 三、构建移动端H5
    • 1、注册
    • 2、创建模版
    • 3、模版初始化
    • 4、开发移动端H5项目
    • 5、源代码管理
  • 四、常见问题
  • 五、相关链接

一、写在前面

云端 IDE在很多场景都有应用,比如githup等平台都有集成。另外云端 IDE之前我也接触过类似的,并且也集成在了我们自己项目中。但是功能并不是很完善,可以进行在线开发,提交代码。但是整体效果并不是很佳。了解到腾讯云 Cloud studio,发现这个云端 IDE功能很多,并且十分稳定。

二、腾讯云 Cloud Studio(云端 IDE)

腾讯云云端开发环境 Cloud Studio 是基于浏览器的集成式开发环境(Integrated Development Environment,IDE),为开发者提供了一个稳定的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。其功能包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。在这里插入图片描述

1、应用场景

(1)在线编程

Cloud Studio 内置丰富的开发环境,无需配置即可使用,只需打开浏览器,即可拥有完备的线上编程体验,基于 Web 端的代码编辑器,简洁的界面与全面的功能,非常适合在线施展编码潜能。

(2)腾讯云 SCF 平台集成

Cloud Studio 支持在线编辑、在线调试、持久化资源,为腾讯云 SCF 行业用户提供开发、测试到部署完整闭环的云原生开发体验。

2、产品优势

Cloud Studio 是腾讯云为用户打造的云端集成开发环境,其产品优势如下所示:

  • 全功能
    无需下载安装,随时随地开发编码,拥有媲美本地 IDE 的流畅编码体验。

  • 多环境
    内置 Node.js、Java、Python 等常见环境,也可以连接到云服务器进行资源管理。

  • 在线预览
    在线预览快速生成预览链接,方便分享他人展示项目或在线调试。

  • 兼容 VS Code 插件
    默认的配置无法满足需求,可以在线安装 VS Code 插件来增强使用体验。

  • 持久化和快速加载
    随开随写,随时保存,再也无需担心断电未保存,不浪费您的每一份灵感。

三、构建移动端H5

我们用云 IDE Cloud Studio 快速搭建还原一个移动端 H5 的页面,这里我们打算使用Vue3来实现,体验云 IDE 给我们带来的优势。最终结果如下图所示:
在这里插入图片描述

1、注册

腾讯云 Cloud studio官网注册账号即可,这里注册和登录 Cloud Studio 非常方便,提供了三种注册方式:

  • 使用 CODING 账号注册
  • 使用微信授权注册
  • 使用 GitHub 授权注册(本文使用方式)
    在这里插入图片描述

2、创建模版

Cloud Studio 控制台中罗列了常见的集成开发环境,支持了40+的多种模板(框架模板、云原生模板、建站模板),单击所需模板卡片即可进入对应环境中,也可以选择新建工作空间中的云服务器模式,连接云服务器进行开发环境搭建。这里我们选择Vue项目模版。
在这里插入图片描述

3、模版初始化

创建模版成功后,会进行模版初始化,会自动加载我们需要依赖,然后我们启动项目

yarn dev

接下来就看到项目的预览效果,如下:

4、开发移动端H5项目

(1)安装vant

yarn add vant@^3.6.12

(2)按需引入组件样式
在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。
相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 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))}}
})

(3)安装 Less
Vite 和 Webpack 不同,不需要 less-loader 等,只需安装 less

yarn add -D less@^3.12.2

vite.config.js文件需要增加以下配置:

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

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

yarn add -D normalize.css@^8.0.1

(5)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')

(6)移动端适配

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

(7)App.vue业务代码

<template><div class="container"><van-nav-bartitle="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 内实时开发调试网页了,还提供了二唯码在手机端进行调试。
因为本项目是移动端H5的项目,所以需要打开“toggle device”按钮查看样式。

(8)预览结果
重新启动项目

yarn dev

然后就可看到最先提到的预览图,我们也可以分享项目的地址链接,我的如下:https://tbnhxp-xdiocx-5173.preview.myide.io,在网页中显示如下:

在这里插入图片描述

5、源代码管理

这里使用CODING对代码进行管理,首先需要注册CODING,然后创建项目:
(1)注册
(2)创建项目
在这里插入图片描述
(3)CODING与腾讯云关联
进入对应的项目,点击“Cloud Studio”,可以看出 Coding 平台是直接无缝集成 Cloud Studio 的。在这里插入图片描述
(4)授权
在这里插入图片描述

(5)Cloud studio中选择源码管理侧边栏,然后点击【发布到CODING储存库】
在这里插入图片描述

(6)选择账户在这里插入图片描述
(7)推送
在这里插入图片描述
(8)查看项目
在这里插入图片描述

四、常见问题

(1) Cloud Studio 支持哪些语言环境?
Cloud Studio 目前支持 Python、Java、Node.js 等语言环境,我们还在不断扩展。

(2)Cloud Studio 可以用来做什么?
Cloud Studio 可以用来开发中小型项目,在线修改代码,或者连接云服务器进行部署工作。

(3)为什么我无法连接自己的云服务器?
如果您在创建运行环境为云服务器的工作空间时,看到连接不上的提示,可以检查下列几项:

  • 确定该云服务器正在运行中,且可以使用 SSH 连接。
  • 确定该云服务器的 SSH 连接端口没被防火墙拦截。
    确认云服务器 IP、用户名和端口都填写正确。
  • 确定已经将 Cloud Studio 公钥添加至云服务器 ~/.ssh/authorized_keys 文件中。
  • 确认 authorized_key 文件权限为600。
  • 尝试删除 Cloud Studio 资源目录,具体命令为 rm -rf ~/.coding-cloudstudio,然后重新进入工作空间进行一键修复。

(4)支持连接的云服务器有哪些?
Cloud Studio 目前支持64位 Ubuntu 16.04/18.04 和 CentOS 7。

(5)目前 Cloud Studio 兼容的 VS Code 版本?
目前工作空间兼容 VS Code 1.56。

(6)为什么云服务器工作空间会出现频繁的断线重新?
目前由于云服务器工作空间的流量是由 Cloud Studio 服务器进行代理,访问路径为本地机器 > Cloud Studio 代理服务器 > 云服务器, 会导致 Cloud Studio 由于网络环境的情况导致连接不稳定。目前 Cloud Studio 已经在优化访问路径为本地机器 > 云服务器,以此来提高连接稳定性。

五、相关链接

活动详情介绍
活动报名页面
Cloud Studio产品体验地址
Cloud Studio产品文档

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

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

相关文章

RGOS日常管理操作

RGOS日常管理操作 一、前言二、RGOS平台概述2.1、锐捷设备的常用登陆方式2.2、使用Console登入2.3、Telnet远程管理2.4、SSH远程管理2.5、登陆软件&#xff1a;SecureCRT 三、CLI命令行操作3.1、CLI命令行基础3.2、CLI模式3.3、CLI模式互换3.4、命令行特性3.4.1、分屏显示3.4.2…

多线程知识点

1.多线程 例如&#xff1a;一个短视频&#xff0c;一个线程复制管理视频&#xff0c;一个线程负责管理声音&#xff0c;一个线程负责管理弹幕 进程&#xff1a;Process,程序一旦开始运行就是是一个进程 线程&#xff1a;Thread&#xff0c;一个程序运行后&#xff0c;里面就包含…

微服务基础概念【内含图解】

目录 拓展补充&#xff1a; 单体架构 分布式架构 面向服务的体系结构 云原生 微服务架构 什么是微服务&#xff1f; 微服务定义 拓展补充&#xff1a; 单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;最终打成一个包部署 优点&#x…

XenDesktop5.6如何连接数据库

Citrix在数据库的连接方式上一直不统一&#xff0c;但是也还是有迹可循的。 经过了好长时间的下载以后&#xff0c;今天终于有时间来测试一下最新版本的XenDesktop 5 SP1&#xff0c;由于结合了其他组件和环境的需要&#xff0c;所以&#xff0c;选择了独立部署数据库&#xf…

3 个 ChatGPT 插件您需要立即下载3 ChatGPT Extensions You need to Download Immediately

在16世纪&#xff0c;西班牙探险家皮萨罗带领约200名西班牙士兵和37匹马进入了印加帝国。尽管印加帝国的军队数量达到了数万&#xff0c;其中包括5,000名精锐步兵和3,000名弓箭手&#xff0c;他们装备有大刀、长矛和弓箭等传统武器。但皮萨罗的军队中有100名火枪手&#xff0c;…

springBoot 配置文件引入 redis 的相关参数说明

在Spring Boot应用中使用Redis作为缓存或数据存储时&#xff0c;可以在应用的配置文件中配置相关参数。下面是常用的Redis配置参数及其说明&#xff1a; spring.redis.host: Redis服务器主机地址&#xff0c;默认为localhost。spring.redis.port: Redis服务器端口&#xff0c;…

Wlan——STA上线流程与802.11MAC帧讲解

目录 802.11MAC帧基本概念 802.11帧结构 802.11MAC帧的分类 管理帧 控制帧 数据帧 STA接入无线网络流程 信号扫描—管理帧 链路认证—管理帧 用户关联—管理帧 用户上线 802.11MAC帧基本概念 802.11协议在802家族中的角色位置 其中802.3标准属于以太网的一种帧格式…

React前端开发架构:构建现代响应式用户界面

在当今的Web应用开发中&#xff0c;React已经成为最受欢迎的前端框架之一。它的出色性能、灵活性和组件化开发模式&#xff0c;使得它成为构建现代响应式用户界面的理想选择。在这篇文章中&#xff0c;我们将探讨React前端开发架构的核心概念和最佳实践&#xff0c;以帮助您构建…

Revit 3D高效处理:cad exchanger sdk 3.21 Crack

3D 格式概述&#xff1a;Revit Revit 已成为寻求高效、准确的建筑信息建模的专业人士的首选解决方案。在这篇引人入胜的功能概述中了解 Revit 的特性和影响。 什么是Revit&#xff1f; Autodesk Revit 是一款流行的 CAD 软件&#xff0c;重点关注 BIM&#xff0c;被建筑师、工…

uniapp scroll-view横向滚动无效,scroll-view子元素flex布局不生效

要素排查&#xff1a; 1.scroll-x属性需要开启&#xff0c;官方类型是Boolean&#xff0c;实际字符串也行。 2scroll-view标签需要给予一个固定宽度&#xff0c;可以是百分百也可以是固定宽度或者100vw。 3.子元素需要设置display: inline-block&#xff08;行内块元素&#x…

时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现SO-CNN-BiLSTM蛇群算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | MATLAB实现SO-CNN-BiL…

如何让智能搜索引擎更灵活、更高效?

随着互联网的发展和普及&#xff0c;搜索引擎已经成为人们获取信息、解决问题的主要工具之一。 然而&#xff0c;传统的搜索引擎在面对大数据时&#xff0c;往往存在着搜索效率低下、搜索结果精准度不够等问题。 为了解决这些问题&#xff0c;越来越多的企业开始采用智能搜索技…

Python Pandas 处理Excel数据 制图

目录 1、饼状图 2、条形统计图 1、饼状图 import pandas as pd import matplotlib.pyplot as plt import numpy as np #from matplotlib.ticker import MaxNLocator # 解决中文乱码 plt.rcParams[font.sans-serif][SimHei] plt.rcParams[font.sans-serif]Microsoft YaHei …

Git学习笔记

Git学习笔记 文章目录 Git学习笔记一、版本控制二、Linux基础命令三、Git的环境配置四、Git的基本理论&#xff08;核心&#xff09;五、Git项目的搭建六、Git文件操作七、使用码云八、IDEA集成git九、Git分支 一、版本控制 什么是版本控制 版本控制&#xff08;Revision contr…

遥感云大数据在灾害、水体与湿地领域典型案例实践及GPT模型

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…

git管理代码

理论上改代码前要pull一次&#xff0c;然后在push前在pull一次 改代码前pull一次是为了获取最新的同步&#xff0c;但是coding也是需要时间的&#xff0c;难保敲代码的这段时间没有人动远程仓库的东西&#xff0c;所以在改完代码要push的时候也应该再pull一下看有无冲突&#x…

卷积神经网络——上篇【深度学习】【PyTorch】

文章目录 5、卷积神经网络5.1、卷积5.1.1、理论部分5.1.2、代码实现5.1.3、边缘检测 5.2、填充和步幅5.2.1、理论部分5.2.2、代码实现 5.3、多输入多输出通道5.3.1、理论部分5.3.2、代码实现 5.4、池化层 | 汇聚层5.4.1、理论部分5.4.2、代码实现 5、卷积神经网络 5.1、卷积 …

OLED透明屏介绍:领先科技的革命性创新

OLED透明屏作为一项领先的科技创新&#xff0c;在产品设计和用户体验方面展现出了巨大的潜力。 在这篇文章中&#xff0c;尼伽将介绍OLED透明屏的定义、特点、应用领域以及未来发展趋势&#xff0c;以帮助您全面了解OLED透明屏。 一、OLED透明屏的定义与原理 1.1 定义&#x…

卷积神经网络——下篇【深度学习】【PyTorch】

文章目录 5、卷积神经网络5.10、⭐批量归一化5.10.1、理论部分5.10.2、代码部分 5.11、⭐残差网络&#xff08;ResNet&#xff09;5.11.1、理论部分5.11.2、代码部分 话题闲谈 5、卷积神经网络 5.10、⭐批量归一化 5.10.1、理论部分 批量归一化可以解决深层网络中梯度消失和…

如何进行电脑文件夹分类与整理?

本科电脑用了四年&#xff0c;毕业后发现空间很满&#xff0c;但是真正有用的东西仿佛就一点。好像是在学开发的时候&#xff0c;听到一个老师说&#xff0c;根目录不要放太多文件夹&#xff0c;不然就相当于没有根目录了。刚好研究生有了新的台式电脑&#xff0c;开始有规划的…