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

偏执的太偏执、 2024-04-22 15:01 44阅读 0赞

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

![在这里插入图片描述][dcbbc798fb4f494581c58782d911c7c2.gif_pic_center]

#### 文章目录? ####

*  一、前言?
 *  二、腾讯云\`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`实战训练营，也是蛮有缘分的，既然有缘那就细致的给大家讲讲我的使用感受与实操示例。一句话来说就是：小母牛坐飞机–牛逼上天了！！！ 依然是老三套结构：是什么、为什么、怎么做、来讲讲！  
![在这里插入图片描述][bbf02bdcb3454124aba0f1ed6abd5a0c.png]

## 二、腾讯云`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云部署：支持多种框架一键部署至云函数，同时支持自定义部署。 便于帮助开发者快速部署项目到多家云厂商函数服务，让开发者专注于代码逻辑的实现。

![在这里插入图片描述][6ca9d5fff7ac4c80aa9cd6964656618e.png]

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

### 1.进行注册并创建应用 ###

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

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

![在这里插入图片描述][df415376825d4ea68024368661538d8e.png]  
![在这里插入图片描述][ea4c57d388ed448cb2a506ea6890392f.png]  
![在这里插入图片描述][d6c5a2d5aaec4602a9b255589780369b.png]

### 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

实操演示：

![在这里插入图片描述][3f1882b6af7346328e577116df7d456a.png]

### 3.安装 `Less`与 `less-loader` ###

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

**注：**版本要对3.12.2 与7.0.1

**安装命令：**

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

实操演示：![在这里插入图片描述][6b509ba6331e459da4e2f2299abcda3d.png]

### 4.暴露 `webpack` 配置文件 ###

**安装命令：**

npm run eject

实操演示：输入完要注意需要再次输入y，进行下一步  
![在这里插入图片描述][25a951a1dc974289b321a5a2c0658569.png]

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

**安装命令：**

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

![在这里插入图片描述][a5f177b966224411b394ce43862b5c91.png]  
执行完命令就会发现安装成功  
![在这里插入图片描述][c4ae918b4e3e4e269fd4d56cc7665de3.png]

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

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

（1） config/webpack.config.js 文件，找到第69行，这块是设置 css 相关的代码。  
![在这里插入图片描述][ca6192ef181a4f23bb233ce682fc4e6b.png]  
将这部分更改为：就是新增最下面两行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)$/;

![在这里插入图片描述][24840467b81144aa8e21dfeb5a58290a.png]

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

实操演示：  
![在这里插入图片描述][2408a6b100164595be5a20513962c3f9.png]

### 6.安装 normalize ###

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

**注：**版本为8.0.1

**安装命令：**

yarn add -D normalize.css@^8.0.1

实操演示：  
![在这里插入图片描述][26ff2fe040774c95aed9b37a8869aaa3.png]

### 7.上传项目需要的素材 ###

**说明：**支持两种上传方式：

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

实操演示：  
![在这里插入图片描述][28ef9a0ab57544bfb2a1deaf3c748a32.png]

### 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;

实操演示：

![在这里插入图片描述][3fa8a33084c24d938a75326b115d5084.png]

（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;
      }

实操演示：

![在这里插入图片描述][a893533af9364ce4b0e5dc20e412fb0f.png]

### 9.运行测试 ###

**说明：** 执行命令，在点击内置浏览即可运行

实操演示：

![在这里插入图片描述][348a7d57adb34103ace1dd7f7cca0b37.png]

![在这里插入图片描述][9c26e6ff4eb5416cb600fd68d9b99a6a.png]

### 10.上传代码仓库 ###

**说明：**我们可以将写完的代码上传到腾讯云的coding中，地址：https://chengxuyuanzhouzhou.coding.net/login/relation/registion?redirect=%2Fuser%2Fprojects  
(1)注册登录，选择dev项目，并输入信息  
![在这里插入图片描述][22d4888102194b6caf09706659979ebf.png]  
![在这里插入图片描述][ffe6d61a8ce94653a0e88df935d143b4.png]

（2）进行推送，先点左侧源代码管理，在点publish Branch 再点Publish to CODING

![在这里插入图片描述][d84ca3cf468f48c0a51ddc01366307f6.png]

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

![在这里插入图片描述][c0623b52a6ec4a16ab5468d37e5a66c4.png]

## 五.总结 ##

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

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

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

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

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

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

![在这里插入图片描述][24184004e11a45a29f78a39af2da62e9.png]

[-]: https://clllb.blog.csdn.net/article/details/128731972
[dcbbc798fb4f494581c58782d911c7c2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/137eb45f735447718808b23d635721a7.gif
[bbf02bdcb3454124aba0f1ed6abd5a0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2196c410c91a46e699f6226a15862d97.png
[6ca9d5fff7ac4c80aa9cd6964656618e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/38a45dd906eb4c8ebf000e2b784c481e.png
[df415376825d4ea68024368661538d8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a8e8a2c158124aa1be4a8baa00a11230.png
[ea4c57d388ed448cb2a506ea6890392f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b4a8f2bcea4642658c78c3069873a2cb.png
[d6c5a2d5aaec4602a9b255589780369b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/abbb74e8b520497388984f3fba8d16b3.png
[3f1882b6af7346328e577116df7d456a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5e16a9d4fc084b0ab5fe3b67b9276847.png
[6b509ba6331e459da4e2f2299abcda3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0f47f3e4092e402dac38c1f061a81ce9.png
[25a951a1dc974289b321a5a2c0658569.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4c463fa8a6564f4191173ddcf5f2ee41.png
[a5f177b966224411b394ce43862b5c91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d5ce79fe5667411a8fd6748bf7b3a56b.png
[c4ae918b4e3e4e269fd4d56cc7665de3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/aa85019b9e644112a6f368101b22394c.png
[ca6192ef181a4f23bb233ce682fc4e6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/33d0f03a3b314938800592fea4caa362.png
[24840467b81144aa8e21dfeb5a58290a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/44630b2b3fbf47ba97a2796ec87e6006.png
[2408a6b100164595be5a20513962c3f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/9d9fa85693184a4c8eb86a1805911dda.png
[26ff2fe040774c95aed9b37a8869aaa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f4da48e808fd44eabffb89e17facb578.png
[28ef9a0ab57544bfb2a1deaf3c748a32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ffbb39dcf1e34cf9bfa4ad2828d80ae9.png
[3fa8a33084c24d938a75326b115d5084.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7fc95c42e77143cb809c473055cdbc10.png
[a893533af9364ce4b0e5dc20e412fb0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0e3e804ee8354b2d9c9db3af4a1817bf.png
[348a7d57adb34103ace1dd7f7cca0b37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0d34687dde11498eb739201de3172135.png
[9c26e6ff4eb5416cb600fd68d9b99a6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/04a327b65bb343a2b6e422d08b72508d.png
[22d4888102194b6caf09706659979ebf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/264651243faf4c74acd4ff421f645e12.png
[ffe6d61a8ce94653a0e88df935d143b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0d869a4cec2c4ea3932a7af9aa803e9a.png
[d84ca3cf468f48c0a51ddc01366307f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/efac1b2df949436eaf347057f5962399.png
[c0623b52a6ec4a16ab5468d37e5a66c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5da7b28102d24a2c8435a89537e7e52e.png
[24184004e11a45a29f78a39af2da62e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c73180fc250b462fac9cd96bdc45ee8a.png