【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原

陈老老老板
‍本文专栏:生活(主要讲一下自己生活相关的内容)
‍本文简述:生活就像海洋,只有意志坚强的人,才能到达彼岸。
‍上一篇文章: 年度总结-你觉得什么叫生活?
‍有任何问题,都可以私聊我,在文章最后也可以加我的wx。感谢支持!
我认为人人都可以学好编程,我愿意成为你的领路人!

在这里插入图片描述

文章目录

  • 一、前言
  • 二、腾讯云`Cloud Studio`到底是什么
    • 1.业务角度
    • 2.功能角度
  • 三、腾讯云`Cloud Studio`出现的背景是什么‍♂️
    • 1.从本地向“云”
    • 2.`Cloud Studio`真正的优势
  • 四、快速构建React完成点餐H5页面还原实操‍♂️
    • 1.进行注册并创建应用
    • 2.安装 `antd-mobile`
    • 3.安装 `Less`与 `less-loader`
    • 4.暴露 `webpack` 配置文件
    • 5.更改config目录中增加less样式
    • 6.安装 normalize
    • 7.上传项目需要的素材
    • 8.替换App.js主文件
    • 9.运行测试
    • 10.上传代码仓库
  • 五.总结

一、前言

最近在公司中时常和一些大佬在讨论一些在线编程工具这个事情,也是亲自尝试了很多的产品,也很幸运的参加了腾讯云Cloud Studio实战训练营,也是蛮有缘分的,既然有缘那就细致的给大家讲讲我的使用感受与实操示例。一句话来说就是:小母牛坐飞机–牛逼上天了!!! 依然是老三套结构:是什么、为什么、怎么做、来讲讲!

二、腾讯云Cloud Studio到底是什么

1.业务角度

说明:简单的理解,腾讯云Cloud Studio就是一个线上编程工具,哇塞!是不是很牛,再也不用为配置不明白而烦恼了,再也不用因为插件版本而烦恼了,会让你觉得开发Very Easy!!

  • Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

  • Cloud Studio作为在线 IDE,包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

2.功能角度

说明:明白是线上编程工具就可以知道,你本地弄得环境都已经为你准备好,你想的到的它都能做到,一句话你想要的他都有,东西实在是太多了。

  • 快速启动项目:使用Cloud Studio的预置环境,您可以直接创建对应类型的工作空间,快速启动项目进入开发状态,无需进行繁琐的环境配置。

  • 实时调试网页:Cloud Studio 内置预览插件,可以实时显示网页应用。当您的代码发生改变之后,预览窗口会自动刷新,这样您就可以在 Cloud Studio 内实时开发调试网页了。

  • 远程访问云服务器:Cloud Studio 支持您连接自己的云服务器,这样就可以在编辑器中查看云服务器上的文件,进行在线编程和部署工作。

三、腾讯云Cloud Studio出现的背景是什么‍♂️

说明:很喜欢Cloud Studio的标题:云端开发 化繁为简,他们也确实做到了,真的把需要开发所做的一切准备工作都集中在网页上,你要做的就是选择哪个环境,简直爱不释手!

1.从本地向“云”

说明:可能很多小伙伴不太明白为什么现在很多东西都是再往“云”上发展,上云代表不再会有本地资源的束缚,无论什么时间、地点,只要有网就可以干你想干的事情。

云技术的不断发展,上“云”将会大大降低成本,减少硬件设备的采购,而且更加稳定不会出现断电等情况,而且整体的效率更高,不再是最开始的单一在同一办公地点的办公方式,可以采用进行同时的线上编程方式,一个新的电脑不用配置一样可以编程,简直不要太爽。无拘无束,再也不用因为电脑配置不行而不能写代码而发愁了。

2.Cloud Studio真正的优势

  • 1.云端开发环境:一键秒开、全持久化、预置环境及内置开发工具,跨团队无缝复制和共享,让开发化繁为简。
  • 2.支持多编程语言:包括C、C++、C# 、Java、JavaScript、Python、Go、Rust 等几乎全平台的主流开发语言。
  • 3.支持多端开发:可以支持前端、后端、移动端开发。
  • 4.支持AI代码助手:可以在线编程 · 辅助开发,使用 AI 代码助手在 Cloud Studio 中编写代码。代码自动补全、代码纠错、代码AI评审、单元测试生成功能等。
  • 5.支持协作开发:可以组建自己的团队实现实时开发。
  • 6.支持DeployKit云部署:支持多种框架一键部署至云函数,同时支持自定义部署。 便于帮助开发者快速部署项目到多家云厂商函数服务,让开发者专注于代码逻辑的实现。

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第1张图片

四、快速构建React完成点餐H5页面还原实操‍♂️

1.进行注册并创建应用

说明: 可以使用微信直接进行创建哦!,点击右上角进行创建应用,选择React框架,一键部署环境,超级快。现在终端输入以下命令尝试创建一个新主机,在Ctrl + z就可以退出:

// 进入当前目录
cd ./ && 
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install,安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第2张图片
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第3张图片
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第4张图片

2.安装 antd-mobile

说明: 是由蚂蚁金融团队推出的一个开源的react组件库,antd-mobile 支持基于 Tree Shaking 的按需加载。安装完查看package.json 查看 antd-mobile是否安装成功,成功可以会如图片所示。

注:版本要对5.32.0

安装命令:

$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0

实操演示:

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第5张图片

3.安装 Lessless-loader

说明:Less相信一些前端开发的小伙伴来说必不可少的组件,这里先下载Less做开发准备。依然是查看package.json 看其中的devDependencies是否安装成功。

注:版本要对3.12.2 与7.0.1

安装命令:

