如何查看用wordpress建的站点,电子商务网站开发过程论文,网站关键词的使用,德阳市住房和城乡建设局网站首页前言 【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面一、Cloud Studio介绍1.1 Cloud Studio 是什么1.2 相关链接1.3 登录注册 二、实战练习2.1 初始化工作空间2.2 开发一个简版的点餐系统页面1. 安装 antd-mobile2. 安装 less 和 less-loader3. … 前言 【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面一、Cloud Studio介绍1.1 Cloud Studio 是什么1.2 相关链接1.3 登录注册 二、实战练习2.1 初始化工作空间2.2 开发一个简版的点餐系统页面1. 安装 antd-mobile2. 安装 less 和 less-loader3. 暴露 webpack 配置文件4. 安装 normalize5. 上传项目需要的素材6. 替换App.js主文件7.启动项目 三、发布到仓库四、开发空间管理 总结 前言
最近也是有机会参与到了腾讯云举办的 腾讯云 Cloud Studio 实战训练营借此了解了 腾讯云 Cloud Studio 产品。腾讯云 Cloud Studio 的出现是有一定创新性的使用它进行开发免去了使用一些传统开发工具的成本。如下载一个开发工具就要进行基本的开发环境配置以及下载、安装和占用本地存储等等成本。下面就来使用 腾讯云 Cloud Studio 做一个实战案例来深入了解该产品的优越性吧 【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面
一、Cloud Studio介绍
1.1 Cloud Studio 是什么
Cloud Studio 是 基于浏览器的集成式开发环境IDE为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装随时随地打开浏览器就能在线编程。
Cloud Studio 作为 在线 IDE包含 代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。
此外Cloud Studio还支持与其他开发者的协作可以轻松地共享代码和项目并进行实时的协同编辑。
目前Cloud Studio 团队基于老用户使用体验角度和新用户上手成本考虑现实行每月赠送 3000 分钟的工作空间免费时长所以我们可以来使用送的时长来认真体验下吧
1.2 相关链接
Cloud Studio官网地址https://www.cloudstudio.net/Cloud Studio文档地址https://cloudstudio.net/docs/
1.3 登录注册
1打开Cloud Studio官网点击注册https://www.cloudstudio.net/
然后大家按自己的情况选择一种账号进行注册登录就好。
注册登录后来到这个页面就算正常啦可以看到Cloud Studio提供了众多开发环境及模板下面就来看看到底怎样使用吧 二、实战练习
本文打算用云 IDE Cloud Studio 快速搭建并开发还原一个移动端 React H5 的简版点餐系统页面从 0 到 1 体验云 IDE 给我们带来的优势不需要装各种环境简单易用开箱即可上手。
2.1 初始化工作空间
来到 Cloud Studio 首页之后可以看到 Cloud Studio 提供了很多模板框架模板、云原生模板、建站模板都是预装环境了开箱即用的模板可以快速搭建环境进行代码开发同时 Cloud Studio 也对所有新老用户每月赠送 3000 分钟的工作空间免费时长。
此时选择创建一个React模板并等待云 IDE 初始化完毕。
即使从来没有学习过 React只需要打开对应的 React 框架模板即可开始初始化一个 React 的工作空间在等待不到 10s 左右与带宽网速差异有区别云 IDE 就已经初始化完毕。
等待初始化完毕之后在我们的右侧可以看到一个实时预览的预览界面然后在下面的控制台输入以下指令。
// 进入当前目录
cd ./
// 设置port的环境变量
set port3000
// 导出port的环境变量
export PORT3000
// 相当于 yarn install安装相关依赖
yarn
// 启动开发环境
yarn start --port3000这样我们就完成一个对 React 项目初始化的过程了用一台新主机只要有浏览器就不需要准备任何环境不需要安装任何软件只需要能够联网就能在几分种内初始化完成这对新技术的学习是非常高效的。
2.2 开发一个简版的点餐系统页面
主旨是为了开发一个 React H5 的页面为了快速开发通常会使用到UI组件库这里我们使用的是 antd-mobile UI库antd-mobile 是 Ant Design 的移动规范的 React 实现。
1. 安装 antd-mobile
antd-mobile 支持基于 Tree Shaking 的按需加载大部分的构建工具例如 webpack 4 和 rollup都支持 Tree Shaking所以绝大多数情况下你无需做额外的配置即可拥有较小的包体积。
yarn add antd-mobile^5.32.0# 或者npm install --save antd-mobile^5.32.0在终端输入代码进行安装即可。
安装完成后在package.json中会有显示。
2. 安装 less 和 less-loader
平时我们在进行React项目开发的时可能会使用到Less、Sass进行样式开发默认 React 是集成Sass的因此对于习惯书写Less的小伙伴十分不友好所以我们需要在React项目中配置Less。
yarn add -D less^3.12.2 less-loader^7.0.1这里注意不带版本安装为高版本项目会启动失败所以需要标注好版本后进行安装。 这样就安装好了继续下一步。
3. 暴露 webpack 配置文件
在webpack.config.js中进行配置这样进行配置需要暴露出React的config配置文件警告该操作不可逆
npm run eject输入 ‘y’ 后项目会自动进行解构操作。
完成命令之后项目根目录会出现一个config文件夹找到 config/webpack.config.js 文件按Ctrl F 查找关键字 “style files” 。
这块是设置 css 相关的代码。
将上图的70行到73行代码改成less将以下代码复制过去即可。
// style files regexes
const cssRegex /\.css$/;
const cssModuleRegex /\.module\.css$/;
const sassRegex /\.(scss|sass)$/;
const sassModuleRegex /\.module\.(scss|sass)$/;
// 新增加 Less 代码
const lessRegex /\.(less)$/;
const lessModuleRegex /\.module\.(less)$/;继续在查找框中输入 “sassRegex” 能够找到以下代码。 这里和前面配置一样仿照sass的配置进行less的配置。
// less
{test: lessRegex, // 有改动exclude: lessModuleRegex, // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},less-loader // 有改动),sideEffects: true,
},
{test: lessModuleRegex, // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},less-loader // 有改动),
},这样就完成了webpack.config.js配置less可以在项目中使用less样式了。
4. 安装 normalize
Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。
5. 上传项目需要的素材
以前上传服务器代码需要使用 Scp 命令或者装 Remote SSH 插件支持Cloud Studio 可以很方便默认支持文件上传与下载等常规的操作与本地 IDE 体验一致
可以直接拖动文件到 IDE 编辑区域右击 IDE 编辑区域上传
直接将 img 文件夹拖动到src目录下即可。 img下载方式img
6. 替换App.js主文件
以下是点餐系统的主要业务代码复制到src/App.js直接替换即可。
import ./App.css;
import React, { useState } from react
import { NavBar, Toast, Swiper, SideBar, TabBar, Badge } from antd-mobile
import {AppOutline,ExclamationShieldOutline,UnorderedListOutline,UserOutline,
} from antd-mobile-icons
import BannerImg from ./img/banner.png
import HotImg from ./img/hot.png
import Food1Img from ./img/food1.png
import Food2Img from ./img/food2.png
import CartImg from ./img/cart.png
import ./index.less
import normalize.cssfunction App() {const [activeKey, setActiveKey] useState(1)const tabbars [{key: home,title: 点餐,icon: AppOutline /,},{key: todo,title: 购物车,icon: UnorderedListOutline /,badge: 5,},{key: sale,title: 餐牌预告,icon: ExclamationShieldOutline /,},{key: 我的,title: 我的,icon: UserOutline /,badge: Badge.dot,},]const back () Toast.show({content: 欢迎进入点餐系统,duration: 1000,})const items [, , , ].map((color, index) (Swiper.Item key{index}img style{{width: 100%}} src{ BannerImg }/img/Swiper.Item))const tabs [{ key: 1, title: 热销 },{ key: 2, title: 套餐 },{ key: 3, title: 米饭 },{ key: 4, title: 烧菜 },{ key: 5, title: 汤 },{ key: 6, title: 主食 },{ key: 7, title: 饮料 },]const productName [小炒黄牛肉,芹菜肉丝炒香干,番茄炒鸡蛋,鸡汤,酸菜鱼,水煮肉片,土豆炒肉片,孜然肉片,宫保鸡丁,麻辣豆腐,香椿炒鸡蛋,豆角炒肉]const productList productName.map((item, key) {return {name: item,img: key % 2 1 ? Food1Img : Food2Img}})return (div classNameAppNavBar onBack{back} style{{background: #F0F0F0,fontWeight: bold}}点餐/NavBardiv classNamehead-cardSwiperstyle{{--border-radius: 8px,}}autoplaydefaultIndex{1}{items}/Swiper/divdiv classNameproduct-boxSideBar activeKey{activeKey} onChange{setActiveKey}{tabs.map(item (SideBar.Item key{item.key} title{item.key 1 ? divdiv classNameflex-centerimg style{{display: block,width: 16px,marginRight: 5px}} src{ HotImg }/imgdiv{ item.title }/div/div/div : item.title} /))}/SideBardiv classNameproduct-rightdiv classNameproduct-title热销/divdiv classNameproduct-list{productList.map((item, key) {return (div classNameproduct-itemdiv classNameproduct-item-leftimg style{{display: block,width: 76px,marginRight: 5px}} src{ item.img }/imgdiv classNameproduct-item-left-infodivdiv classNameproduct-item-left-info-name{ item.name }/divdiv classNameproduct-item-left-info-number月售{key 1}0 赞{key * 5}/div/divdiv classNameproduct-item-left-info-price¥10/div/div/divdiv classNamecartimg style{{display: block,width: 30px,marginRight: 5px}} src{ CartImg } onClick { () Toast.show({content: 添加购物车成功}) }/img/div/div)})}/div/div/divTabBar{tabbars.map(item (TabBar.Itemkey{item.key}icon{item.icon}title{item.title}badge{item.badge}/))}/TabBar/div);
}export default App;
然后在 src 目录下创建一个 index.less 文件将以下 less 相关的代码复制到该文件中即可。
.head-card {padding: 10px 20px;box-sizing: border-box;
}.flex-center {display: flex;align-items: center;
}.product-box {display: flex;align-items: center;width: 100%;height: calc(100vh - 45px - 130px - 50px);
}.product-right {flex: 1;height: 100%;
}.product-title {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;padding-bottom: 10px;
}.product-list {height: calc(100% - 24px);overflow-y: auto;
}.product-item {position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;padding-left: 10px;box-sizing: border-box;margin-bottom: 10px;-left {display: flex;-info {padding-left: 3px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;-name {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;}-number {padding-top: 3px;font-family: PingFangSC-Regular;font-size: 11px;color: #787878;text-align: left;}-price {font-family: PingFangSC-Regular;font-size: 18px;color: #FF1800;text-align: left;}}}
}.cart {position: absolute;right: 10px;bottom: 0;
}7.启动项目
完成上述操作后在控制台中输入 yarn start 即可启动该项目。
Cloud Studio 内置预览插件可以实时显示网页应用当代码发生改变之后预览窗口会自动刷新即可在 Cloud Studio 内实时开发调试网页了
复制内置 Chrome 浏览器窗口的地址栏分享给团队的其它成员免去了部署 nginx 的繁琐配置。 这样我们的项目就算完成了只需要安装几个库就可以快速的构建一个项目。
三、发布到仓库
项目完成后可以快速发布到git仓库中首先需要填写README.md文件。
# 项目说明这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utmcsdn) 快速搭建并开发还原一个移动端 React H5 的简版点餐系统页面从 0 到 1 体验云 IDE 给我们带来的优势不需要装各种环境简单易用开箱即可上手。## 相关技术栈React less webpack## 项目运行yarn install
yarn start在左边功能菜单区找到“源代码管理”使用 git init 进行仓库初始化。
然后输入需要提交的message信息再点击Commit进行仓库提交。
如果提示没有关联账号的话就去设置里面关联一下即可。
如果登录时使用的是coding,所以就直接推送到coding仓库了当然也可以推送到github需要绑定对应的账号进行提交即可。
这里可以登陆到 Coding 平台进行查看仓库代码。
四、开发空间管理
在我们的控制台这里可以管理所有使用的工作空间其中右侧的按钮可以进行升级配置、设置、删除、开始\停止操作。 总结
在使用过Cloud Studio做一次实战练习之后让我对Cloud Studio有了更深刻的认识下面来简单谈一下Cloud Studio的优势以及优化建议。
Cloud Studio的优势很明显大致可以分为一下几点。
节约开发成本。可以帮助用户减少安装 IDE 的成本提供在线代码开发、编译、运行、存储的一站式服务。便捷性。Cloud Studio 是基于浏览器的集成式开发环境IDE为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装随时随地打开浏览器就能在线编程。云端开发。Cloud Studio 不需要任何本地安装只需使用支持的浏览器即可轻松登录并开始编码开发实现 Coding everywhere。同时加速开发流程配置化用配置定义云端开发环境提升开发效率拥有更弹性的云上开发资源。多种预制环境可选。内置 Node.js、Java、Python 等常见环境直接进入开发状态。metawork 开发协作。通过代码协作多光标高亮显示和跟随让协作变的清晰有序。包括但不限于代码协同、多光标协作、实时预览、终端协作。众多模板可用。在使用时一个很明显的感受就是Cloud Studio提供了众多的模板有些功能我们可以从模板库中直接拿出来改一下就可以满足自己的需求快速使用甚至于不会写代码的人都可以上去操作两手。
Cloud Studio优化建议
文档全面详细化。希望增加更多编程语言的文档介绍目前文档里面只有几个主流的编程语言操作文档对于一些刚开始使用Cloud Studio的用户来说能够看到自己平时使用的编程语言的详细文档可以更快的上手Cloud Studio。提供更多的编程语言和框架。当前网站支持的编程语言和框架不能够满足所有用户的需求。可以考虑支持更多的编程语言和框架提高平台的适用性和可扩展性。提供更高的稳定性。目前网站的性能和稳定性还有进一步提升的空间有时候可能会出现一些卡顿和崩溃等问题。为了提高用户的使用体验建议考虑优化平台的性能和稳定性。
