网站开发的开发意义,百度关键词排名优化工具,西安高端网站制作公司,美图秀秀在线修图目录
编辑
一、前言
1、什么是腾讯云 Cloud Studio
2、本文实验介绍
二、前期准备工作
1、注册 Cloud Studio 2、初始化工作空间
三、开发一个简版的点餐系统页面
1、安装依赖
1.1、安装 antd-mobile
1.2、安装 less 和 less-loader
1.3、暴露 webpack 配置文件
… 目录
编辑
一、前言
1、什么是腾讯云 Cloud Studio
2、本文实验介绍
二、前期准备工作
1、注册 Cloud Studio 2、初始化工作空间
三、开发一个简版的点餐系统页面
1、安装依赖
1.1、安装 antd-mobile
1.2、安装 less 和 less-loader
1.3、暴露 webpack 配置文件
1.4、安装 normalize 1.5、上传项目需要的素材
1.6、替换App.js主文件
2、、发布到仓库
四、开发空间管理
五、总结 一、前言
1、什么是腾讯云 Cloud Studio Cloud Studio 是基于“浏览器”的集成式开发环境IDE为开发者提供稳定的云端工作站在使用 Cloud Studio 时无需安装打开浏览器即可快速启动和开发项目底层资源可以自动弹性扩缩极大地节省成本低代码开发省时又省力。 基于 Web 端的代码编辑器包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等提升开发、编译与部署工作效率 ; 支持远程访问云服务器为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验 ; 2、本文实验介绍 我们经常会遇到远程办公的场景下面用云 IDE Cloud Studio 快速搭建并开发还原一个移动端 React H5 的简版点餐系统页面从 0 到 1 体验云 IDE 给我们带来的优势不需要装各种环境简单易用开箱即可上手。 点餐界面 二、前期准备工作
1、注册 Cloud Studio
准备好素材图如首页的banner、食物图片等然后点击链接跳转到官网并点击“注册/登录”。 其中 Cloud Studio 非常方便提供了三种注册方式 1、使用 CODING 账号授权注册/登录 2、使用微信授权注册/登录 3、使用 GitHub 授权注册/登录 我选的是 CODING 需要输入对应的团队域名前缀 输入域名之后会出现以下界面 选择你的 CODING 账号方式进行扫码登录。 2、初始化工作空间 进入之后会出现以下界面Cloud Studio 提供了许多模版例如框架模版、云原生模版、建站模版等同时 Cloud Studio 也对所有新老用户每月赠送 3000 分钟的工作空间免费时长。 找到 React 框架模板点击进去即可开始初始化一个 React 的工作空间等待云 IDE 初始化完毕。
在初始化的过程中可以看到左侧代码后控制台会安装依赖及启动一个 React 简单的模板项目。 初始化完毕之后在我们的右侧可以看到一个实时预览的预览界面然后在下面的控制台输入以下指令。 // 进入当前目录
cd ./
// 设置port的环境变量
set port3000
// 导出port的环境变量
export PORT3000
// 相当于 yarn install安装相关依赖
yarn
// 启动开发环境
yarn start --port3000 到此我们发现如果用一台新主机只要有浏览器就不需要准备任何环境不需要安装任何软件只需要能够联网就能在几分种内初始化一个 React 项目这个效率是非常高的。 三、开发一个简版的点餐系统页面 标题是为了开发一个 React H5 的页面为了快速开发通常会使用到UI组件库这里我们使用的是 antd-mobile UI库antd-mobile 是 Ant Design 的移动规范的 React 实现。 1、安装依赖
1.1、安装 antd-mobile yarn add antd-mobile^5.32.0# 或者npm install --save antd-mobile^5.32.0
1.2、安装 less 和 less-loader yarn add -D less^3.12.2 less-loader^7.0.1注意这里不要安装为高版本项目会启动失败
1.3、暴露 webpack 配置文件 注意在webpack.config.js中进行配置这样进行配置需要暴露出React的config配置文件警告该操作不可逆 npm run eject 输入 y 后项目会自动进行解构操作。 完成命令之后项目根目录会出现一个config文件夹找到 config/webpack.config.js 文件按Ctrl F 查找关键字 “style files” 将上图的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样式了。
1.4、安装 normalize
yarn add -D normalize.css^8.0.1 1.5、上传项目需要的素材 以前上传服务器代码需要使用 Scp 命令或者装 Remote SSH 插件支持Cloud Studio 可以很方便默认支持文件上传与下载等常规的操作与本地 IDE 体验一致 1、可以直接拖动文件到 IDE 编辑区域 2、右击 IDE 编辑区域上传 直接将 img 文件夹拖动到src目录下即可。 1.6、替换App.js主文件
打开src/App.js 文件以下是点餐系统的主要业务代码直接CV替换即可。
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;
}
复制完成后在控制台中输入 yarn start 即可启动该项目。
2、、发布到仓库
发布前我们需要填写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进行仓库提交。 四、开发空间管理 在我们的控制台这里可以管理所有使用的工作空间其中右侧的按钮可以进行升级配置、设置、删除、开始\停止操作。 五、总结 Cloud Studio特点 基于 Web 端的代码编辑器包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等提升开发、编译与部署工作效率 。支持远程访问云服务器为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验 。自研多款插件以满足开发需求例如协作插件、自定义模板插件、预览插件、部署插件等助力施展编程潜能。 本篇文章主要是引导大家如何使用 Cloud Studio 进行云编程并且动手使用云 IDE Cloud Studio 快速搭建并开发还原一个移动端 React H5 的简版点餐系统页面。也欢迎大家一起探索 Cloud Studio 更多的功能为工作中进行赋能
