粉丝24.8万获赞157.0万

第一次用初 a 真的 惊艳到我了,我还却忘记用了广东话语音输入指令是广东话,但初 a 却异常懂我誓言。我在 e r p 系统导出数据,由于数据量大,不能一次性导出,我要按关键来数字母 e 导出, 最终导出零九和 ac, 一 共三十六个档案,然后需要合成一个,没有一个 it 人接受手工操作,逐一打开 s l 复制粘贴吧。原本是拆开 ppt 可抛开来的活,就由于刚刚认识了 tree, 这家伙是有 id 的 哦,就体验了一下,一顿操作就生成了拍份代码,到这里和 check gpd 没啥不一样,可下一步不就是打开拍册了吗?这你就错了,我只需要把鼠标移去右边, 不断点击继续,所需要的 accession 就 全部安装好。这次没有录制过程,下次吧。 虽然过程有点闪问不断错误重来,但总比我手打指令安装要快很多,可以看到不断移除和安装的, 但我只是点击继续,这一步确实让我觉得自己很累,不过想想老板不也是这样催促着我们的交付吗?既然如此,把自己当成老板出也是员工不就完了吗? 说也不负重啊。经过我一轮废柴式点击,执行了排放方案,生成合并大案,简单 pv table 检查一下,全程不到十五分钟,跟老板说今天花了一天搞定这个,剩下七个小时就摸鱼去了。

