网站开发流程可规划为哪三个阶段,出口网站制作,wordpress++压缩,装修设计公司介绍文章目录 写在前面CODINGCloud studio工具在线编码运行项目代码上传Cloud Studio 开发贪吃蛇写在最后 写在前面
期待已久的体验活动终于来了#xff0c;Clound Studio用了才知道有多爽#xff0c;Cloud Studio 是基于浏览器的集成式开发环境 (IDE)#xff0c;为开发者提供了… 文章目录 写在前面CODINGCloud studio工具在线编码运行项目代码上传Cloud Studio 开发贪吃蛇写在最后 写在前面
期待已久的体验活动终于来了Clound Studio用了才知道有多爽Cloud Studio 是基于浏览器的集成式开发环境 (IDE)为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装随时随地打开浏览器就能在线编程Cloud Studio 作为在线 IDE包含代码高亮、自动补全、Git 集成、终端等IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。 CODING
首先我们访问链接https://jihexiaodui.coding.net/准备好我们的CODINGCoding 平台是直接无缝集成 Cloud Studio 的。为了我们稍后更好的提交代码做足准备很简单注册好即可。 Cloud studio工具
上面的CODING注册好以后我们可以关闭了然后访问工具地址 点我跳转 注册和登录 Cloud Studio 非常方便提供了三种注册方式
使用 CODING 账号注册建议用coding方式登录就是我们上面刚注册的CODING 使用微信授权注册 使用 GitHub 授权注册 大家可以根据自己的习惯来选择这款在线编辑器支持C、C、C#、Java、Python、javaScript、go、R等多门语言工程开发、编码、编译支持团队成员协同开发基于强大的语法服务器LSP。拥有强大的断点调试能力。 Cloud Studio 控制台中罗列了常见的集成开发环境支持了40的多种模板框架模板、云原生模板、建站模板单击所需模板卡片即可进入对应环境中也可以选择新建工作空间中的云服务器模式连接云服务器进行开发环境搭建。非常适合需要学习一些技术或者临时的一些开发功能需求、测试一些代码片断、刷刷 LeetCode等不用为繁琐的本地环境、各种依赖的版本烦恼虽然 docker 可以将相关环境打包好但是还是需要下载镜像、启动容器。对于 docker 不熟悉的开发者反而增加了学习成本和电脑的硬件配置云 IDE 可以很好的解决这些问题有利于新技术的推广与应用。 在线编码
特别友好的是官方为我们提供了现成的模板来供我们体验跟熟悉这个工具下面我也来带大家来体验一波Cloud Studio 也对所有新老用户每月赠送 3000 分钟的工作空间免费时长。足够我来深度体验了作为前端开发的我自然选择前端技术相关的模板——Cloud Studio 构建Vue 快速还原 律师H5废话不多说直接开干 选择Vue模板 点击后就会为我们自动初始化框架相关配置该说不说单从前端的审美方面这个家在效果酷毙了 初始化框架 很快的时间一个vue框架初始化完成并且右侧自动呈现了效果 安装Vant
我们其实上面项目初始化完成后自动帮助我们将框架层面的依赖已经安装完成但是我们在真实的项目开发中其实还是会需要到大大小小的各种依赖比如我们第三方的一些ui库、插件等等所以我们也测试一下这里的对于第三方的依赖安装支持如何既然是我们要搭建移动端的项目自然我们这里选择VantUI
yarn add vant^3.6.12速度还是蛮快的安装完成依赖后我们就按需引入的方式讲一些我们demo中用到的样式进行引用当然你完全可以按照自己想法全盘引入也没有问题按需引入主要也是为了项目打包后的体积能够相对小一些。那我们按需引入是需要手动用到一个引用一个吗非也在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时可以使用 unplugin-vue-components 插件它可以自动引入组件并按需引入组件的样式。我们来安装使用一下
yarn add -D unplugin-vue-components^0.22.7因为我们初始化的这个Vue项目是基于Vite的所以我们使用 unplugin-vue-components需要你将vite.config.js 中的代码改写成下面这段你可以直接复制覆盖一下
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
// 引入以下2个库
import Components from unplugin-vue-components/vite;
import { VantResolver } from unplugin-vue-components/resolvers;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
我们还需要安装一下less因为在demo中我们会用到less写法Vite 和 Webpack 不同不需要 less-loader 等只需安装 less
yarn add -D less^3.12.2安装好后我们还需要在 vite.config.js 中配置一下当然你可以完整的复制下面代码再次进行覆盖
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vueimport Components from unplugin-vue-components/vite;
import { VantResolver } from unplugin-vue-components/resolvers;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,},},},
})安装normalize
Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。
yarn add -D normalize.css^8.0.1入口文件引入相关库
上面我们安装了开发中常用的一些包和库安装完后需要在主文件 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文件中添加以下script代码可以使用Rem编写代码另外对安卓和IOS机型有一些默认的处理。
!DOCTYPE html
html langenheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titleVite App/title/headbodydiv idapp/divscript typemodule 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我们再将app.vue中的代码替换为下面的代码
templatediv classcontainervan-nav-bartitlee租宝案left-arrow/div classlist_boxdiv classlistdiv classlist-head开庭前准备 5/divdiv classlist_itemdiv classlist_item-headvan-checkbox v-modelradio shapesquare核对证据原件并存档/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--gray03-28 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--bluediv classlist_item-headvan-checkbox v-modelradio1 shapesquare调取并查阅案卷/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--blue下周一 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--orangediv classlist_item-headvan-checkbox v-modelradio2 shapesquare领取传票并通知委托人/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--orange明天 17:00 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/divdiv classlist_item list_item--reddiv classlist_item-headvan-checkbox v-modelradio3 shapesquare写委托书/van-checkboxdiv classlist_item-head_namediv classlist_item-head_name-tag/divdiv classlist_item-head_name-texte租宝案/div/div/divdiv classlist_item-infoimg classlist_item-info_img styledisplay: block; srchttps://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg lazy-load alt /div classlist_item-info_tag list_item-info_tag--red2019-2-12 截止/divimg classlist_item-info_clock styledisplay: block; srchttps://cs-res.codehub.cn/vscode/serverless.svg lazy-load alt //div/div/div/divvan-tabbar v-modelactivevan-tabbar-item iconcomment-o名片夹/van-tabbar-itemvan-tabbar-item iconshop-o官网/van-tabbar-itemvan-tabbar-item iconuser-o我的/van-tabbar-item/van-tabbar/div
/templatescript
export default {name: App,data() {return {active: 0,radio: false,radio1: false,radio2: false,radio3: false,};},
};
/scriptstyle langless
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;
}
/stylestyle langless 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”按钮查看样式。更神奇的一点就是复制内置 Chrome 浏览器窗口的地址栏分享给团队的其它成员免去了部署 nginx 的繁琐配置。超级cool的功能支撑 代码上传
当然我们一般呢项目是要进行托管的同时我们的在线编辑器也对代码托管操作有很大的支持我们也简单来看下我们就把上面的demo上传到我们的一些主流的代码管理中
跟我们的VScode一样我们点击左侧的代码管理我们可以直接将代码发布到github以及coding我们就都来尝试一下吧 代码发布到CODING
再次打开我们的CODING平台点击创建项目选择了第一个模板 创建完成后我们回到主页然后点击这里确认授权就好了 点击发布到CODING储存库》选择账号》选择项目 Cloud Studio 开发贪吃蛇
上面按照官方提供的模板我们进行了尝试然后我也自己通过Cloud Studio 平台编写了一套基于Vue的贪吃蛇小伙伴们自己可以尝试基于Cloud Studio 平台开发一些项目来体验一下如果你想体验一下我写的这个贪吃蛇代码已经提交到了 CODING 平台上可以拉取下来跑一下 代码地址 贪吃蛇的主要实现思路很简单首先我们初始化好Vue项目后先来安装配置less跟上面的是一样的配置好后编写我们的HTML、CSS、JS代码即可,大概实现思路如下
dom结构如下p贪吃蛇/p这是一个段落元素用于显示游戏的标题。div classgamBox这是一个div元素用于包裹整个游戏界面。div classscreen这是一个div元素用于显示游戏区域。div classsnake这是一个div元素用于显示贪吃蛇。div classsnake-head这是一个div元素用于显示贪吃蛇的头部。span/span这是一个span元素用于显示贪吃蛇头部的表情。div classsnake-body这是一个div元素用于显示贪吃蛇的身体。div classfood这是一个div元素用于显示食物。span/span这是一个span元素用于显示食物的图标。div classintegral这是一个div元素用于显示游戏的积分信息。div等级gradespan classgrade/span/div这是一个div元素用于显示游戏的等级信息。div分数scorespan classscore/span/div这是一个div元素用于显示游戏的分数信息。
CSS结构如下 *设置所有元素的样式。margin: 0;和padding: 0;将所有元素的外边距和内边距设置为0。box-sizing: border-box;将元素的盒模型设置为border-box。p设置段落元素的样式。text-align: center;将段落元素的文本居中对齐。font-size: 23px;和font-weight: 600;设置段落元素的字体大小和字体粗细。.gamBox设置游戏界面的样式包括宽度、高度、边框、背景颜色、圆角、布局等。.integral设置游戏积分信息的样式包括宽度、高度、布局、字体大小、字体粗细等。.screen设置游戏区域的样式包括宽度、高度、边框、位置等。.snake设置贪吃蛇的样式包括头部和身体的样式。.food设置食物的样式包括宽度、高度、字体大小、位置等。
JS方法如下- foundationNumber基础倍数用于移动和食物随机位置计算。- maxGrade最大等级。- randomNumber(min, max)生成指定范围内的随机整数。 changeFoodSeat()改变食物的位置。 changeScore()改变分数和等级 handleWatchEnter(e)处理按键事件控制蛇的移动和吃食物。throttle(fn, wait)函数节流用于控制蛇的移动速度。 init()初始化游戏设置初始状态和界面。 direction蛇的移动方向。snakeLength蛇身体的长度数组。 snakeSeat蛇头的位置。 foodSeat食物的位置。register存储分数和等级的对象。
在onMounted函数中监听键盘按下事件根据按键改变移动方向。然后调用 init 函数初始化游戏。在 init 函数中设置蛇头位置清空蛇身体显示等级和分数改变食物位置并调用 handleWatchEnter 函数开始处理蛇的移动。在 handleWatchEnter 函数中根据移动方向更新蛇身体的位置判断是否吃到食物并处理相关逻辑检测是否碰到墙壁或自身更新蛇头位置最后通过递归调用自身实现连续移动。整体代码实现了贪吃蛇游戏的逻辑包括蛇的移动、食物的生成和吃食物的判定以及游戏结束的条件判断。
写在最后
到这里为止呢我们的项目代码就成功的上传到了CODING 平台其他的平台比如gitHub也做了很不错的支持也是非常方便的可以协同代码操作讲实话真的有被震撼到在线编辑器其实市面上还是蛮多的但是做到如此的地步的目前可能唯有Cloud studio我觉得这样一款产品能够支持这么多语言的开发编译可谓程序员的福音。
针对大部分程序员想简单的学习一门语言可能并么有计划学的多么深入只是因为一些需要简单的了解一下写一个demo但是即使这么个需求有时候可能我们需要在自己电脑上配置大量的语言环境这就容易劝退很多人更是有些语言的环境配置起来非常繁琐甚至耗费很长时间Cloud studio真的帮助我们解决掉了一个大的累赘我们只需要将所有经历都放在编码阶段即可无论是对于团队还是个人这样的协作方式都大大提高了开发效率。总体来说这次的 Cloud Studio 开发体验极佳。很赞推荐大家都来尝试