yarn add -D less@^3.12.2 less-loader@^7.0.1

实操演示:【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第6张图片

4.暴露 webpack 配置文件

安装命令:

npm run eject

实操演示:输入完要注意需要再次输入y,进行下一步
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第7张图片

注:发现报错,因为我们使用脚手架创建一个项目的时候,自动给我们增加了一个.gitignore文件,解决方案:我们本地却没有文件仓库,这就需要在终端输入如下命令,用git将项目添加到我们的本地仓库。

安装命令:

#先创建git
git config --global user.email "[email protected]" 
git config --global user.name "clb"
#在进行提交代码
gitadd .
git commit -m 'up'
#再执行
npm run eject  

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第8张图片
执行完命令就会发现安装成功
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第9张图片

5.更改config目录中增加less样式

说明:这里需要增加一些less样式

(1) config/webpack.config.js 文件,找到第69行,这块是设置 css 相关的代码。
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第10张图片
将这部分更改为:就是新增最下面两行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)$/;

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第11张图片

(2)在509行,看到sass配置,在549行下增加less配置。有可能行号不一样,教大家一个便捷方法 ctrl + f进行搜索extensions .module.scss or .module.sass,就能直接找到了。

// 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'  // 有改动
  ),
},

实操演示:
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第12张图片

6.安装 normalize

说明:Normalize.css 是CSS重置的现代替代方案,可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。安装完也是看package.jsondevDependencies有没有normalize.css

注:版本为8.0.1

安装命令:

yarn add -D normalize.css@^8.0.1

实操演示:
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第13张图片

7.上传项目需要的素材

说明:支持两种上传方式:

  • 直接拖拽
  • 右击 IDE 编辑区域"上传"

实操演示:
【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第14张图片

8.替换App.js主文件

说明:只有样式是不行的,还需要主代码的;
(1)替换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.css"

function 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 className="App">
      <NavBar onBack={back} style={{
        background: '#F0F0F0',
        fontWeight: 'bold'
      }}>点餐</NavBar>

      <div className='head-card'>
        <Swiper
          style={{
            '--border-radius': '8px',
          }}
          autoplay
          defaultIndex={1}
        >
          {items}
        </Swiper>
      </div>

      <div className='product-box'>
        <SideBar activeKey={activeKey} onChange={setActiveKey}>
          {tabs.map(item => (
            <SideBar.Item key={item.key} title={
              item.key === '1' ? <div>
              <div className='flex-center'>
                <img style={{
                  display: 'block',
                  width: '16px',
                  marginRight: '5px'
                }} src={ HotImg }></img>
                <div>{ item.title }</div>
              </div>
            </div> : item.title
            } />
          ))}
        </SideBar>
        <div className='product-right'>
          <div className='product-title'>热销</div>
          <div className='product-list'>
            {
              productList.map((item, key) => {
                return (
                  <div className='product-item'>
                    <div className='product-item-left'>
                      <img style={{
                        display: 'block',
                        width: '76px',
                        marginRight: '5px'
                      }} src={ item.img }></img>
                      <div className='product-item-left-info'>
                        <div>
                          <div className='product-item-left-info-name'>{ item.name }</div>
                          <div className='product-item-left-info-number'>月售{key + 1}0{key * 5}</div>
                        </div>
                        <div className='product-item-left-info-price'>¥10</div>
                      </div>
                    </div>
                    <div className="cart">
                      <img style={{
                        display: 'block',
                        width: '30px',
                        marginRight: '5px'
                      }} src={ CartImg } onClick = { () =>
                        Toast.show({
                          content: '添加购物车成功'
                        }) }></img>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>

      <TabBar>
        {tabbars.map(item => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            badge={item.badge}
          />
        ))}
      </TabBar>
    </div>
  );
}

export default App;

实操演示:

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第15张图片

(2)在 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;
  }

实操演示:

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第16张图片

9.运行测试

说明: 执行命令,在点击内置浏览即可运行

// 进入当前目录
cd ./ && 
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install,安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000

实操演示:

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第17张图片

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第18张图片

10.上传代码仓库

说明:我们可以将写完的代码上传到腾讯云的coding中,地址:https://chengxuyuanzhouzhou.coding.net/login/relation/registion?redirect=%2Fuser%2Fprojects
(1)注册登录,选择dev项目,并输入信息

(2)进行推送,先点左侧源代码管理,在点publish Branch 再点Publish to CODING

在这里插入图片描述

(3) 这样在仓库中就能看到提交的代码了,大功告成!!

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第19张图片

五.总结

学习一项新的东西,最开始是辛苦的、无趣的,但是完成之后才会觉得这是一件最有成就感的事情,经过不断的摸索与尝试,不断的提升自己,这才是一个程序员该做的事情。

Cloud Studio的使用给了我非常不错的体验,在多个线上编程平台中有更多的优点、更好的体验。Cloud Studio可以非常容易的构建React框架,直接在线上进行开发,而且提供了特有的coding仓库与交流平台。

个人体验:整体可以说是小母牛翻跟头-一次比一次牛逼!

  • 交互体验不错,响应很快;
  • UI设计很丰富,没有特别小、难以点击等情况
  • 功能十分强大,构建框架特别方便
  • 支持协同工作,真的挺不错的,效率更高了
  • 对小白还是很友好的,引导很不错

无论在职开发人员还是初学者都建议尝试一下,挺有趣的体验!!

腾讯云Cloud Studio-云端开发 化繁为简

【腾讯云Cloud Studio实战训练营】使用Cloud Studio社区版快速构建React完成点餐H5页面还原_第20张图片

你可能感兴趣的:(生活,腾讯云,react.js,云计算)