Cursor+Qwen2.5Coder开发一个网页应用,Soeasy!附代码cssdnscoder命令提示符spiderlinebreak

看到Qwen2.5-Coder非常强悍,就想测试一下,能否0基础开发一个网页应用。

本文我测试用到的是Qwen2.5-Coder-32B-Instruct,它基于Qwen2.5开发的代码特定大语言模型。该模型通过5.5万亿tokens的训练,在代码生成、代码推理和代码修复方面都取得了显著提升。它是当前最先进的开源代码语言模型,编码能力可与GPT-4相媲美。

阿里自己也有一个编程辅助工具叫通义灵码,在VSCode中安装插件即可,也很棒,下次再测试吧。

通义灵码,是基于通义大模型的智能编程辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云的云服务使用场景调优,助力开发者高效、流畅地编码。

最近经常用Cursor,所以就直接在Cursor中调用Qwen2.5-Coder-32B-Instruct来帮我开发这个网页应用。

配置方法:

整个过程,代码全部由Qwen2.5-Coder生成!

它给我了三段代码

1.HTML

/*styles.css*/body{font-family:Arial,sans-serif;text-align:center;margin:0;padding:0;}#tabs{margin-top:20px;}.tab-button{padding:10px20px;margin:05px;cursor:pointer;}.tab-content{margin-top:20px;display:none;}.tab-content.active{display:block;}3.JavaScript逻辑

如果连这些脚本干什么的都不知道,也可以问Qwen2.5-Coder

调整、美化

预览一下,效果不太理想,可以根据第一版情况让Qwen2.5-Coder继续修改

然后Qwen2.5-Coder给出了调整后的代码

首先是主HTML文件:

CSS文件:

JavaScript文件:

这个更新后的版本有以下改进:

响应式布局:

功能完善:

交互优化:

Qwen2.5-Coder回复如下

当然可以!将你的项目部署到Vercel并使用Cloudflare作为域名提供商,可以按照以下步骤进行操作。

1.准备项目文件

确保你的项目文件结构如下:

my-tomato-clock/├──index.html├──styles.css└──script.js2.创建Vercel账户并安装VercelCLI

如果你还没有Vercel账户,先注册一个:Vercel注册页面

安装VercelCLI:

npminstall-gvercel3.部署项目到Vercel

4.配置Cloudflare

获取Cloudflare的DNS记录:

更新域名注册商的DNS设置:

等待DNS更改生效(通常需要几分钟到几小时)。

5.在Cloudflare中配置Vercel的域名

6.配置SSL证书7.验证部署8.自动化部署(可选)

如果你希望每次代码更新后自动部署到Vercel,可以配置GitHub集成:

这样,每次你推送代码到GitHub,Vercel会自动部署你的项目。

最终效果

手动调整了一两个细节,按照提示,上线后如下

使用QwenCoder,你可以显著降低开发成本,通过自动化代码生成快速搭建应用框架,将更多资源投入到核心功能开发。QwenCoder支持多种编程语言和框架,确保技术栈选择灵活。同时,它能根据具体需求生成定制化代码,轻松调整和优化,确保应用程序完全符合你的期望。