hello, 小 伙伴们好,接下来我们先讲解一下开发的准备工作,工欲善其事,必先利其器,所以接下来咱们先讲解一下开发工具,我们主要讲解两个,第一个叫编辑器,也就说我们去书写代码的, 咱们用我的电脑呀,噼里啪啦的把我们的代码敲出来。好,第二个我们讲解一下浏览器,也就说展示效果的,来看一看我们写的代码能不能正常的把它显示出来。 所以啊,在这里我们会分成两个视频,咱们这个视频呢,讲解一下怎么去安装编辑器。咱们下一个视频再讲解一下怎么去安装浏览器。好了,来我们看一下,那我们到底使用哪个编辑器来开发前端呢? 其实呀,在这里咱们简单地可以把我们的编辑器分成两大类,第一大类就是传统的编辑器, 比如同学们比较熟悉的 webstorm 呀, sublime 呀, h builder 呀, vs code 呀等等的,这些呢都属于传统的编辑器, 但是现在还有很多很多的 ai 编辑器,因为 ai 编辑器啊,使我们开发更加的高效,比如 calculator, 比如 tree 等等的。那在这里我们给同学们讲解的是我们的 tree 编辑器, 因为 tree 是 我们国产的 ai 编辑器,使用起来会更加的方便一些,不是科四用不起,而是 tree 具有性价比,呃,像科四呀,第一它就需要科学上网,第二每个月还得要三十美刀,而 tree 呢,是免费的,所以为什么不用呢? ok, 那 接下来我们这套课程整个的编辑器我们就通过 tree 来给同学们讲解喽。首先我们简单的了解一下 tree, tree 啊是字节跳动旗下的 ai 编辑器,它和 ai 呢深度集成了,比如说给我们提供了智能问答呀,代码自动补全呀,基于 agent ai 自动编程能力的等等,它的使用起来还是非常非常方便的, 我们可以直接在这里面提出需求,它就可以帮我们生成我们想要的网页,然后我们根据我们的需求啊,来去做一下调整就行了,那是我们开发起来会更加的便捷。好了,我们就详细的来看一下我们的 tree 这个编辑器。 首先说明一点,其实数据编辑器啊,它有两个版本,一个是国内版,一个是国际版,像国内版最大的特点是它的大模型啊,都是国产大模型, 比如说豆包呀, deepsea 呀, kimi 等等的,而且它里面也提供了图片来生成代码,或者是我们可以干脆直接语音来输入,你想输入什么不一定非得打字了,点击这个语音我们说就可以帮我们生成代码,所以还是非常方便的。 下边有一个官方地址,我们一会儿通过这个地址去下载我们编辑器好吗?好,第二个呢叫做国际版, 那国际版它的大模型啊,主要是包含的是国外的大模型,比如说 gpt 呀,还有 cloud 呀这个比较强的大模型,当然也会有 deepsafe, 国内的大模型,同样道理,它也支持图片生成代码呀,语音输入等等的, 当然它的能力不仅仅如此等,后面还有更强大能力,比如说 m、 c、 p 等等的,等着我们学到后面的课程,咱们更详细的去使用它好吗?那下面是我们国际版的下载地址,同学们一会可以试一下。 好了,那我们介绍完国内版和国际版,那接下来我们这个软件,它 ai 主要体现在哪些方面呢?好,咱们这套课程啊,主要是用我们的 ai 编辑工具啊,帮助我们做辅助编程, 比如说我们可以通过 ai 工具帮我们自根据提示啊,自动生成代码,哎,比如说我需要一个鼠标经过时间添加阴影效果,你说完之后呢,自动帮我们生成代码, 再比如说还可以帮我们去检查错误,帮我看一看我的代码是什么原因引起的,相当于我们有了一个小助手,他会帮助我们快速的排查错误,不需要我们一行一行的去检查代码喽。同时啊,如果有些代码你不知道它什么意思,你可以通过 ai 工具啊帮我们分析一下,并且写出详细的注, 便携,也可以帮我们去做代码优化等等的同时也可以帮我们去做一些 ai 的 技术测评,我们可以出一些题目啊,让它生成类似题目来考察我们,我们可以生成相应的网页,然后我们去做一做,看看有多少是正确,多少是错误的,都可以帮助我们去做测评。 所以咱们这个阶段主要是让这个 ai 编程工具帮我们去做辅助开发, ok, 这个就是 ai 开发工具的强大之处了,有了 ai 可以 使我们 学习更加的简洁和高效,我们不必去纠结。哎呀,这个单词没记住啊,哎,那个代码应该怎么写呢?哎,不用担心这个,我们只需要记住它应该怎么去写,怎么写会更好, 所以使我们的学习周期啊,变得更短了。好了,那介绍完这个开发工具的强大之处了,我们肯定迫不及待的想要使用一下喽,来看一下怎么去安装我们这个开发工具。 其实在这里整体我们可以分成三大步,第一大步呢,先去官网上去把它下载下这个软件来。第二步呢,进行安装,而且安装非常简单。那第三步呢,可以根据自己的喜好来做相应的配置。 在这里这个视频我们先讲解一下下载和安装,咱们下个视频会和浏览器一起搭配着来去做一个配置好吗?好了,那我们先去把它下载下来。 好,打开我们电脑自带的浏览器,输入我们这个地址。同学们,你看这个就是初一的官网喽,你可以直接点击这个按钮,立即获取我们的 i d e, 就是 下载我们这个编辑器, 它会根据我们电脑自动去判断你是 windows 版的还是 mac 版的,当然了,你也可以点击这个按钮。哎,查看所有的下载选项, 走着,你看有 mac, 有 windows 的 linux。 同学,稍等一下,现在还没有,那我们可以直接点击这个按钮,一点击,哎,现在就帮我们去下载,而且你会发现,其实啊,这个编辑器并不大,只有一百七十多兆。 好,我们稍等片刻,然后让他慢慢下载下来。同时啊,小伙伴们,你看这呢,还有一个国际版的同学们也可以去选择,比如说我可以选择这个一点击也会帮助我们去下载。喏,这个嗯一的是国际版,这个呢是我们现在刚下载的国内版的。 好的,在这里我们是不是把我们的下载已经下载好了,在这里我们点击文件夹中显示,走着。哎,这个就是我们的安装软件喽,安装的方法非常简单,只需要双击就可以了。 好,现在我同意此协议,你不同意他还不让你过吗?选择我同意点击下一步,然后安装到哪个地方呢? 在这里我是不建议安装到 c 盘的啊,因为 c 盘是作为我们的系统盘,如果你都装到里面,系统盘很容易满,会影响我们电脑的运行速度。在这里我点击浏览啊,我把它安装到我的 e 盘。好,点,确定, 接着点下一步走。 ok, 然后他再告诉我们是不是在开始菜单里面能够显示啊,我们点下一步就行了,再走。哎,要不要创建桌面快捷方式,我们同意就行了啊。在这里全部不需要去选择其他的,直接点下一步,然后正在安装哦,然后我们点安装就可以了。 好,稍等片刻,他现在正在安装,所以安装非常简单,就是下一步,下一步安装就行喽。 好,现在提示我们安装成功,我们点击一下完成,并且他默认会运行我们这个软件啊,我们点击一下完成,稍等一下会启动开我们吹这个编辑器。 好,现在启动开我们这个编辑器了。哇塞,太好了,你会发现这个编辑器里面所有的都是中文,我们终于能够用到使用中文的编辑器了,我们也不需要做汉化工作,太方便了。 好,我们来简单介绍一下当前这个编辑器啊。那首先我们发现我们的左边有一个我们常用的小工具,我可以点击。哎,里面有一些像文件呀,还有像我们的插件市场呀,你看这里面预览呀,源代码呀,搜索呀,全部是中文的。好,中间这一块呢就是我们可以打开文件或者打开文件夹, 右边这一块是我们吹的一个特色喽,在这里面我们可以去询问问题啊,或者是帮我们去优化代码都可以啊,只不过呢,我们 首先第一次的话需要去登录一下,我们点击一下登录好,稍等一下会打开一个页面,然后输入手机号和验证码,那我们只需要登录一次就可以了,后面就不需要再登录了。好,在这里我给小伙伴们登录一下。好,同学们,输入完毕之后呢,别忘了勾选我同意协议,点击一下登录, 稍等一下。哎,会提示我们登录成功,现在我们就可以使用我们的 tree 了,你可以点登录并打开 tree 就 可以了。点击, 哎,小伙伴你看我这个右边就会变成这个样了,我可以在这里面进行相应的输入,比如说我想要生成什么样的页面呀,或者我这个代码有什么问题呀,可以在这里面输入,而且这儿是支持语音输入的,比如我可以这么说,哎,我点击 帮我新建一个 atm 文件,里面写上 pink 老师带我们学习前端。 好,现在呢,我让他帮我新建了一个 h 版文件,里面呢也写上相应的文字。好,现在帮我们正在去分析,稍等片刻 好了,现在帮我们设置好了,那现在我可以点一下应用,把它应用哪个地方?呃,在这里呢,他告诉我们,因为我们还没有见目录,咱们下个视频就会讲解,那我们选择打开文件夹,我把它放到桌面上,点击选择文件夹。 好,现在呢,帮我们去生成这个 h 码文件了,现在我点应用喽,再点击一下,哎,有这个了。嗨,我们点一下接受就行了。喏,看到没有哎,帮我们生成了一个 h 码文件,并且帮我们把文字也给写上去了。 好了,那这个呢,就是我们这一个 ai 工具,帮我们快速去生成,后面的话我们也会去啊,帮我检查代码呀,或自动里面有提示啊,比如说在这里面我写一个 style 看好,呃,写后边的样式,你看 h 一, 它还给我帮我们生成相同的颜色啊,并且比如说我想让里面的文字加粗显示。好,我写完之后呢,同学们注意仔细看,它就给我们加上一个 bold 生成了,看到没有啊?自动会有相应提示,还有更复杂的效果,我们都可以来实现好吗?好的,这个呢,就是我们讲解了一下怎么去安装我们吹这个工具,并且简单介绍了一些界面,咱们后面会有更详细的讲解,好吗?那除此之外,我们还可以安装国际版的,打开, 这两个不冲突啊,他两个可以同时安装的,那安装的方法你看里面还是中文的,对吧?我同一次协议点击下一步安装到哪里,我还是安装到我的一盘,哎,记住,这两个他不冲突啊,安装到一盘,走着再点下一步,好,还是下一步 还是下一步点安装,那现在呢,正把这个软件安装到我们的一盘里面去。好,我们稍等片刻,记住,一个是国际版,一个是国内版,他们两个呢,稍微有点不同的啊,一会安装好之后,我们看看他们的图标好吗? 好了,现在呢也会安装成功了,我们点击一下完成,同学们再看我们桌面上,喏,桌面上有两个是我们的国内版,还有一个 tree, 哎,没有带 cn 的, 这叫国际版。 好,我们启动开我们的国际版,哎,你看打开外形还是一样的。呃,这呢也有个登录,只不过这个登录就有点不同了,我点击一下登录, 呃,稍等一下,他现在呢会打开一个登录对话框。呃,刚才我们国内版的登录啊,是需要输入手机号和验证码是足够的,但是国际版他在登录,你需要你有,要么是谷歌账号,要么给他哈普账号,所以说这个呢,需要科学上网。小伙伴们如果有账号的可以直接登录一下就行了好吗? 啊,同,当然了,同学们只需要登录一次,后面就不需要再次登录了。好,这是国际版的。好的,那我们先讲到这里,做一个简单的小结,通过刚才的学习,我们知道以后我们要开发前端用哪个编辑器, 哎,对了,用我们的 tree ai 编辑器,它使我们开发代码时候更加的高效,而且已经处于 ai 时代了,我们应该用 ai 工具更合适一些。 我们没有用其他的工具,就是因为当前阶段咱们学的是 atm css, 所以 整体来说是比较简单的,用 tree 完全满足我们的需要。 同时还有一个国内版和国际版啊,国际版,考虑到目前大部分小伙伴都属于刚开始学习阶段,还不会科学上网,所以说我们还是用国内版的 tree 好 吗? 那刚才我们讲了一下啊,如何去官网去下载 tree 这个软件,并且把它安装到了我们电脑当中,就按照一步一步的操作来完成就行了。那相关的配置咱们马上就要讲解了。好,接下来小伙伴们先把 tree 这个国内版的软件安装到我们自己电脑上吧。