我要评论一、写在前面
云端 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-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 {
### 一、网安学习成长路线图
网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
### 二、网安视频合集
观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
### 三、精品网安学习书籍
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。
### 四、网络安全源码合集+工具包
光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
### 五、网络安全面试题
最后就是大家最关心的网络安全面试题板块
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事it行业的老鸟或是对it行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
发表评论