给网站做蜘蛛抓取,如何在百度搜索dw做的网站,gl账号注册网站,做网站一年要多少钱陈老老老板#x1f9b8; #x1f468;#x1f4bb;本文专栏#xff1a;生活#xff08;主要讲一下自己生活相关的内容#xff09; #x1f468;#x1f4bb;本文简述#xff1a;生活就像海洋,只有意志坚强的人,才能到达彼岸。 #x1f468;#x1f4bb;上一篇… 陈老老老板 本文专栏生活主要讲一下自己生活相关的内容 本文简述生活就像海洋,只有意志坚强的人,才能到达彼岸。 上一篇文章 年度总结-你觉得什么叫生活 有任何问题都可以私聊我在文章最后也可以加我的wx。感谢支持 我认为人人都可以学好编程我愿意成为你的领路人 文章目录 一、前言二、腾讯云Cloud Studio到底是什么1.业务角度2.功能角度 三、腾讯云Cloud Studio出现的背景是什么♂️1.从本地向“云”2.Cloud Studio真正的优势 四、快速构建React完成点餐H5页面还原实操♂️1.进行注册并创建应用2.安装 antd-mobile3.安装 Less与 less-loader4.暴露 webpack 配置文件5.更改config目录中增加less样式6.安装 normalize7.上传项目需要的素材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云部署支持多种框架一键部署至云函数同时支持自定义部署。 便于帮助开发者快速部署项目到多家云厂商函数服务让开发者专注于代码逻辑的实现。 四、快速构建React完成点餐H5页面还原实操♂️
1.进行注册并创建应用
说明 可以使用微信直接进行创建哦点击右上角进行创建应用选择React框架一键部署环境超级快。现在终端输入以下命令尝试创建一个新主机在Ctrl z就可以退出
// 进入当前目录
cd ./
// 设置port的环境变量
set port3000
// 导出port的环境变量
export PORT3000
// 相当于 yarn install安装相关依赖
yarn
// 启动开发环境
yarn start --port30002.安装 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实操演示 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实操演示
4.暴露 webpack 配置文件 安装命令
npm run eject实操演示输入完要注意需要再次输入y进行下一步
注发现报错因为我们使用脚手架创建一个项目的时候自动给我们增加了一个.gitignore文件解决方案我们本地却没有文件仓库这就需要在终端输入如下命令用git将项目添加到我们的本地仓库。 安装命令
#先创建git
git config --global user.email chenlaobanqq.com
git config --global user.name clb
#在进行提交代码
gitadd .
git commit -m up
#再执行
npm run eject 执行完命令就会发现安装成功
5.更改config目录中增加less样式
说明这里需要增加一些less样式
1 config/webpack.config.js 文件找到第69行这块是设置 css 相关的代码。 将这部分更改为就是新增最下面两行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)$/;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 // 有改动),
},实操演示
6.安装 normalize
说明Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。安装完也是看package.json中devDependencies有没有normalize.css
注版本为8.0.1 安装命令
yarn add -D normalize.css^8.0.1实操演示
7.上传项目需要的素材
说明支持两种上传方式
直接拖拽右击 IDE 编辑区域上传
实操演示
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.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;实操演示 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;}实操演示 9.运行测试
说明 执行命令在点击内置浏览即可运行
// 进入当前目录
cd ./
// 设置port的环境变量
set port3000
// 导出port的环境变量
export PORT3000
// 相当于 yarn install安装相关依赖
yarn
// 启动开发环境
yarn start --port3000实操演示 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框架直接在线上进行开发而且提供了特有的coding仓库与交流平台。
个人体验整体可以说是小母牛翻跟头-一次比一次牛逼
交互体验不错响应很快UI设计很丰富没有特别小、难以点击等情况功能十分强大构建框架特别方便支持协同工作真的挺不错的效率更高了对小白还是很友好的引导很不错
无论在职开发人员还是初学者都建议尝试一下挺有趣的体验 腾讯云Cloud Studio-云端开发 化繁为简
