Article directory
foreword
The continuous development of cloud computing technology has brought a new experience to code development, and cloud IDE (Integrated Development Environment) came into being. Tencent Cloud also jointly launched a one-stop cloud IDE - Cloud Studio with CODING. We will discuss the advantages, features and experience of cloud IDE, and use Cloud Studio to quickly build a mobile H5 page, deeply feel the convenience brought by cloud IDE.
IDE liberates developer productivity
With the rapid development of cloud computing technology, serverless computing has become a hot trend. Tencent Cloud's Cloud Studio is based on serverless computing, and through unified management of back-end services and resources, it avoids tedious cluster construction and system operation and maintenance work during the development process. Cloud IDE frees developers from the heavy environment construction and realizes the concept of Coding Anytime Anywhere.
Unlike traditional local IDEs, Cloud Studio is a browser-based integrated development environment. Users do not need to install any software, just open the browser, and can develop code anytime and anywhere. This feature is especially prominent in scenarios such as remote offices. Developers only need to have a networked device and can quickly start working without considering conflicts between different development environments and versions.
Powerful IDE
In this Demo demonstration, we will use Cloud Studio to build a mobile H5 page, and choose Vue3 as the development framework. Cloud Studio provides a wealth of features, allowing developers to obtain a development experience comparable to traditional local IDEs in the cloud. Code highlighting, auto-completion, Git integration, terminal, etc. are the basic functions of Cloud Studio, allowing us to write code and version control efficiently.
What's even more exciting is that Cloud Studio supports real-time debugging and plug-in expansion, which provides developers with a more convenient and flexible development environment. We can easily debug code, quickly locate problems, and install extensions as needed to further improve development efficiency. After registering with GitHub authorization, we go directly to the homepage, select the Vue.js template, and Cloud Studio will help us initialize the development Vue environment, and there is a small demo by default, so that we can start developing quickly without spending time building in a cumbersome environment superior.
Overall, Cloud Studio is powerful and easy to use, providing developers with a one-stop cloud development tool.
Let's take a look at how to use Tencent Cloud Cloud Studio to quickly build a mobile system.
Quickly build a Vue development environment
Use Cloud Studio to quickly build a Vue pre-built development environment
Sign up for Cloud Studio
It is very convenient to register and log in to Cloud Studio here, and three registration methods are provided:
- Register with a CODING account
- Register with WeChat Authorization
- Register with GitHub authorization (the method used in this article)
Register with GitHub authorization, and click Authorization to enter the home page. The following space templates are ready to use out of the box, which can quickly build an environment for code development. At the same time, Cloud Studio also gives all new and old users 3000 minutes of free working space per month.
Common integrated development environments are listed in the Cloud Studio console, which supports 40+ templates (framework templates, cloud-native templates, and website templates). Click the template card you want to enter the corresponding environment, or you can choose to create a new job The cloud server mode in the space, connect to the cloud server to build the development environment.
Enter the Vue preset development environment
Because the main purpose of this article is to use the cloud IDE Cloud Studio to quickly build and restore a mobile system, so here we choose to use the Vue template to realize the function. Click the Vue.js template card to enter the integrated environment loading page. After loading successfully, you can enter the development environment for programming.
After entering the Vue preset development environment, we found that Cloud Studio has initialized the Vue development environment for us, and also provided a small demo for our reference. After loading the page, the system-related configuration information is clearly displayed:
- The current directory is /workspace
- The current Node version is v16.17.0, and the Npm version is 8.18.0
- The environment does not support docker by default
- Nearly 2G of memory is free
These information shows that Cloud Studio provides developers with a stable and efficient development environment, and has sufficient computing resources to support development work.
Install related dependencies
In order to develop quickly, we generally use some UI libraries. For example, we often choose Vant for mobile terminals. For css, we also generally use CSS preprocessing languages such as SCSS and LESS. In this experiment, we choose Less.
(1). Install Vant:
yarn add vant@^3.6.2
(2). Import component styles as needed:
When using Vant in a project based on vite, webpack or vue-cli, you can use the unplugin-vue-components plugin, which can automatically import components and introduce component styles on demand.
Compared with conventional usage, this method can introduce the CSS style of the component on demand, thereby reducing part of the code size, but it will become more cumbersome to use. If the size requirements of the business for CSS are not particularly extreme, we recommend using the simpler conventional usage.
yarn add -D unplugin-vue-components@^0.22.7
This experiment is based on the vue-cli project, so configure the plugin in the vue.config.js file in the root directory.
// 引入以下2个库
const {
VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
devServer: {
disableHostCheck: true
},
// 增加以下配置
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
};
After completing the above two steps of installing and modifying the configuration file, you can directly use the Vant component in the template, and unplugin-vue-components will parse the template and automatically register the corresponding component.
(3). Install Less:
yarn add -D less@^3.12.2
yarn add -D less-loader@^7.0.1
In the root directory, configure the less configuration in the vue.config.js file.
const {
VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
devServer: {
disableHostCheck: true
},
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
// 增加 less 配置
css: {
loaderOptions: {
less: {
lessOptions: {
// 在这里添加自定义的 Less 配置
},
},
},
},
};
(4). Install normalize:
Normalize.css is a modern alternative to CSS resets that provides a strong cross-browser consistency in styling default HTML elements. Normalize.css is a modern, HTML5-ready, premium alternative to traditional CSS reset.
yarn add -D normalize.css@^8.0.1
The main file main.js introduces related libraries and packages
Above we installed some commonly used packages and libraries in development, after installation, we need to import and use them in the main file main.js.
Import packages and libraries in the src/main.js file.
import {
createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import {
Tabbar, TabbarItem } from 'vant';
import 'vant/es/toast/style'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'
// 实例化 Vue 实例
const app = createApp(App)
// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);
// 挂载到 #app 节点
app.mount('#app')
Homepage adds default style of mobile terminal
In the src/public/index.html file, add the following script code to use Rem to write code, and there are some default processing for Android and iOS models.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- 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>
Add main code
Copy the following as the main business code in 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 has a built-in preview plug-in, which can display the web application in real time. When the code changes, the preview window will be automatically refreshed, and the web page can be developed and debugged in real time in Cloud Studio. It also provides a QR code for debugging on the mobile phone.
Because this project is a mobile H5 project, you need to open the "toggle device" button to view the style.
Copy the address bar of the built-in Chrome browser window and share it with other members of the team, eliminating the cumbersome configuration of nginx deployment.
Applicable scenarios of IDE
This time, we are deeply impressed by the convenience and efficiency of the cloud IDE. Cloud IDE is especially suitable for the following scenarios:
- Learning and testing: For beginners or developers who need to quickly test code, cloud IDE provides a simple and direct development environment without worrying about local environment configuration and version issues.
- Temporary development needs: When it is necessary to quickly complete some development functions or perform temporary coding tasks, the cloud IDE can greatly improve development efficiency.
- Team collaboration: The cloud storage and collaboration features of the cloud IDE make it easy and efficient for multiple people to collaborate on the same project.
However, cloud IDEs also have some potential limitations. For some large-scale projects or applications that require complex environment configurations, cloud IDE may not be suitable for some large-scale projects or applications that require complex environment configurations. Since the cloud IDE is browser-based, the processing of large-scale code bases may be limited, resulting in slower editing and compiling speeds. In addition, for some special needs and customized environments, the local IDE may provide more flexible configuration options and more plug-in support.
Nonetheless, the advantage of a cloud IDE lies in its convenience and configuration-free nature, which provides an easier development experience for many developers. Especially for beginners and developers who need rapid development, cloud IDE provides a low-threshold, high-efficiency solution.
Summarize
As a one-stop cloud IDE platform, Tencent Cloud Cloud Studio provides developers with a stable and efficient development environment, enabling developers to develop code anytime, anywhere. Its characteristics of no configuration and serverless computing free the productivity of developers, allowing them to focus on programming itself without worrying about cumbersome environment construction and maintenance.
In this demonstration, we successfully used Cloud Studio to quickly build a mobile system, and deeply felt the convenience and efficiency brought by the cloud IDE. However, we have also seen some limitations of cloud IDEs, especially the relatively poor adaptability to large-scale code bases and customized environments.
On the whole, Tencent Cloud Cloud Studio, as a cloud IDE platform, performs well in scenarios such as learning, testing, and temporary development needs, providing developers with a convenient and efficient development tool. But when faced with some complex projects and special needs, developers may still need to rely on the local IDE for more flexible configuration and more plug-in support.
In any case, the emergence of cloud IDE undoubtedly brings a new experience to developers, making programming more convenient and efficient. For developers, choosing an appropriate IDE tool and combining the advantages of cloud and local will help improve development efficiency and better meet the challenges of various projects and requirements.