THE END
1.Web开发者指南MDN了解更多并加入 MDN Web Docs 社区。 Web 开发者指南 MDN 文档中有大量的指南,这些文章意在增加用例,或教你如何使用 API 接口或特性。此页面将提供到一些最流行的阅读材料的链接。 HTML 使用HTML 构建网页 HTML 学习区会提供从头开始的 HTML 学习教程。 HTML 基础 这篇文章将会让你对 HTML 有一个基本的了解http://developer.mozilla.org/zh-CN/docs/Web/Guide
2.JavaScriptMDN表达式和运算符 学习运算符instanceof、typeof、new、this,运算符优先级,以及其他运算符的行为。 语句和声明 学习do-while、for-in、for-of、try-catch、let、var、const、if-else、switch以及其他语句和关键字的作用。 函数 学习如何使用 JavaScript 函数开发应用。 https://docs.microsoft.com/en-us/scripting/javascript/advanced/advanced-javascript
3.MDNWebDocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.http://developer.allizom.org/
4.现代Web开发中的关键技术与最佳实践现代Web开发不仅仅是编写代码,更是涉及架构设计、性能优化、安全防护等多方面的综合技能。通过掌握上述关键技术与最佳实践,开发者可以更加自信地应对复杂的项目需求,创造出既高效又安全的Web应用。随着技术的不断进步,持续学习与实践是每位Web开发者不可或缺的成长之路。https://blog.51cto.com/u_15916160/12854236
5.HTMLCSS和JavaScript学习在线网页mdnwebdocshttps://developer.mozilla.org/en-US/docs/Web 页面中提供多语言(包括中英文)切换。 【MDN Web Docs(MDN 网络文档,MDN即Mozilla Developer Network )是免费的资源。 MDN Web Docs提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和JavaScript API。】 现代JavaScript 在线教程htthttps://blog.csdn.net/cnds123/article/details/120971779
6.MDNWebDocs:全面的Web开发文档和学习资源新媒派MDN Web Docs是由 Mozilla Corporation 推出的开源、协作项目,为全球开发者提供全面的 Web 开发文档和学习资源。MDN Web Docs 包含 HTML、CSS、JavaScript、Web APIs 等 Web 技术 MDN Web Docs简介: MDN Web Docs是由 Mozilla Corporation 推出的开源、协作项目,为全球开发者提供全面的 Web 开发文档和学习资源https://pidoutv.com/sites/30193.html
7.Web前端开发工具~MDN网站1、嘛是MDN咧? Mozilla Developer Network谋智(火狐开源项目)开发者网络工作,里面有所有的互联网开发参考。 个人理解MDN是MDN Web Docs(MDN 网络文档)这个网站的简称。其实他指的是一个网站,我们搜索MDN,打开的是这个链接:https://developer.mozilla.org/zh-CN/ https://www.jianshu.com/p/efd866d99fe4
8.2017年Mozilla为Web做的六大贡献开发团队必备的9款DevSecOps工具 时长00:00 如何向上汇报坏消息,才能转危为机? 时长00:00 推荐10款加速Web开发的前端开发工具 时长00:00 特斯拉招聘:不在乎学历,但编程测试得过 时长04:48 C#的未来:简化参数空值验证 时长00:00 2020年最热门的工程师职位:区块链工程师 时长00:00 强化学习能否在https://time.geekbang.org/column/article/3998
9.资源帖丨字节跳动技术Leader们推荐的学习资源链接:http://html.spec.whatwg.org/dev/MDN Web文档这份文档比较全面的介绍最新的 HTML/CSS/JavaScript 标准和特性,非常好的参考资料。链接:http://developer.mozilla.org/zh-CN/玩转CSS的艺术之美作者:JowayYoung月影说,这是很不错的一本掘金小册,用简单有趣的方式带领大家玩转CSS。链接:http://juejin.cn/https://maimai.cn/article/detail?fid=1589935106&efid=ROE93ZNmM8sYE6S4rjpy5w
10.30个前端和设计必备网站,让你的工作更轻松!链接:https://developer.mozilla.org/ MDN Web Docs 是由 Mozilla 维护的一个提供 Web 技术文档和开发参考的网站,它涵盖了 HTML、CSS、JavaScript、Web API 等各种 Web 开发技术,内容丰富详尽,并且非常适合不同水平的开发者使用。 3. Stack Overflow - 编程问题和答案分享社区 https://developer.aliyun.com/article/1446797
11.octocat:GitHub最全的前端资源汇总仓库(包括前端学习开发:octocat:GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等) - peiyuZhu1022/FrontEndGitHubhttps://github.com/peiyuZhu1022/FrontEndGitHub
12.mdndataThis repository contains general data for Web technologies and is maintained by theMDN team at Mozilla. Repository contents The data in this repository is used in MDN Web Docs to buildinformation boxesandsidebar navigation. External tools make use of this data as well, for example, theCSSTreeCSShttp://www.npmjs.com/package/mdn-data
13.HTTP状态12月登陆Web平台的新功能Web 开发资源: https://github.com/markodenic/web-development-resources/ [34] 什么是无障碍?: https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/What_is_accessibility 公众号:前端食堂 知乎:童欧巴 掘金:童欧巴 这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎你加入前端食堂,和这个男人一起https://cloud.tencent.com/developer/article/2207096
14.最全前端资源汇总这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方便。当然,并不期望这成为一个前端武学收藏夹;毕竟,只有自己掌握,才是真正拥有;况且前端发展如火如荼,日新月异。这里会尽量保持探索 & 学习 & 更新。欢迎大家推荐,反馈https://www.west.cn/info/html/wangyezhizuo/Javascript/20180624/4232612.html