兄弟们,今天给大家带来的是大家期待已久的 vs code 可拍老学生认证,先把视频目录放在这里,方便大家可以按目录来观看,因为这个学生认证太麻烦,你一次肯定操作不完。马上开始 第一件事就是准备一个 edu cn 的 教育邮箱没有,那就问一下学校的导员有没有?我推荐一个工具,瓦特工具箱,这就是瓦特工具箱的网址,进来之后我们就点击这个下载 windows 这个按钮, 点击按钮会弹出下载页面,点击接受并下载,这里会给你下载地址,那么我就上 get 一 e 下载了, 下载这里会有下载链接,点击第一个,这是下载 exe 的 文件,并存保存到一个位置。好,下载完了,我们点击打开文件,然后点立即安装就可以, 我们点立即体验,这个就是瓦特工具箱的主页。第二个网络加速往下找,找到这个 gitlab, 把它选中,然后我们点击这个一键加速按钮,这个时候它显示已经连接上了,然后我们再来访问 gitlab, 大家看 gitlab 就 已经可以正常的访问了。如果没有 gitlab 账号的朋友,我们首先要在 gitlab 上注册一个账号,进入 gitlab 的 主页右上角,这里有个三呀,点击这个按钮, 我们就进到了注册的页面,这里是添加你的 email, 你 的邮件地址,这里是你设置的登录密码,这个是你的用户名,下面这个是选择你的国家默认已经是 china 了,我们 就不要动。添完了这三项之后,点击这个 create account 按钮,它就会给你发送一封邮件,你点击邮件里边的确认链接,就可以注册成功你的 github 账号了。登录进入 github 之后,我们首先点击右上角的这个图标,在菜单里边点这个 settings, 我们首先要对我们的账单进行完善,点这个 bills and license, 找到这个 payment info 这里,在这里我们要填入姓名,首先是你的名字,这个是你的姓,不要填反了,然后是这些没有星号的可以不填,我们填一个哈, 都填写完了之后,我们点击这个 seven billions information 啊,这个信息就完善了,下面咱们来操作双因素认证,这一步我们需要通过手机来配合完成。首先我们进入商店搜索这里边找微软,我们来找到下边这个微软的这个, 点击获取啊,确认好,下载完成之后,我们在桌面打开这个应用, 点击接受,然后我们回到电脑端,点击左侧的这个往下走,到最后这里 to factor of education, 点击这个这个绿色的按钮,点击它会让我们再次输入密码来确认这个操作。 confirm 确认,这里就有一个二维码,打开我们这个手机,点击扫描 qr 码确认, 回到这里,把这个数填到 github 里边,二幺幺八七九,把这个码要保存好, down load 保存, 点击这个 i have saved, 这个操作就成功了。好,点击 down, 回到这个页面。然后再下一步,我们就要认证我们的 email emails, 我 们把教育邮箱填到这里,点击 add, 邮箱已经在这里边显示这代验证,我们去到邮箱里找一下这个邮件,可以看到在这里 github 给我们发了邮件,提示我们认证邮箱,点击这个绿色的按钮, 就可以跳到 github 的 认证页面,提示我们这个邮箱已经认证过了。如果你是教育邮箱, 会默认在首页显示这样一个装 github education 的 按钮。如果没有教育的链接,在这里 reading and license 找 education 这个项,点击右侧这个绿色按钮。 好, start application 就 到这里了。选身份,你要选择学生。如果是你的学校已经有人注册过了教育的认证,那么在这里 就会自动地显示出你的学校,你只需要点击相应链接就成。如果没有你的学校,你需要在这里打上你学校的名字,然后在这里选上你的 e d u 邮箱。然后首先要 share location 共享位置。如果你是用笔记本 或者是用手机访问这个网页,就可以成功地共享你的位置。如果你是用台式电脑,你共享不了, 你必须用手机或者是笔记本电脑来访问这个网页。点完 share location 之后,就可以点击这个 continue 进入下一步。 这里是要求你上传你的认证资料,你把你的学信网的材料或者你手写一份英文的说明给他就可以了。如果你现在的位置不在学校,他会弹出来提示框,请问你为什么不在学校?你手写一个 说明,我现在正在放寒假,不在学校,然后我现在的位置在哪哪哪里,然后在这里拍照上传发给他就可以了。提交完信息之后,就会弹出提示您的信息已经提交了,申请的过程到此就结束了。就可以去查看邮箱是否有邮件,如果在几分钟之内没有邮件, 就多等一段,你就等个五到七天,看看是否有 copilot 的 认证通过邮件。好,谢谢大家的观看。
粉丝1.1万获赞6.2万

我们后面要写正式的商业项目,所以前面那种用浏览器和记事本的编辑方式就不行了,我们要有正式的软件和环境,这一切我主要讲一下 vs code 的安装和使用,以及 note、 zs 和 get 的安装。 好,我们来到浏览器这边,打开这个网址,可以用 vsc 点 midol 这一点 com 跳转到这里, 这个网址就是我总结的一些我们必修阶段需要的一些软件和环境。然后浏览器的话安装很简单,所以就略过,你们这边尽量用 a 值,用不了的用可用,我这边都有链接去下载安装就可以直接使用。 然后下面我先讲云环境,云环境就是在厂商服务器上的环境,当你的电脑配置不行,或者说你自己安 装有问题的时候,那么你就直接使用云环境,云环境会默认配置好所有东西,我们直接使用就行。来这里我们先看 colod studio, 这个是腾讯云的, 点击登录,注册后可以直接用微信登录。进来之后我们看下面这个新建工作空间,点击新建第一个 on one, 他就会包含所有的语言和环境, 然后我们给他命名二一零一,选择仓库为空,然后创建,创建好后双击进入,等待一下就会进入。 我们先把模板关掉,然后左边这个就是文件夹栏,右边是欢迎页,我们先关掉,点左边新建一个文件,命名为 ext, 点 html 可以看到创建了一个 html 文件,输入 html 有自动提示,选择这个 htm 五,点击后就会自动补成一个空的模板。 我们先写一个 h 一标签,然后为了在他这里面能看到这个网页效果,我们来这边的插件市场拓展安装插件,这边选择 live, 可以看到有一个 live preview 插件,点这个安装,呃,他这个有一点问题,就是不会实时改变,所以我们退出一下再进来, 然后右键就可以看到这个来无 preview 选项数,就是展示,点击后右边会出现提示,点这个三千端口信息,打开内置预览, 可以看到这个网页出现了,我们修改文字之后刷新一下,可以发现它实时的修改 好这个 live preview 插件,他会帮助我们在云环境上起一个网站服务,然后看到网页,我们也可以在这边创建一个新的 htm 文件,用同样的方式给他输入模板, 写个 h 一标签,输入我是第二页, 再回到 index 首页这边输入 a, 创建一个 a 标签,把他的网址改成第二页的地址,输入前往第二页, 在预览这边刷新一下可以看到这个链接标签,点一下前往可以看到 跳转到第二页了,这就是两个网页之间的跳转。然后还有一个是可乐的 id, 这个是阿里云的,用阿里的账户登录之后也可以创建新的空间,这边我就先提前创建了一个, 这边的扩展是 live silver, 前面那个在阿林不能用,但这两种插件效果是一样的。安装后点右下角这个 go live, 它会自动打开五千五百端口, 这个单口是什么呢?比如说 ip 地址是你的小区,那么单口就是你小区的门,北门、南门这样, 这样每个端口代表一个门,所有的网络请求会从这个端口中进来,出去可以看到这边也是一样,实时修改后刷新这个网页,这个域名是云环境给的,可以暂时。 另外这两个是国外的,英语和网络不好不要看,有需求的同学自行选择。 下面是主要的问题,就是很多同学下载 vs 扣的下载不下来,因为网速很慢,国外的地址,然后我这边就用了加速连接。你可以先选择你的电脑版本,然后点击这边匹配你电脑的版本,然后你就可以看到他这个下载速度非常快。 下载下来之后打开点击,我同意,然后勾选这个全部,然后再下一步,下一步安装,安装好后直接完成运行就可以。刚进 来的时候很多同学说全是英文,看不懂,其实你只要稍微等三秒钟,右下角就会出现这个安装语言包提示,并显示语言更改为中文简体,你点安装并重启就可以了,重启之后看到已经是中文。 另外在这边点击插件市场也可以看到这个中文插件,我们先卸载掉,假如说你没有看到右下角那个提示,那么你可以来这边插件市场,然后搜索 chinese 中文,然后点击安装,重启一下就可以看到中文了。 visco 的左边依然是文件夹栏,我们点打开文件夹,可以选择桌面文件夹,当然你们也可以选择其他文件夹。我这边为了显示方便,就用桌面点开后 勾选这个信任,这个暂时不用管,也不用理解,勾选就行。可以看到左边已经是打开了桌面文件夹,这里面有我们桌面上的所有文件 index 点 s t m, 在这边是我们前面写的那些东西,然后我们再来安装一下插件,让使用更方便, 可以按照我列的这个目录去搜索安装。首先安装 preter 代码美化插件, 这个插件的作用就是会格式化美化你的代码。我们写代码的时候要有空格,要有换行之类的, 我们自己写的时候如果一直按空格按回车太麻烦了,对吧?所以我们要用这个插一键,让他帮我们自动格式化。在文件夹中右键可以配置默认的格式,选择格式化文档。 如果我们用自带的格式化功能,他会格式化成这样子,我觉得这个自带的 htm 格式比较难看,然后用这个 party 插件他就更好看一点。 然后安装一个翻译插件 wsen translate, 这个插件呢是我昨天找到的一个神器,它有一个翻译悬浮功能,也有两个快捷键,我们看一下 就是双击一个单词选中,然后把鼠标移上去,就可以看到上面出现的中文翻译,换一个 单词也出现了翻译宽度,对吧?这个就非常非常方便,大部分的代码其实都非常简单,只不过是我们看不懂英语罢了。所以的话有了这个翻译插件, 我们就可以看懂代码。然后他有两个快捷键,一个是 l 特加 t, 可以自行输入中文,然后翻译成英文,也可以用 l 特加 w 把选中的单词翻译成中文。 还有一个比较常用的功能是搜索跳转,这个功能是什么呢?就是我们碰上一些东西不会的时候就要去搜索,对吧?但是每次复制粘贴太麻烦了。 这个插件安装之后就可以一键跳转到搜索,我们这里安装,然后回到页面,选择一个单词,右键可以看到它上面有个 sexy online, 就是在线搜索的意思,默认是用谷歌搜索,但是谷歌大部分人上不去,所以要选这个 switch 换到这个病,推荐大家以后用病搜索,然后就可以看到直接跳转到搜索页面,不用复制粘贴,非常方便。 还有一个传斯类唐恩赖自动打开翻译网站也是比较方便, 但是我们有了那个悬浮翻译就不怎么会用这个,我们因为刚安装他这个插件有点问题,需要重启一下,按 f 一输入 restart, 选择插件速度重启可以重启, 然后点这个设置小图标就可以打开这个插件的设置。我们这边把他的默认翻译情改成 并。然后还有一个配置是显示在状态栏,勾选后翻译会在最底下的状态栏显示,比如说我们现在双击单词之后,可以看到右下角出现了翻译,这个也是比较方便,但是有点乱糟糟的,所以我还是把它去掉。有需要的同学可以打开, 所有插件的自定义设置都是这样的,点那个设置小图标,然后还有一个来 preview, 就是我们前面语文环境刚刚使用过的,在本地更好用。 搜索之后安装插件,它相当于给本地起一个网站服务器。以前我们打开网页,其实不是服务器打开,是用文件系统打开,然后这个打开之后可以看到是用使用服务器去打开 这里幺二七点零点,零点一是我们本地网络的 ip 地址,然后这个网站服务器在三千端口上,端口呢?还是那句话,就是相当于小区的门,所有流量都要从不同的门里进来,出去 有八零端口,有四四三端口,有六千端口,有五千端口,有三千端口,这样都可以。 然后再安装一个 vs code icons 插件,这个东西就是美化我们的文件的小图标,可以看到我们这边的小图标就变成了这样美化的啊,但是我觉得其实也没有,所以我就卸载了,你们需要的可以自行安装。 除了功能插件,还有一些主题插件,比如我们可以搜索 theme, 会出现主题插件,按 fe 输入主题,可以打开主题的设置,他这边 有很多内置的默认主题,比如说如果你喜欢浅色,那你可以选择浅色,如果你喜欢红色,可以选择红色,但还有很多其他的颜色,你们可以按照自己的个性,自己的喜好去配置,然后搜索出来,有很多主题,你们都可以去查看它,然后安装使用, 比如你看这个 atom 就是这样。 还有 winter is coming, 叮咚将至, 还有这个 material 主题,反正各种各样的漂亮主题,你们喜欢哪一个就用哪一个,这个是看你个人喜好的,随便都可以。 ok, 大概就是这样。然后插件的话,我这 暂时说这几个。再就是一些小配置, 怎么配置呢?就是点文件,点首选项,点设置,然后就会打开这个 vs code 的设置页面,我们先把 auto sale 打开,它会自动保存,当我们写完代码后,让它自动保存,就不用按 ctrl 加 s 了。下面是 fun size 字体设置大小, 可以看到这边显示字体会变大,这个就看你自己的喜好设置了。 还有一个是 for my town see you, 公选之后,保存文件的同时会自动格式化代码,你按保存它就会自动美化你的代码,不用你每次都右键去 点击格式化,很方便。 由我们这边来试一下。先写一个 d 五标签,可以看到 ctrl s 保存后,他会直接换行,而不用我们去敲回车。 然后再写一个 p 表现,他和前面一样, ctrl 加 s 保存后他会自动换行,不用我们再按回车,这样你就很方便。 然后再设置一下默认的格式化插件,我们选择 preteer 就行, 然后再设置一个林可以迪厅勾选 之后他会有什么效果呢?比如我们写的这个 p 标签,他前后两个开始和结尾,有时候我们写完前面的标签就忘了改,后面会出错,有这个之后我们改前面,他就会自动把后面的标签也改掉,这个写 html 的时候非常方便。 还有一个问题就是新版的 vs code 会对容易造成误会的标点符号进行提醒,比如说我们中文的分号和逗号等。 出现这个黄色的小框,如果你想去掉它,那么鼠标移动到上面,然后点调整禁运就行。 好,说完了 vs code, 再说一下安装这个 no 的 gs, 它是运行加挖 scrap 的后端框架,我们 进来这个链接之后,可以根据你的电脑选择不同的安装包,我这边就选择我的电脑是六十四位,然后点击打开,哦对,我这边因为原先已经有,所以的话这边是不男装更低版本, 我们也可以去 no 的 gs 官网去下载,这边搜索 no 的 gs 就会有这个官网,这边可以下载两个版本,我推荐你们下载那个 lts 的小版本,因为像这个最新的,他有时候会有一些不稳定的情况。 然后我们这边下载下来之后,点击我接受,再一直点 next 就可以一路下一步,然后点 install 就行,我这边就取消了,因为我有你。安装好后记得重启一下电脑,然后再安装这个 gate。 get 的话是版本管理系统,我们以后写代码需要版本管理是需要安装这个的。好,进来之后还是按照你的电脑是三十二位还是六十四位去安装一下,如果你实在不知道是什么,那你就安装三十二位也是可以的, 因为六十四他可以兼容。算上好像下载太慢了,我就不下载了,你们慢慢等。重启完之后回来这边点击新建终端,可以打开这个中端框,然后输入 no 的杠 v, 他会出现一个版本号,就是说明 no 的 gs 下好了。 其实云环境那边的配置和本地差不多,云环境基本上都是基于 vs 扣的做的,我们来这里搜索 party 插件,然后点击安装。这边的话安装会慢一点,但有些插件不兼容,比如说这个翻译插件在云环境就没有, 可以找个别的反应插件,比如这个也不影响使用。如果你电脑不行,或者说不想安装或者安装出错,一律建议使用零环境,哪怕他有些插件不能用,但足够你个人使用了,稍微有一点不方便而已。 我再来讲一下 vs 扣的的文件系统,左边这里相当于一个文件夹,我们这边创建一个文件之后,可以看到桌面上也自动会出现文件,大家懂了没?然后我们在编辑器中把这个文件内容改变之后, 回到桌面用记事本打开那个文件,可以看到他会出现一样的代码,就是说你在这边所做的所有修改都是会同步到我们这个文件夹里面的啊,相当于高级的记事本嘛。 我们也可以创建一个文件夹,同时看到桌面上也出现了文件夹,还可以拖动把原先的这个文件移动到文件夹里面,所以有这个文件系统后,我们就不用再切过来切过去设置各种文件了。 另外再创建一个 a 点 txt, 说明他不仅仅可以编辑 stm 文件,其他的所有格式文件都可以编辑,我们用文件管理器打开后也可以看到出现了, 然后我们在文件管理器上新建文件,可以看到 vs code 中也会同步显示新建的文件。 还有一个就是切换文件夹功能,比如说我们现在不想用这个文件夹的文件了,我们就选择另一个文件夹,这边我打开一个新的文件夹,就会出现新的目录,这个就是我们前面放图片的那个文件夹,然后也可以回到这个桌面。 另外还可以新建窗口打开第二个 vs code, 在这个多项目写的时候会比较常见,有不同的 vs code 窗口写不同的项目,同时在他们之间来回切换。 也可以在一个窗口中打开两个工作区,一个工作区其实就可以理解为一个文件夹, 可以看到这边的工作区里面同时出现的桌面文件夹和那个视力文件夹,两个都可以同时使用,就可以把第二个窗口给关掉了,这样的话在一些情况下比较方便。我们也可以把这个文件夹从工作区删掉,不是实际删除 好,删掉之后再打开装备文件夹回来,然后点一下文件,打开编辑器。我们现在来说一下几个常用的快捷键, 平常写代码的时候会比较常用,首先是 ctrl 加 d 会选 选择下一个相同的字符,就是当你选择一个单词之后,按一下 ctrl 加 d, 他会同时选择下一个,然后一直按会一直选,比如说我们这里按了三下就会选择四个相同的 p 标签,我们改他的话会同时改四个地方,这样的话非常的方便。 再就是按住 alt, 再按一下鼠标左键就会添加一个光标,也可以添加多个,多个光标同时添加之后我们输入文字,他会同时改变多个地方,这个功能也是非常方便。 ctrl 加 s 保存之后, ctrl 加 z 是撤销。然后还有一个是复制一行,我们可以用 alt 加 shift 加上下 下键就可以快速的把一行代码复制到上面,或者是复制到下面,我们用 ctrl 加 c 复制,还要回车之后调整位置,在 ctrl 加为粘贴,这样比较麻烦,但是我们有了这个快捷键之后,按一下就会复制一行,比较方便。 接着是查找 ctrl 加 f, 当你一个文件中的内容比较多的时候,我们想找一个字符找不到,就会用这个 ctrl 加 f 查找, 然后输入字符就可以拉开这个小箭头是替换,我们可以把查找到的东西按一下替换,替换掉我们需要替代的字符,然后右边是全部替换, 左边是单独替换,意思也就是字面意思点一下单独替换,可以替换一个单词,点一下替换,全部可以全部替换。 再然后是全局搜索,点左边这个搜索图标就可以搜索我们打开的工作区里面的所有文件的字符。比如说我们现在有两个 html 文件,输入搜索 html 的时候可以搜索到这两个文件家中的字符,我们点开之后可以看到一个是在 index 里面,一个是在 hi 里面, 这个全局搜索比较适合在多个文件中搜索东西。然后说完这个之后,我们再来看一下布局。 vs q 的很方便的一个功能就是可以分开创客, 比如说把一个文件放在两个窗口,这样的话适合在同一个文件的同时查看,两个部分 也可以适用于多个文件的同时使用。比如说我们这里先演示把上面这个抬头复制一下,然后在最下面粘贴进来,或者在右边的话中间也粘贴一下,可以看到 可以同时看到上中下三个部位,写的时候就很方便。你也可以用这边的布置设置,把它设置成两栏四栏,然后可以看到有四个部分都可以同时编辑, 然后外观这边还有很多东西,他们有不同的作用,你用的时候可以自行尝试,当然也可以不动,我的建议是不要动,前期的话不要折腾这些东西,因为他默认的就很好了,我们只需要知道怎么把他这个窗口 拆分什么的就行,然后选择这边还有一些常用的快捷键的按钮,也可以用这边的鼠标点击使用, 再回到这边首选项有个键盘快捷方式,这个页面里面就是所有的快捷键,你们以后如果想要什么快捷键都可以在这边搜索到查看到,也可以去修改,双击他的这个键绑定,然后输入你想绑定的快捷键就可以。 然后如果你不想改或者是冲突了,就可以再去把右键重置,按键绑定会恢复到原来的状态。这个的话先不用看,我只是说一下,哦对,还有一个帮助,比如说你们不会的时候可以点这个帮助开始,然后 在这边有他的一个小教程,也可以看一下他这个小教程,教你们学会更好的使用 vs 酷的。再接着我们按 f 一打开这个设置选项,我们可以看到有不同的设置,这里面有非常多的设置,直接输入功能的字符就可以搜索。 我们这边打开 live preview, 可以看到是乱码,因为我们这个文件夹是中文的,他这个插件不识别中文,所以我们以后写文件夹写文件名尽量要使用英文,因为中文在这方面确实支持不好,我们改成英文之后他就可以正常显示了。 最后我们把这些不用的可以删除掉,右键删除到回收站就行。好,那么本期到这里,本期的作业就是配置好你的环境,然后好好练一练所有的快捷键使用之类的东西。 下期我再补充一个用四 ss 写真实项目的案例,帮大家解决 css 的疑惑,拜拜。

vs code 如何接入 cloud code 或者 gemini 这样国外的大模型?呃,上一期视频我介绍了几个国内的 ai 编程助手,有一些朋友追求比较高,购买了国外的 cloud code 的 大模型的 api, 但是不知道如何在 vs code 中使用。我今天特地做一个视频来帮大家快速的安装好这些国外的大模型。好的,言归正传。呃,使用这些国外的大模型呢?我们需要安装一个 vs code 的 扩展 client, 大家记住英文拼写是 c l i n e, 我 们来安装一下,点击 vs code 的 左侧这个扩展按钮,搜索 c l i n e client 第一个就是我们要安装的 client, 这个是英文版,如果大家对英文有点抵触的话,可以试试安这个 client chinese 或者 client 中文版试一下。我就先安个原版给大家讲解一下。 安装好了之后,左侧这里就会出现一个机器人头像这么图标,我们点一下这个呢,就是 client 的 主界面,我们首先要在这里做配置,把我们的 api 添进去,选择呢这个 bring my own apikey, 选中之后点下面这个 continue, 在 这里就是配置我们自己的 a p i, 这个 a p i 的 provider。 我 们在这里选什么呢? open i compatible, 这个是 open i 的 兼容性,不要选下面这个 astropic, 要选这个 open i compatible, 点击这里选中之后呢?然后我们在这里还有三项被需要, l 这个一般买的都是国内的中转,他在给你的这个文档里边肯定会有他们中转的地址,把中转的地址填到这里,然后 open i 的 k k 这里填上,然后是选什么呢? mod id 好, 复制上,然后点 continue。 好, 我们点 continue 把这个关掉,这是它的广告,这个也关掉,这个是它的提示。哎, 这样我们就设置好了,可莱也可以在这里右上角的这个齿轮按钮,可以在这里修改你的这个 api。 呃,还有其他的选项,主要是这个我们要在这里把语言从英文改成简体中文 模型配置完了之后呢,我们要给他这个文件的读写权限,就是点击这个 auto approve, 这里我们要把读所有的文件,写所有的文件运行命令 和使用浏览器这些全都给他选上。还有这个开启提示。好,这个时候我们就可以开始使用这个格式,然后让他来给我们生成代码。这里 at 是 添加上下文,这个加号是添加文件或者图片,这个是 m c p, 这个是管理 client 的 规则或者工作流。这个我们就先不要搞那么复杂了,这里它也有 plan 和 action 两个选项,也就是说我们点击 plan, 它就可以先给我们规划点, 点击 action a c t, 它就可以实际的给我们产生代码了,这个是跟 chain solo 模式差不多。好,然后我们在这里简单的做一个页面,使用 h t m l 语言创建一个登录页面,这里也有规划和实施两个模式,在这里是计划模式,这里就是直接实施模式,我们直接选择这个 x i c t 模式, 开始让它来生成我们的页面。好,我们可以看到页面已经开始自动生成了, 提示我们已经创建完,完成了,登录页面已经完成,已经成功创建包含基本的 html 结构样式和简单的登录功能脚本。接下来我们启动本地开发服务器一测试,那就让它测试吧, 是不是出错了?我们需要提示它换一种方式来启动服务器, 它在这里直接调用浏览器打开了本地的这个页面。 好的,这就是这个页面不太完美,我们可以看到连接自定义的 api 已经成功了,至于其他的这些功能,我们之后再想办法,我会接着研究研究怎么让它顺利的工作起来。好,今天到这里感谢大家观看。


今天闲来简单研究了下可 out code, 完成了部署,并稍稍体验了下,感觉还是蛮可以的。部署的话直接在 get up 中搜索即可。然后点进仓库,向下滑到来的模块, 点击蓝色的链接进入到官方文档。在该文档中给出了两个 windows 系统部署方法,我选择了第二种方法进行部署。 打开控制台,输入指令,由于地区限制,这里我建议分布执行。先执行下载脚本, 下载完毕后先检查脚本内容,查看开头后发现下载的是网页,并不是脚本,这是为走带你被地区限制造成的。 解决的话只需要配置下 http 代理环境变量,打开你的魔法猫咪,查看设置下的端口号,然后在控制台中输入配置代码, 配置完成后检查下是否成功。 从返回的内容来看,是配置成功了,既然配置好了,那就重新下载安装脚本, 下载完毕,再次查看一下脚本是否正确下载, 这次文件以 erata 开头说明下载正确了。 接下来就是执行安装脚本了, 这样就安装完毕了。 查询下版本,检验是否成功安装很好,成功返回版本,安装成功,最后还要配置下环境变量, 添加完毕后重启控制台,查询版本,检验是否成功。 成功返回版本。科尔的扣子初步部署成功, 接下来就是解决模型和 ipit 的 问题,由于使用科尔的模型前需订阅服务,我只是想体验下进行订阅肯定是不划算的,于是我打算使用 deepsea 模型感受下。进入 deepsea 官网,选择进入 ipi 开放平台, 进入后选择侧边人的 p i keys, 再点击右边的创建按钮进行创建,这样就能获得 p i, 然后找个地方保存好。当然别忘了充值 模型和 p i 也解决了,那就只剩下配置问题了,你可以直接在环境变量中配置,我是使用 cc switch 来进行配置的, 它是集合科罗尔的 zmi 和 compadis 的 格式化工具,可快速切换 rpi 和模型。配置也是在 getup 中直接搜索,然后点击进入仓库,进入后直接点击右方的 release, 跳转到页面后直接向下滑,直至到 r s s 模块, 然后选择你所需要的安装包进行安装下载,我选择的是第九个安装包 下载,安装后打开程序,点击右上角的加号,选择 deepsea, 输入 ipi, 点击添加即可,因为我已经配置好,这里也不做具体演示,最后选择其用就完成了。 万事俱备,直接打开控制台运行 cloud, 这里选择自己喜欢的样式, 因为没订阅,这里选择第二个,这里出现了弹窗,登录后关闭即可, 关闭后继续跟着提示往下走,这里选择 yes, 这样就成功打开了。接下来向他提个问题,问一下他是谁,又能做什么, 这里他开始思考, 思索片刻后也是给出了回答,这样的话就完全部署成功了。 v s code 的 话,需要先安装 curl code for v s code 插件, 成功安装后点击右上角的图标,并可以开启, 这里我让他浏览文件并给出总结, 最后也是成功给出了总结,格式的话,在终端打开 cloud code 即可使用, 这也是成功给出了总结。 最后大家可以多关注该用户,他是 cloud code 的 核心负责人,经常分享关于使用经验功能进展焊实践技巧等内容。

哈喽,同学们,今天咱们就手把手的带着大家来体验一下怎么用 ai 来呃,辅助我们完成一个编程的项目,那么也可以刚好结合一下大家最近要参加的这个比赛,就是个康城杯的人工智能软件开 开发技术大赛这样的一个项目,那么大家跟着走下来之后呢,不仅能够搞定这个赛题的一个基础框架,还能学会 ai 编程的核心技巧。那咱们用到的工具是 vs code 加上 github code palette, 那 么大家可以看到我现在呈现给大家的画面里面就是 我用 ai 帮我做的一个项目,那这里有一些历史,历史的聊天记录呢就是,嗯,我把它放到中间来啊,历史的聊天记录,大家可以看到我跟 ai 对 话的一些过程,这样是怎么样把它部署起来? 那么,呃, gitlab, 呃呃,就就是 vs code 和 gitlab 这个 ai 编程组合呢,现在在 ai 编程圈不是特别的火,那么网上能找到的资料和教程也不是特别的多,它是比较冷门的。但是呢,为什么我给大家推荐这样的一个组合, 它的优点就是不需要翻墙就可以直接去使用了啊,并且如果我们用我们的学生身份去申请了教育优惠的话,是可以免费的使用它的高级模型的,那高级模型的对话 和写代码的质量是明显比普通模型要好很多的,能节约大家不少的时间,所以这个呢,也是降低了大家的一个使用门槛。那么首先第一件事就是安装了对吧?呃, 安装的话我就给大家带一带,也不多说了,首先就是 vs code, 大家可以网上去搜索 vs code, 然后去官网下载, 然后可以下载 windows 版本,然后去安装就可以了啊,这个就是 v s code, 那 安装的时候就一路 next, 一 路 next 就 可以 可以安装好,没有什么复杂的设置,安装好了之后呢,就这个样子,但是右边没有我这个插件啊,也也没有我这些硬件相关的一些插件啊,可能是你们的功能会稍微的少一点,咱们只需要安装一些必要的功能就就可以了。 那么装好了 vs code 之后呢,接下来就是安装 gitopilot, 那 么安装的时候呢,是在这边有一个扩展,这个按钮就是一堆小方块这样一个扩展,那么在扩展里面我们输入 gitopilot 来进行搜索, 那么它就会呈现出来上面有第一个是 gitopilot, 第二个是 gitopilot chat, 那 这两个大家都可以装一下,我现在都是已经起用的一个状态。那么装好了之后,大家就可以像我一样在右边就能够看到跟 ai 去聊天的这样的一个窗口了啊,那如果我们要使用 啊 copilot 去对话的话啊,还需要登录一下,那登录的时候就会需要大家去啊去 github 上面啊,去这个 github 上面 去注册一个账号,那我这个账号呢,其实是已经注册好了是吧?注册好了的话,你点击登录就可以输入注册码啊,直接就可以使用这个 copilot 来进行编程了。 来看一下大家除了注册账号以外,还可以 join github education, 这个就是我刚刚说的教育优惠,它会给你每个月啊免费的三百次跟高级模型对话的一个额度, 嗯,比如说这个就是我的额度的一个使用情况,可以看到我这个月是使用了百分之八点四这样的一个,嗯,请求次数,这是我吸取了上个月用光了的教训,然后这个月省着用的啊,等一会我也会给大家讲怎么样去省这个次数 啊,怎么样更好的去把这个 ai 啊用好,然后又不超额度又不额外的去花钱啊? ok, 那 装好了之后,我们来看一下整个软件的一个界面布局,这个我就先关掉了啊,啊,左边是咱们的文件夹, 有文件管理、搜索扩展啊之类的这些功能。后面咱们新建了一项目之后,就是在这个文件管理中打开就可以看到这里面有哪一些文件夹了。比如说就以这个项目为例,这项目也是 纯 ai 写的啊,是我昨天,前天,前天下午五点钟的时候,大概吃晚饭之前啊,丢给 ai 一个任务,让他去写啊,然后他从零开始啊,他是这样的一个服务网关的一个项目啊。 呃,这个就不给大家看了吧。嗯,就是把需求文档丢给丢给 ai 去写,然后,呃,大概在晚上十点钟左右的时候,这个项目就写好了。这是一个正儿八经的商业项目,是给, 呃一个政府做的网关项目。那么可以看到,呃,我们现在使用 vsco 的 一个方式呢,和我们以往其实是有区别的, 呃,因为如果要用 ai 编程,那么其实前端和后端是需要进行蛮多交互的,对吧?你的 api 接口到底是怎么写的?如果我们人来做这个桥梁,去跟前端沟通,哎,后端是怎么写的?然后再去跟后端沟通前端要调什么接口,这个过程其实是蛮费劲的,所以现在呢,我们就会把整个项目都放在同一个文件夹下啊,然后前端去建一个, 建一个文件夹得后端去建一个文件夹,那么我们的 ai 就 会自动的去读取前端的代码,去读取后端的代码,然后它自己去完成这个交互和测试的过程,我们就不用人去呃在这里面去进行维护了,嗯, 然后右边就是他对话的一个地方啊啊,等一会我再给大家具体讲这个呃,怎么去使用的一些技巧。因为 ai 写代码是需要时间的,所以我们先先新建一个文件夹,比如说我们来到桌面上点击新建文件夹啊,就随便取个名字,比赛赛题, 赛题。好新新建了这样的一个文件夹之后呢,我们在 vs code 里面把它打开,需要文件打开文件夹啊,找到我们的桌面,桌面有一个比赛赛题,是吧?选择这样的一个文件夹, 那么可以看到整个窗口就切换到比赛赛题啊这样的一个界面里面来了。 嗯,接下来这个文件夹是空的,那我们其实是需要需要把把相应的一些要求放到这个文件夹里面的,对吧?所以接下来我们把赛题的要求文档先放过来 啊,赛题要求文档有哪一些呢?比如说我们针对赛题 b 来说的话,那赛题 b 里面是有一个参赛要求及提交资料要求啊。 那么在这里也跟大家说一下,大家做题之前呢,一定要先把在题要求看明白,咱们的重点是开发一个软件 啊,它是开发一个软件,呃,要开发一个契合企业需求的一个软件,那么文档和 ppt 呢?都是用来辅助说明你的软件长什么样子,如何进行操作的,而不是把重点放到, 因为大家会有一些参加创新创业比赛的一些惯性啊,那么不是要把重点放到怎么样去美化 ppt 和怎么样汇报会更加出彩上面啊?嗯,所以大家重心应该放在人的开发上 啊。那么接下来啊,要看一下这里面哪些资料是比较重要的呢?一个是啊,这个需求分析,这个是咱们企业为大家提供的一个真实的需求啊。再一个呢,就是见面是吧? 嗯,企业的设计师绘制了一些这个设计稿供大家去参考,当然这个设计稿也未必你就要一比一的去复刻,这个设计稿你也可以去发挥,还可以再增加哪哪些功能,是吧?这个就是我们最核心的一些文件了。那我们首先先把这些文件丢到咱们的 咱们的这个工程里面去吧,后面就可以在工程里面去找这个。嗯,题目了,一个是思维导图,一个是设计图,是吧? ctrl c 复制一下, 然后到这个比赛赛体里面去新建一个文件夹,那我这里就取名叫 d o c x。 d o c s 就是 意思,意思是我在这里面放的是一些文档吧,不是代码。 ok, 然后把这三个 ctrl v 粘进来,把这几个东西就粘进来了。啊?我,我好像没有粘到这个, 没有粘到这个文件夹里面啊,没有关系,我们把它拖进来就好。嗯, 剪切复制粘贴没有吗? 哦,我刚刚这个 d o c x 创建了一个文件,而不是一个文件夹,是吧?嗯,搞错了,那么这个我就给它删掉了去,应该是应该点右边的这个新建文件夹 d o c s, 这样就对了, 然后到这个里面来选择粘贴好,它就粘进来了,我们放到 d u c s 这个目录下, ok, 粘进来了之后啊, ai 就 可以去读比如说图片参考设计图这样的一些文件了。但是实际上我们现在跟 ai 去对话的话啊,可能还差点意思,就是 因为大家都知道啊,让 ai 来帮我们干活,最关键的就是提示词怎么怎么把它写好,那提示词写得好的话, ai 生成代码就又快又准,那提示词怎么才能写好呢?我,我给大家分享一下我一般是怎么做的,因为我认为啊,我写的提示词呢,肯定没有 ai 写的提示词好,所以我就会用 豆包,我会用豆包来帮我去写一点这个。嗯,提示词啊,这里是可以上传附件的,那我们先上传一下刚刚的这个图,就是软件需求分析思维导图, 那么大家也可以根据自己的习惯去选择 deepsafe 或者是 jimmy 三或者是叉 gpt, 那 么用高级模型给出的结果肯定是明显要好于普通的 ai 的 啊。嗯,我给我给他提一个要求,嗯,根据 根据这张图片啊,生成需求文档,生成软件需求文档吧, 那他就会帮我们写好这样的一个需求文档,那这个文档肯定比我自己写的要好,对不对? 好, ok, 那 他这个需求文档就写好了,那接下来我们继续给他传图,上传文件或图片。传什么图呢?就是搞他这些图,这些图是我,是我的设计图,是吧?我看看能不能用语音输入法啊, 查看这些设计图,检查有没有漏掉的功能。补充,在刚刚你写的需求文档里面, 我现在连打字都懒得打,都换了语音输入法,这样的话跟 ai 对 话就会更加方便了。好,等它上传完了之后给他发过去,让他继续补充。 你看他刚刚写的时候是没有写账号登录,呃,账号密码登录的对吧?但他读了我的图之后,他知道需要有这样的一个功能,所以他就会在文字里面非常明确的展示出来有这样的一个一个功能,把它补充进去了。好,然后我们再问他一个问题就是,呃, 假如说我要从零开始让 ai 帮我去创建这样的一个软件项目,呃,提示词的编写会有哪一些要注意的要点呢? 嗯,这是 ai, 就是 语音输入法识别出来的啊。问了他之后他就告诉我题日词的边写需要要点对吧?他会告诉我你怎么样去写题日词,那这些也是一些技巧了 对吧?嗯, 好的,你现在帮我编写完整的提示词模板。我的软件是要做前后端分离的,前端要用 view 三,后端用 jangle 框架。 看一下。啊,其实怎么玩软件呢?前端分离,前端用 vivo 三,后端用展口框架。 ok, 让他先写啊,那,那 vivo 三是非常常用的一种前前前端框架了,后端我用展口。主要是考虑到啊, ai 写 python 代码写的非常非常的快, 所以我我我建议,呃,我我,因为给大家录这个演示视频啊,希望 ai 写代码写的可以快一点呃,不然我就需要加速加的很很多倍啊。所以我我是说让它 用这样构框架,那么正常。如果大家软件专业的同学是用 java 用的比较多的嘛,你完全可以用 java spring boot 那 一套,那如果有同学比较擅长用 delete, 也完全可以用 delete 来做后盾啊。 它这个是帮我生成了很多的提示词,并且并且并且给 ai 拆分了很多个风格,比如说有产品经理有权赞。那么对于 cloud code 的 这种 基于,呃怎么说呢?基于智能体的 ai 编程工具来说确实需要这个样去拆分,然后这些角色呢就可以分别去进行它的工作了。呃,但是对于我们的 copilot 来说,嗯,也可能是我没有找到很好的一个呃,叫这这个这个使用方法吧。我还是,呃 就是单县城的去工作,还没有到他这个呃完整的就是让让多个多个智能体去协助的这样的一个程度,所以我我我其实更希望他帮我生成,帮我生成完整的一次对话的提示, 一次对话就边写整个工程到七十次,这样我用起来可能会顺手一点啊,然后告诉他不要区分角色。 好,我觉得这个还是不错的啊。 ok, 那 么我就把这一段话给它复制下来,然后让让 copilot 去写。嗯,这个我新建了一个工程之后,它右侧是没有这个侧边栏的,那么在这里 打开聊天,对,打开聊天他就会在侧边去显示,如果是新建聊天编辑器,他就会在中间显示啊,都可以,那我两边就都打开,然后刚刚那个提示词我就可以给他粘进来,然后除了提示词以外,我还要把刚刚的那个需求,对吧?我要把刚刚那个需求 给它粘进去,对吧?我在这里面。嗯,再去创建一个,新建一个文件,叫需求 点 t x t 吧,就直接叫 t x t 好 了,这样的话大家也好理解一些,对吧?嗯, ctrl s 保存一下, 然后回到刚刚聊天界面,我们这个还可以给它添加一下上下文,点击添加上下文之后,这个列表里面会呈现出来我们最近打开的几个文件。那我就可以把这个需求点 t x t 给它附上啊,去跟它对话,那它就会根据这个需求以及我的提示词来帮我生成整个项目。 嗯,我先让它先生成,然后再慢慢给大家讲这些选项。嗯,其他是生成, 对吧?然后先发过去吧。好,那他现在就开始 working, 是 吧?他就开始在这个项目里面去工作了。 嗯,在他工作的时候,嗯,可以给大家讲一下有一些使用的技巧。 那么大家可以看到我刚刚其实它下面有两个选项啊。第一个选项是你要用什么模式让这个 ai 来为你工作。我一般来说现在都是选 agent agent 什么意思呢?就是说它可以。呃,它可以有比较充分的一个权限。 好,看到它这边有一些关键信息,我将直接在你当前工作区里面生成一个可运行的前端。后端 post grade secure。 啊,它用的是 post grade secure。 那其实我刚刚应该认真看一下它的一个架构的。我其实并不想用 post grey circle, 嗯,因为 post grey circle 我 没有安装啊,就可以让它用 circle light 先去创建一下是吧? 然后并补齐这些东西啊,然后, ok, 那 就让他先干啊。嗯,大家可以看到其实左边已经创建了一个文件夹,是吧?已经创建了一个文件夹, 那这个文件夹里面包含了 back end, back end 大家都知道是后端的意思是吧?然后是 front, end 是 前端的意思是吧?嗯,就是后端和前端的文件夹,它帮我们创建好的。 好,接着来讲我们刚刚要说的这四种模式。第一种模式是 agent, agent 是 有比较多的权限的,它相当于是嗯嗯代理模式,就是我们把最高的权限给到了 ai, 然后让他来帮你,他可以读你电脑里面文件,去创建文件夹,创建文件,整理文件,然后去运行工程,去敲很多的命令,相当于我们给他一个呃任意去修改项目里面代码的这样的一个权限,也是我最常用的一个模式。 那么除了 a 阵的模式,第二个模式是 ask 模式,那 ask 模式就很简单,就是就是咱们,咱们只能聊天,你完全不可以动我电脑里面的任何东西呢。这个就是 ask 模式啊, 这个 ask 模式呢?就跟就跟就跟。呃,那个啥,你去跟豆包对话没什么区别啊,它所有东西啪啪啪给你呈现在这里是吧?但是它不会帮你去写代码,你还要自己把这个代码复制到那个文件里面去, 你不就是很麻烦吗?而且你你,你要对你的工程非常熟悉才能找得到,你要把这个嗯代码贴到什么地方去,是吧?所以 ask 模式呢?就是对话, 还有比较常用的一个模式,就是啊, edit 模式,我看啊, edit 模式我其实没有怎么用过。 edit 模式应该是和 plan 模式啊联合起来去使用的啊。就是说, 就是说 plan 模式是计划,对吧?就是你提了一个要求之后, ai 不 会立刻的去改你的代码啊,它会先列一个计划,你确认你确实要这么干了之后,然后它才会去行动。那,那我觉得 edit 可能就是跟 plan 结合起来去使用的,你先计划好, 然后再让这个 ai 去根据这个计划完成相应的这个工作,是吧?嗯,这个是四种模式,那么在这里你也可以配置自定义的智能体,那么可能是比较高级的一些用法吧,哈哈。 嗯,比如说刚刚豆包给我们提出来,可以有产品经理,可以有前端,有后端这样的一些不同的角色,其实就可以在这里去配置智能体。那我还没有用到这么高级的一个功能。嗯,我我我其实时间也比较多,我可以慢慢的等一等,让他自己在这,然后去单线城的去运行就可以了。 嗯,并且我也有点怕,说实话我有点怕两个 ai 一 起对这个工程进行操作的话,会不会互相产生一些冲突,是吧?所以目前还是单线城的去进行这个工作。 嗯,可以看到,我看看啊,他把这些东西已经开始创建了是吧?文件已经创建了啊,后端也创建了 docker fire requirements, 因为我们是 python 的, 所以会有一些 requirements, 是 吧? 然后这个是一些文档也也慢慢都在这里给我创建。那他现在先干后端是吧?先把后端后端的一些相应的文件啊,你看,哈哈,全部都给我创建好。嗯, 那我们现在就让他在这创建,那他这里会告诉你他计划干什么,那他这里有有六个图图纸,他会顺着这个图图纸往下去进行。那首先第一步是初步化工程与工程目录和文档,那他现在就在干这件事情,然后他会依次顺序的往下,也不一定是顺序,有的时候也会有些交错 啊,全部都干完了之后,嗯,就结束了。然后这里呢,这个小箭头展开之后,他会告诉你他都修改了哪一些文件,是吧?每个文件里面他写了多少行?比如像这个文件 lightning 点派,他就写了一百二十七行,是吧?我们可以打开来看一下。写了这么多, 有这么多,那你可以选择保留,也可以选择撤销,但是对于我们来说,我们希望更充分的去挖挖掘 ai 的 潜力,所以我我我现在是不太建议大家去死扣这些细节,特别是在项目初创创建的这个过程中啊。 呃,再回过来,那他写的这些呢?我就不看了啊,为了降低大家的使用门槛,我就不看了,就点保留啊。就是我认为 ai 写的都是对的,你写什么都是对的,你要是写错了,我再用提示词让你去修改,而不是我手动去修改, 那么就在这里让他先写吧。嗯,那么写的过程呢?中呢?大家也会看到他帮我打开了一个中端是吧? 帮我打开了一个终端,然后去敲了一个命令 python 杠 v, 然后获取了我当前系统的 python 版本是三点一三啊,然后他就心里有数了啊,对应着这个版本去安装 java 去写代码是吧?就这都是他自己去进行的一个过程,并不是我自己去敲的。嗯 嗯,那么有的同学第一次使用的时候,他不会自动的帮你打开终端,他会问你,你允不允许他打开啊?然后你点进去就行了。但是我因为使用了很久了,他每次都让我去点进去,我也觉得很烦的,所以我其实是在这个呃设置里面, 在这个聊天设置里面有很多很多的这个设置项,我是给了他最高权限,就是我跟他说你干就完了,我所有的权限都给你,你不要再问我,然后就就就就直接所有的权限都给到他,然后直接去让他进行操作,我就不用一遍遍的去点允许了。 这边的保留,其实我们也可以不用着急点,等他全部写完之后再点保留也行,然后不点保留这些代码也能存下来。嗯,我现在点一下吧,这是纯属强迫症了。 接下来再给大家讲一下什么呢?就是模型,刚讲的是我们选的这个模式是选 agent 模式,是直接就开干这样的一个模式,然后第二个选项是要选模型,那如果说大家没有去呃申请教育优惠的话, 呃,你只能选这些免费的模型。 g p t 四点一 g p t 五 mini golf code, golf 是 马斯克家的是吧?还有 rapper mini, 呃,这样的一些免费的模型,免费的模型右面会标注是零成。呃,然后还有我下面是有蛮多高级模型可以选的。那这个就是因为我申请了教育优惠, 我这里用的是 g p 五点二。 g p 五点二是个大后端啊, jumbo 三 pro, 它写前端会显得写得比较好一点,那么还有两个模型是零点三三,就是你跟它对话一次,它在记录这个额度的时候 啊,只给你算零点三三次对话。刚刚也给大家看了我的 copilot 的 一个使用额度,就是这个就是高级模型的一个对话的额度,是每个月三百次对话,我上个月就一不小心用完了,所以上个月最后三天用完了之后,我只能用普通模型,这个代码写的是非常非常痛苦的。 那么这里面还有一些 m c p 的 工具可以去给大家去使用啊。这个我也没有仔细的去研究啊,到底还有哪一些工具啊,反正就。嗯,目前用的还还还,就是目前我研究到的这些功能已经完全足够支撑我的一个软件开发了。对,大家也可以自己去探索一下。 嗯,如果你在使用的过程中有任何好的技巧,其实也可以来和我交流啊,就是这就是教学向长嘛,就是我来啊,给你们提供一些新的思路,你们也可以把比我用的好的部分来提供给我,来反哺一下我的一个使用技巧。 嗯,那么另外再说一下,就是他的这个,嗯,教育优惠的申请啊,就是 getop 的 一个教育优惠的申请,其实是比较麻烦的 啊,其实是比较麻烦的,首先大家都知道 github 它的访问就是不稳定的啊,你经常一刷新可能就进不去了,然后过一会再刷新它又进去了,就不太稳定啊,因为毕竟是国外的一个网站嘛。 嗯,然后申请教育优惠也很也蛮麻烦的,就是说啊,你需要有你的这个学信网的学籍的截图提交给审核员, 呃,然后呢?你除了提交截图以外,因为截图里面全部都是中文的一些内容嘛,那审核员是老外的话,他看不懂你这些中文的内容,很可能就一下子给你拒了,还是把这个画面呈现出来,让大家看到这个他工作的一个过程 啊。审核员如果看到都是中文的,他可能直接就给你去了,这个申请的过程也也也也会比较一波三折,所以我的技巧就是,嗯,我们截了学信网那个证明之后呢,呃,在中文的旁边给他标注一下这个中文对应的英文是什么啊? 这样的话是比较容易通过这个申请的。我跟其他几个老师交流下来,嗯,就他们也是进行了全套流程的一个申请,但是最后没下来,可能就是因为我做了这个英文的标注,给审核员提供了一些便利吧,所以这也是一个技巧了。那除了标注中文以外还会有很多啊,其他的一个技巧, 大家可以在网上去搜一搜啊,包括 b 站啊,有也有很多视频,还有一些文章也都会告诉大家怎么样去申请。如果你想用这个高级模型就就去申请一下。那如果有同学说我实在是不想申请, 我实在是不想申请,嗯,太麻烦了。或者是说我,我申请了之后,嗯,需要等很久,需要等很久,嗯,很多很多天才能下来,我现在等不及,我现在立刻就要用。那么你也可以选择,呃,就是付费他这个,他这个额度呢,是用完了之后, 用完了之后我看这里有没有写,没有写是吧?大概是零点零零点零零四美元兑换一次啊。其实也不算太贵啊就是付费去去用一下也是可以的。你看他又写了很很多的这个代码, 现在就是 ai 在 拼命的哐哐干活,我们只需要在这等待就行啊。我看一下啊现在他干了什么呢? 嗯他直接干了然后创建了然后把折购的后端的全部都干完了,然后后端的已经搞定了并且把这个生成链路也搞定了,接下来开始生成他他他对吧?啊他就是已经干完了一项了,他准备干第二项了,然后他又 来跟我确认是不是要接着干。就他你看到他停下来之后就要告诉他要接着干是吧?但是我其实其实会觉得他反反复复要跟我对话蛮烦的,所以我一般会告诉他 啊告诉他什么呢就是嗯请你继续完成未完成的功能直到所有的任务都完成了再停下来中途如果有不太确定的部分也不要问我,你直接选择最优的解决方案去实施就可以了。 看一下啊继续完成了所有任务你不太确定也不要问直接选择最优的解决方案去实施就可以了。 ok, 那 就让他接着干啊,他就又在吭哧吭哧去干了。 嗯在等待的这个过程中也要跟大家稍微聊一下我们的提示词技巧,就是你不能简单的跟他说帮我做个心脏软件啊。那他是。 嗯不太会他做出来的东西他也会做出来东西,但他不太会契合你真实的一个需求啊。我们最好是明确的 告诉他这个软件要有哪些功能啊?它要包含什么样的组建?然后它的布局应该是什么样的一个结构啊?我们说的越具体, ai 呢,就越能 get 到你的点,比如说我们刚才让豆包去干了这这么写了那么长的一个提示词,其实就是为了为了达到一个提示词更加精准的一个效果。 那么大家呢,也可以在做的这个过程中加入自己的一些风格啊,比如说,比如说你用不同的模型来去做前端的这个代码,它做出来效果可能就不一样,你即使用同一个模型 啊,做出来的可能都都会不太一样的一个前端效果,然后你也可以通过提示词去限定它要生成什么样风格的这个界面。比如说前一阵子不是非常火的,大家会让 让什么? nano 不 nano 是 吧?去生成吉卜力风格的,呃,吉卜力动画风格的一些一些一些图,呵呵,都是可以的。或者你比较喜欢赛博朋克风格,这些都是可以给 ai 去提要求,他并不会反驳你,他会按照你的要求把这些风格啊融入进去啊。那当然呢,我们其实还是要考虑到企业的真实需求,是吧? 啊,就是因为我们这个是企业的真实的项目。呃,如果你去弄一个极不离动画的风格,去拿到医院啊,去给医生去使用的话,可能还是有点怪,是吧?所以大家也要考虑到医院和医生会希望看到什么样的界面啊,它使用起来会是比较舒服的 啊。另外呢,大家还要注意一下,最好给 ai 限定是用什么框架啊,包括我们在题里面也提到了,建议大家用前后端分离的一些框架。那我是限制他用 vivo 三做前端,用卷口做后端,但是我还是失误了。我刚还是失误了,让他用那个 post grey circle 去 去去做的那个数据库是吧?其实我更希望他用 circle light。 那 等他下次停下来啊的时候,我就告诉他,我要把这个数据库改成 circle light, 然后再让他接着往下做。 嗯,不知道大家有没有听过一句话叫人生苦短。我用 python 就是 python 的 代码呢?其实是会比其他语言的代码要短很多的啊。 比如说我们用 spring boot java 来写后端的话,可能一个正儿八经的项目就是普普通通的做毕业设计的这种项目可能都要写个一一万多行,而 python 的 话可能就是两三千行就可以完成所有的这些要求了。嗯, 它的代码量是比较小的,所以其实也很适合 ai 去生成,那代码量越小,它出错的概率就会越小。 接下来就是无尽的等待时间。 是不是已经写好了?看一下哦,这个创建了虚拟环境,然后还写了测试文件是吧? 然后还把前端的给它干完了。前端实现了,实现了,前端唯一堵塞的是多块没启动, 找不到 dock, 需先启动 desktop, 然后再去干这个哦,因为我们的提示词里面给他规定了要让他用 dock 来启动是吧?我这里倒是装了 dock 的, 来找一下啊。 desktop 大家写的时候可以不要这样写提示词。嗯,不然你没装 doker 的 话,还得去装一下 doker 是 吧?来把我的 doker compose 启动一下好了吗? 他说本地的去跑 npm 撞标的已经实现了啊,就是冒起来了,后端冒烟测试,哈哈哈,还写了一个冒烟测试, ok, 那 这些我就不管他写了什么,就直接点保留了。嗯, 看看我们刀客启动了吗?刀客还是没起来。嗯,那我们就来修复一下这个问题吧。就是第一个,我们不要用刀客来启动,我们直接在本地跑本地测试就行啊。然后第二个,让他把数据库给它切换成 circle light 是 吧? 第一,我们不要用 docker 启动了,直接在本地跑就行,你帮我把前后端的工程都运行起来。第二,嗯, circle post green circle 改成 circle light, 我们应该先让它把这个 post grey circle 改成 circle light, 对 吧?然后再让它用,不要用 dk 启动。第一,嗯,把 post grey circle 改成 circle light 数据库。 第二,我们不要用导粉启动了,只要在本地跑就行,你帮我把前后段工程都运行起来, ok, 所以 说大家也不要看 ai, 写了这么一堆代码,我又看不懂,怎么办呢?不要怕,你让他来帮你运行就可以了啊,就是这么简单, 咱们先把它运行起来,看看它写的效果怎么样。嗯,我认为它第一遍写出来一定是有 bug 的。 这里给大家解释一下我为什么要改成 circlelight 数据库,因为不管是 posgrid 还是 mycircle 之类的这种数据库软件,我们都是要先安装,然后才能去使用的。呃,就是比较麻烦一点嘛,当然也可以安装去使用一下。呃,而 circlelight 数据库它本本质上就是一个 呃文件,它用一个文件当成数据库去存取,你可以把它当成一个 excel, 就 它里面会有表,会有 会有行,然后呃,会有列,会有一一行一行的记录啊,就虽然它表面上看起来是一个呃数据库,但实际上你完全可以把它当成一个单独的文件,所以文件的话你也不需要设置什么登录用户名密码啊,也不需要去安装什么软件,用起来就会比较方便。 这个是非常适合我们在测试阶段使用的数据库 哦,他现在已经帮我把后端和前端都跑起来了,可以看到后端是在这里跑起来的,在八千端口展孔呢,他默认就是在八千端口跑的,然后前端是在 local host 五幺七三,然后我们打开看一下,嗯,他这里已经给我总结了,说他已经搞定了,对吧? 哎,这个特别好哎,它已经它不光给我把前后端跑起来,还告诉我默认账号是这样的一些用户名和密码。 ok 啊,我先把它所有都接受一下啊, 然后再打开这个网页,是吧?把这个网页给它拉过来, 大家可以看到,那这个这个 lucas host 五幺七三,就是刚刚 ai 帮我们写好的这些代码跑起来的一个效果。来看一下默认是不是它这边密码都已经铭文写在这里了,为了方便我去使用是吧? 嗯,然后登录看一下,找不到指定频距对应的用户,然后来 登录啊,登进去了更新一下。啊。哦,那这个是管理员的账号啊,这边的颜色好暗哦,那么这些细节等一会我们还是可以通过这个啊对话的形式让他来去进行修改系统配置。 这是要干啥呢?没太看明白。然后是用户管理,对吧?用户管理,我们要去新增一个医生,嗯,让医生去检查之类的。那这个页面转圈圈恐怕也不太对吧? the word restarted, 就是 我们的服务器又重新跑了一下,那就这个地方也有问题点,新增用户能点吗?新增用户,比如说是张医生密码,先给他写一二三四五六, 角色是医生、医师和管理员,然后起用。创建,这个好像也不太行,是吧?没有创建成功,然后取消一下,取消也取消不了,就是说还是有蛮多问题的。哦, 那这个很正常。这很正常, ai 启代码,呃,不太会一次性成功的。如果你用的是 cloud o plus 这个模型, cloud cloud o plus 四点五这个模型的话,它的一次性成功率很高,但我们现在用的是 gpt, 五点二,嗯,就不是, 不是太高。嗯,那我要怎么去跟他描述呢?让我想一想啊。我们有两种方式,第一种方式就是让他自己去检查里面有哪些 bug 啊,然后自己去修复,并且还要帮我把这些代码给梳理好,是吧?我看看啊,目前的后端代码其实写的还行。这是测试 啊,这是 app 啊,账户管理是吧?账户分析,然后,嗯,这是,嗯,感觉文件组织的还行,没有出现那种,嗯,所有代码糊在一起的那个情况,然后再看看前端 也 ok, 是 吧?不需要去进行大改,所以,嗯,所以怎么说呢,我们可以先让他先干起来啊。嗯, 再对照一下需求是吧?再对照一下需求文档,然后我们把那个,嗯叫啥,我们软件需求分析这个思维导图也给它传上去。 嗯,好,然后再把这个思维导图,这个拼音记这个图片也给它传上去。嗯,再对照一下需求,检查未实现未完成的功能,并且排查 bug, 还有什么要跟他说的吗?因为对话的次数也是很珍贵的嘛,都是好模型。嗯, 顺便也说一下前端的一些问题吧,就是前端左侧菜单没有,没有选中的 前端左侧菜单没有选中的菜单颜色太暗了,看不清,对吧?这是一个问题,然后 创建检查。 哦,还真的创建成功了。嗯,那其实这里面有很多的问题啊,比如说,比如说这个医生,医生是谁?其实应该啊,就是当前给他检查医生是谁就是谁,是吧?那这个是成功了,相当于用户管理还是不行,是吧? 然后退出登录,我们来退出登录,回不去啊?退出登录无法退出 用户管理界面,无法新增用户,并且始终在转圈圈。 嗯,然后是退出登录无法跳转到登录页。嗯嗯,然后我们来看一下 doctor 一 密码是这个, 嗯,这个只有检查管理,那么,嗯,比如说我新增了一个检查,那在我在哪里去创建去上传病人这个影像信息呢?对吧?那病人是要把这个 我,我是医生,要把病人的呃心脏超声检查的影像信息去上传,上传了之后再自动去标定,自动的出报告。嗯,所以我要问一下, 还有咱们系统的主要功能,就是医生在哪里上传患者的影像信息呢?嗯,以及影像信息上传了后,是否能够自动的分析出来我们需要的一些参数,并且生成报告呢? 是吧?还有哪些,还有哪些问题呢?检查编号,比如说我先创建一个检查,嗯,对吧?像这种检查医师他就应该自动带出来嘛。但是这些细节呢,肯定不可能通过这一个视频就给大家完全演示出来的,所以我先让他去改一改吧。 我靠, 哈哈哈哈。 啊,同学们,昨天我的这个录屏软件出了点问题,所以最后一小段没有录上,我今天再给大家把最后这一段补录一下,那么刚刚我们看到 ai 已经帮帮我把这些需求都基本上实现了,那我接下来呢,就给大家演示一下,因为我们提到了 我们所选的这个 g p t 五点二啊,今天正好又出了一个新的模型, g p t 五点二 codex, 就 专门用来写代码的模型,可能会比 g p t 五点二写的效果会更好一些啊,那我们今天要演示的不是用这种高级模型,而是用普通模型 啊,就是用 g p 五 mini 这样的话是可以免费使用的一个模型。那这个模型呢?它比较适合改一些小的需求,就是比如说你看我提到的这个需求,就是帮我把登录界面改成图片中的样式,那我我的提示词啊和这个上下文就是这样去添加的,就是选择我的这个登录页 这个设计稿,那么它就可以作为一个上下文发给 ai, ai 就 可以去读取这个图片里面内容,并且给我去按照这个设计稿来修改代码。那我们往下看啊,就是他现在已经帮我把登录页改成这个风格一致的深色大标题左右栏布局啊,我们一起来看一下运行效果。 那可以看到这个就是 ai 帮我们改好的一个首页的样式,我们对照一下, 我们对照一下发给 ai 的 这个设计稿,设计稿是长这个样子啊,可以对照一下这个设计稿和 ai 画出来的这个界面啊,还是有比较高的相似度的,对吧?那么也就是说啊,免费的模型其实也能够完成我们提的这些需求,那么具体哪一个模型更好用呢?大家可以自己去尝试一下。 右边的这个 logo 跟我们设计稿里面的 logo 长得不太一样,这个是因为我们没有提供相应的这个静态图片,所以 ai 只能给我们随便找一张图片放在这里,所以 logo 的 话是需要单独在啊,比如说我们的前端工程里面找一个目录去放相应的这些资源文件的。 最后我再给大家总结一下今天的视频的重点,首先我们学习了工具是如何安装和激活的,然后是熟悉一下整个界面的一个布局,知道各个区域的一个作用。 然后我们用 ai 写代码的核心就是跟 ai 的 沟通的技巧,包括你提示词怎么样去优化,包括你怎么样去赋相应的这个附件, 然后遇到 bug 呢?不要着急,可以让 ai 来帮我们排查。然后界面问题呢,也是可以通过传图或者是明确描述来让 ai 去调整的。比如说在这个例子里面,我们我们其实提到了啊,提到了登录进去之后左侧的那个, 我们提到左侧,左侧没有选中的颜色比较暗,看不清,那么就是通过提示词的方式让它来去呃对 ui 进行美化,那么也可以通过复图片的形式让它去进行美化 啊,那么这些技巧呢,不仅适用于咱们这个比赛,以后在做其他编程项目的时候其实也能够用得上,那大家可以跟着这个视频来实操一一遍, 那么 ai 就 在你的调教下,会变成一个非常好用并且听话的打工仔,来为你这个老板打工啊。如果你在使用的过程中有什么问题可以随时在群里面问我,那今天的教程就到这里了,祝大家备赛顺利,下次再见!

如何购买可以在 vs code 中使用的 cloud code、 gemini 这些大模型?上一期给大家介绍了如何在 vs code 中使用 clay 来加载 cloud code、 gemini 这些大模型,有些粉丝咨询有哪些靠谱的大模型接口,今天我就用这个视频来给大家介绍一下。 首先我们要做一个风险提示, cloud code 是 美国 isopec 公司的产品,那么这个产品 是对中国大陆地区禁止使用的。根据百分之五十的穿透规则,不仅是中国大陆地区,包括中资公司也全都被禁止使用 cloud 的 产品。呃,不仅包括直接购买的,还包括云中转的也被禁止,所以所有的云中转都有 随时被封号的风险,包括我下面要给你介绍的这些平台用呢,咱们还是得想办法用,毕竟人家的技术实力在那里摆着。提醒大家这么几个原则,第一呢是要少充,够用就行, 随时用,随时充。第二个是如果是学生的话,就暂时不要充了。我已经录了这个 copilot 学生认证的视频,呃,已经成功的通过了人工审核,如果通过了, 我会把学生真正的视频分享给大家,那里面应该也有 cloud code 和 gemini 三的大模型,大家不要着急等我的视频,微软的羊毛吧,咱不薅白不薅。 好,言归正传,咱们下面就回到如何充值这个实操上,我们还是打开 vs code 点, 点击左侧的 client 按钮。第一个给大家介绍的就是 client 的 官方,毕竟咱用 client 的 产品,他把人家放在第一位,介绍我,大家看一下啊,点一下右上角这个 account 按钮,这个就是我的个人中心,这个是我的当前余额,这是 client 赠送了我零点五美金的这个测试积分。下面呢就是我的使用记录,可以看到这里有日期,二六年一月七号十一点十一分上午 使用的模型是 cloudsonnet, 四点五,用了零点零二七六积分,这一点就可以证明 cloud code 的 大模型在 client 里是完全没问题,可以直接使用的。我们点击这个 add credits, 这个就是 client 账户页面,我们在这里看看如何充值,我们可以在这里充个五美元试试。在这里点击 dollar 五,然后 buy 五 credits, 这个呢就是购买积分的页面,我们可以看这个查看详情。这里五个积分的费用是人民币三十六块三毛七,这里是手续费四点三六人民币,合计一共是四十点七三人民币。在这里支付方式,你可以 写上你的邮箱,你的信用卡地址,这个应该是银联的图标,所以估计用国内的银行卡是可以付款的,大家可以试试,我就不付款了。在这里打上你的信用卡信息,年份,月份,还有你的 cvc 编码,在你的银行卡后面都有,然后你的这个 姓名,包括你的地址这些,然后你保存下回就不用再填这个表了,这里也要同意他的这个服务条款,这是付款页面,我不再给大家继续演示了, 我们再来介绍下一个,点击一下这个设置按钮,我们来看它这里推荐的都有哪些。第一个当然是它自己 client, 第二个 叫 open router, 这个也是一个非常重要的中转的服务商,我们现在没有它的 api k, 我 们来点这个 get open router api k 这个按钮,点击之后它就进入 open router 的 主页,我们在这里注册一个,在这里输入邮件,然后输入密码。 同意。好,需要验证我们是否是真人。好,这个提示就是验证邮箱,那我去邮箱看一下, 这个就是验证邮件的按钮,这些是提示,让你购买它的积分,不用管,我们点 create api k 看,有免费的,我们先免费的 create api k, 这里要给这个 k 起一个名字,方便你识别,我们就写 test k, 这里有过期时间,它设置一个小时到一年不等,这个是没有过期时间,永不过期,我们选这个就成。好点 create, 把这个 k 复制下来,一定要把它保存好,放到这里。 好,点击到,把这个关掉,这个 k 我 们就设置完了,你可以在这里可以点击这个积分 create, 点击这个 add create, 然后 update address, 需要一个账单地址, 填完地址之后呢,我们 update address, 然后提示我们 save payment mess。 这个是添加你的银行卡信息,这个是银联的标志, 你把你的支持银联的银行卡或者万事达或者 visa 的 都可以把它填在这里,你就可以使用你的银行卡来进行付款了。好,这是购买积分的流程,我建议大家第一次充值,先充值十美元,因为充值十美元之后,你就可以免费调用它的大模型, 每天都用一千次,这个足够我们用了啊。我们回到 vs code, 学会了如何填写 openroot 的 支付信息,购买了它的积分之后,我们就可以在这里选择这个大模型,这是免费的大模型。我们来看这里,我们要找 cloud, 往下找啊,它是按照时间排序的,这里就是 cloud opus, 四点五,这里就是 cloudsonnet, 四点五,看看需要的模型都在这里,然后是 germany, 上面是二,然后二点五,三,这里就是 germany 三 pro, 也就是说 cloud code 和 gemini 它是都支持的,选好这个模型就可以在 client 中使用了。接下来我们介绍第三个服务商,这个谷歌的 gemini 不 用看,我们访问不了。 openai compatible 上回已经给大家介绍了 astropica, 这个不用想,对大陆封禁。再这个就是亚马逊的 bedrock, 亚马逊是哪个级别的服务商我想大家都是知道的。呃,它的这个服务 是非常稳定的,被封号的几率应该相对比较小,我们看这里也有 anthropic, cloudsonet, 四四点五这里都有,可惜没有 gemini。 亚马逊的这个注册时间关系,我就不给大家注册了,如果大家需要在评论区给我留言,谢谢大家观看。

viscode 运行 c 语言第一步,安装 viscode 首先打开浏览器下载 viscode 安装包, 浏览器下载太慢了,启动迅雷来下载, 下载完成后点击安装。 第二步,安装 visco 的开发 c c 加加 插件,等待安装完成之后,双击运行 this code 开始安装插件 c c 加加扩展包和 colder runner。 第三步,安装 c c 加加编译器,灰道浏览器搜索开源平台上的编译器 前面的绿色下载按钮不要点,找到页面最下面的 e c 结尾的安装包, 点击下载。 下载完成后拷贝到指定的安装路径下解压, 然后设置环境变亮,将边目录加入到 pads 里面。 好了,这样就可以了。第四步, viscode 运行 c 程序,创建一个文件夹管理代码, 打开 miscode, 创建一个 c 语言的原文件 输入测试程序, 测试执行结果输出正常, 这样就没问题了。

呃,我刚刚下播,刚才在直播的时候,有人问我这个浏览器怎么在 vs 扣当中显示出来的?呃,这个特别的方便,我们在修改代码的时候,这块会同步的热更新能看到结果,我们就不用每次修改之后再切到浏览器里边了, 尤其是你在开发移动端的时候,开发 h 五的时候,是吧?这样的话呢就特别的方便。这个是怎么做的呢?我们需要安装一个插件, 安装一个插件,安装这个插件,我们安装完这个插件之后的话呢,就有这功能,我教你怎么来进行使用,安装好之后,在你的状态栏上会有个 wit 这个图标, 你呢就可以把它选择开启啊,现在我已经开启了。安装好之后啊,我们可以回到配置项当中,在配置项里边这块有个选项,就是当你 vs 扣的启动 的时候,他自动进行开启,那么,呃,我们启动 vi 扣,他会自动开启啊,然后的话我们可以点这个按钮上面这个, 这样的话呢就会把这个给他打开,那每次通过鼠标点击,以我个人来讲,因为我非常喜欢用键盘来进行操作,不太愿意用鼠标,所以呢我习惯于把它变成那个热键, 所以呢我们可以定一个热键啊,那在这一块我就定了这样一个热键 come on 的 r, 所以这个时候我把它比如说关掉了, ctrl w 关掉按 come on 的 r 之后呢,这个插件就能启动起来,非常的方便。 这插件里边呢有这样的一些功能,比如说这是调试的,就类似类似于我们的浏览器的调试,但是浏览器的一些插件在这里边是没有的啊,好,然后这一块的话呢,我们点击它可以让我们直接打开我们的浏览器显示这 页面在这一块,然后这块的话呢,我们可以刷新这一块的话呢,就是我们命令了啊,你可以选择变异啊,或者说停止这些服务啊,或者在浏览器浏览器当中打开都是可以。 当你运行的时候,偶尔他可能会出现问题,你可以选择重新启动一下这个服务就行了。那有了这个插件之后的话呢,我们修改起来就会非常的方便,为大家演示一下,比如说我们找到 这个没有主见在这里边我把这块给他加上什么呢?项军大叔啊,这是我保存的时候这块就会自动有这个内容了, 非常的舒服啊。在其次的话呢,我们也可以点击这个按钮,然后选择你的想象室,比如说在 i e 六 i 七 i 八,是吧?呃,进行这个设专有设备的一些调试。好,大家点个赞,我们分享结束,再见。

一入城门深似海,从此秀发看他人。大家好,我是鸟叔,上节课我们介绍雷士太妙的前世和今生啊,那么本次课程我们要学习一下 web 前端开发工具的安装以及使用。 让我们切入正题啊,学习工具的下载和安装啊,我们写 c java 的 时候用的是什么啊?维搜 studio 二零二二啊。那么 vs 和它是师出同门,都是微软的, 所以说呢,网上经常有一种声音啊,鸟叔本身很不认可,呃,为什么这么说呢?就是别人制作出这么好的 id 工具,免费给你用,你还天天在喷人家, 你摸着你的良心难道不会痛吗?虽然你没有是不是?所以说点击下载啊,在这里搜一下,然后再点击下载,它就会慢慢的下。 vs code 在 这里搜一下啊,进入它的官网,它的官网是 microsoft 的 啊,它都是微软开发的, vs code 是 免费的,那么 vs code 这个工具呢,在我们的这个前端界开发来讲的话,就是它要说第一二,那它就是第一, 对吧,它的使用频频率是非常高的,而且非常的智能。下来之后呢,让我们打开这个文件夹啊,找到它,找到完之后呢,下一步啊,双击双击无脑按就行了,非常的方便啊。同意 accept 有个 green, 然后点击下一步,下一步啊,这个开始里面不要桌面来一个,桌面再来一个啊,安装, please wait a moment。 等一下吧,但是它的安装很快啊,它非常的清零,它照我们的 vs 来讲,它非常的这个清,这个清亮化 就是最早的时候呢,其实 y s 它也拥有非常强悍的外部开发功能,但是呢,它相对来说怎么样在一个大的工具里面不不停地集成,它会变得更大,因为现在前端 最近十年的发展很迅猛,它已经变成了一个非常独立的学科和就业领域了,所以说前端里面的东西也会非常的多,这样的话呢,这个工具会变得非常的大。所以说呢,微软的战略就是将它们拆分开,做前端的专业用做前端的 vs code, 轻量级的,那么做我们后端开发就用什么微创流程,然后点击完成运行就 ok 了。 那么这个工具装完之后呢,它默认是英文的,但是我这里显示的是中文,因为什么呢?我装过插件啊, 这里面有个扩展 vs code 当中呢,它能够做很多的开发,什么 python 啊, c 语言 c 啊,加上都是可以做,但是它的主战场其实在前端领域是相当有建树的。 那么我们在做前端开发的时候呢,需要装很多的插件,那么装插件的时候呢,我们默认是什么呢?选择这个插件扩展,在这里搜索你想要的这个插件就 ok 了。他默认的这个菜单都是中文的啊,都是英文的,所以说呢,在这里我们需要装一个扩展,在这里搜一个 chinese 啊,在这里搜一个 chinese 中文的, 而这样的话呢,他就会提供一系列的这样的一个什么中文的一个插件,那么选中其中一个,或者选一个经常用的吧,对不对?上面的星牌的多,说明他的使用频率非常高,下面的可能用的少一点,或者是怎么样,他不太适用于我们现在的这个需求, 那么在这里点一下安装就 ok 了,点一下安装,然后现在我按完之后的话,你不想要了就卸载呗,对不对?所以他是非常的简单插件化的这么一个模式。然后第二个模式呢,其实我们还是要装一个 是我们想用的这个 html 的 这么一个提示工具,随笔工具。因为有了它之后呢,我们在写代码的时候,就相当于我们在那个 visual studio 当中写那个 c 叉吧,对吧?它是提示我们我们只需要输一个这个这个关键词的一个首字母,后面的信息都是可以提示我们的, 就是我们再装一个,这个是 time 这个这个提示工具,好吧,这是他的一些扩展啊,扩展就像常用的扩展,我们还是把它装起来,这样的话呢,更加方便我们的开发。然后接下来我们看一下我们的这个项目怎么创建,他的这个创建方式和我们用的那个 ys 不 太一样,我们 ys 直接右键新建,啪啪啪一顿创建,是吧? 他这个不太一样啊,因为网站是一个独立的工程,我们把网站搞完之后呢,我们需要怎么样 把这个站点上传到服务器里,所以说呢,我们是先需要去创建这个站点的,那么这个站点我们叫什么?叫 test, 在 这里一定要注意啊,我们这个文件夹的命名一定要是用英文的,用中文它不会报错,但是未来是什么呢?网站的这个开发结束之后,我们会把这个上传到我们的这个 server 服务器当中去, 那么这个时候中文和我们的服务器环境很可能会产生一个什么冲突啊,这是个小细节。那么创建好文件夹之后呢,我们在这里选择文件打开啊,打开文件夹, 打开文件夹,就是我们刚才建的那个文件夹啊 test, 然后选择这个文件夹, ok 了,那这样的话呢,我们这个文件夹就和我们的这个 vs code 进行一个什么关联了,我们在这里创建的所有的文件都会被创建到哪里啊?我们的那个文件夹当中, 我们选中这个项目,当前的这个项目点这个新加,新加这个加号,这个是新建文件,这个是什么新建文件夹?因为我一个大文件夹里面可能包含很多小的文件夹,什么图片呀?对不对?上传下载的文件啊,包括一些什么其他的这个附件都有可能的,当然在这里呢,我们去建一个 html 文件 创建,创建完之后呢,我这里叫一点伪醉,一定是 html 的 啊,喝特摩了, ok, 一个回车,那这样的话这个文件就有了,有了文件之后呢,我们回到我们文件夹里,看看这个文件有没有一点 h tm, 完全没有问题啊,关联上了,然后接下来我们开始写我们的 h tm 代码,怎么写呢?在这里我们选择 shift 加一,这是个小叹号, 当你打出这个英文的叹号的时候,它在上面做了一个提示,那么提示的时候我们选第一个按一下回车, ok, 写完了,大功告成了,这个就是我们的一个啥网页,那这个网页写完之后它怎么执行呢?我们知道 html 的 标签是吧?写完之后它是一个文本格式, 需要在我们浏览器当中怎么样解析渲染是吧?那么我们要把它放在我们浏览器里执行,那么这个执行的时候呢,我们可以回到这里来啊,双击一下点开,那这个时候这个网页它就会被在我们的浏览器当中执行了啊,默认 edg, edg 比较不错啊,非常的爽。 那里面为啥没内容?你没写东西,他为啥有内容呢?是不是?至少这样的话,他是可以被执行的啊?当然每次都这么点是不很辛苦的事情。当然了,所以在这里呢,我们可以通过右键右键看看有没有执行的东西,没有,为啥他默认没有提供我们这样执行的一个工具,是不是?那这太挫了呀, 别忘了那句话啊, vs code, 它是一个清亮级的工具,你如果希望用到什么东西的话。哎,怎么样?我们可以装插件啊,我们在这里装一个叫 open, 装一个清亮级的,其实有个叫 live server 的, 还是很好用的,它是一个热东西,这个键盘太不好了。 open 音搜索一下,来 open browser 啊,这个,这个是什么呢?将文件在浏览器里打开安装一下啊,信任不信任,你也不让我装, ok, 装完了啊,装完之后呢,右键看看有没有哎,有 open in default browser, 这个是你当前这个操作系统默认的浏览器,是吧?下面是在 other browser, 对 吧?比如说我要测一些兼容性,虽然说兼容性这个问题在近五年内得到了个极大的改善啊,当然你可以显著的去测一测,这都没问题,我们选第一个 open in default browser, 默认浏览器。 ok, 这样的话我们的这个网页就怎么样显示了啊?在这里写点东西看一看,来个一二三, ctrl s 保存一下,这个时候右键再去写一下 open into file browser, 你 看一二三显示出来了,这个就是我们做的,是吧?第一个网页啊,和 vs code 这个工具的一个简单使用, 接下来肯定有小伙伴不爽了,是吧?这么多的代码,我怎么知道哪个有用,哪个没用啊?我看不懂啊,看不懂不要紧啊,我们慢慢把它看一看啊,在这里我们给它解析一下。首先看第一个啊,这个叫声明标签, 它是什么呢? document type html, 这个声明是一个 html 五版本的典型声明,在上节课,我们讲了 html 来时的路,是吧?它的前世和今生。所以说呢,你要告诉浏览器,它有一个叫内置的解析引擎, 这个引擎会根据你 html 当中写的这些蛛丝马迹,这些标准怎么样来解析你对应的这个网页。如果你当前的这个网页希望浏览器按 h 五的标准去执行去解析,那么不好意思,你这一句话是必须要写的,而且要写到什么?我整个网页的最上方,虽然说这现在这句话你不用你写,但是我们要知道它是什么意思。 那么第二个呢, html 这个标签里面有一个属性,这个属性是个 l, 这个 e n 代表什么? english, 这说明什么呢?我当前的网页文档采用的是一个什么英文的一个格式,是不是?所以说这也是它的一个格式啊?格式。然后接下来有米塔,米塔, 米塔是什么呢?它叫原标签,什么叫原标签?原标签里面定了原数据。哎呦,这个东西听起来真的是 云里雾里的,那这个是在说什么意思呢?它原标签啊,它实际上里面就是定义数据的,相当于我们在做程序的时候写的那些变量,变量对应的是什么?对应的数值值,那么定义这些东西不好意思,不是给你用的, 它是给浏览器用的,告诉浏览器你在解析网页当中,你要按照数据当中的定义执行一个什么标准,那么当前的编码格式是什么? u t f 杠八,我们在第一季的课程当中 对编码进行了一个什么详细的讲解啊,那这个是 uido 的 版本的一个什么编码格式? utf 杠八,互联网格式啊,所以互联网编码呢,在我们做网页前端来讲那是必备的,所以说它的编码格式告诉这个浏览器了,要按 utf 杠八的格式进行一个什么编码和解码。 接下来呢,米塔下面有个叫 name build, 这是什么啊?仕途窗口啊,仕途窗口。那么这下面第二个属性是 content 的 内容有一个宽度,宽度是什么? divs 宽度,然后接下来后面有一个叫 ins 这个东西吧,它这个是在我们的这个代码当中可以看得到啊,默认它是都给我们带上的。我们刚才 vs 当中也有这个 东西啊, content 宽度是设备宽度,然后 ins 是 sky, 这个搞成一点零,这个是什么东西? 这个就是我们 h 五做设备适配非常非常重要的一个什么标签属性,他告诉浏览器是什么呢?就是当前的这个窗口,你要按照设备的窗口去给我解析。为什么这么说?我们在编辑是 type ml 的 时候,我们是在我们的 pc 端、电脑端去编辑呢? 这样的话呢,网页会变得比较大,和我们的这个手机端这个窗口的格式肯定不匹配啊,对不对?然后我希望什么呢?他可以在我们手机端进行一个匹配, 在我们的平板电脑里进行匹配。所以说呢,他要求网页按照什么呢?你设备的宽度进行一个什么匹配?这是第一点声明。第二个呢,它采用的是一个一点零啊,后面是一个参数, 但是强制要求什么呢?在这个宽度里,你不要给我缩放,要按照原始大小就 ok 了。在 h 四版本当中,他对我们的这个网页的这个兼容性, 包括我们在多设备之间的这个共享,实际上是非常糟糕的。为什么这么说呢?因为比如说在我们在电脑端做了一个很大的网页,放到手机端,它的窗口就那么小,对不对?那怎么办?那只能缩放,然后加滚动条,所以这种浏览起来是非常痛苦的。 也是我提供了这种模式啊,来帮助我们解决类似的问题。做到一个什么呢?就是做出来的网站网页是一个什么呢?响应式的操作,好吧。然后接下来是一个抬头的属性,里面可以写一个值,当前的值默认是什么? document 文档的意思。那这是什么意思?我们思考一个问题啊, 我们一个网站里面会包含很多的页面,是不是?那这些页面呢?都会在我们浏览器当中打开,而现在浏览器的模式是什么呢?是多页签的模式, 是不是我通过一个浏览器可以打开好多的网页,对吧?但是呢,这个网页之间我要做个切换,一会看看这个,一会看看这个,然后一会看看这个,对不对?那我们怎么知道我要看的是哪个呢? 这个时候就需要脸了,这个代表网页的那个脸,是吧?他长的那个脸去通过面部去识别,那么这个他会呈现在我们这个浏览器的标签里去,是吧?所以这是一个非常重要的属性。好吧,接下来我们来去看一下,改改我们的代码吧, 我的大脸 保存,然后右键执行一下 open in default browser, 或者刷新一下,在浏览器刷新一下就 ok。 啊,这个时候你发现一个问题啊,发现这个小小的问题 写完之后呢,看没看到你当前的这个抬头就放在这了,所以说呢,这个会被呈现在我浏览器的页面当中,放到这我就知道当前可以切换到什么哪一个网页了,好吧。然后呢,刚才做了一个小小的操作啊,就是我们在我们的这个 body 里去写内容,写完内容之后呢,哎,我的 first my first, 呵,特么了配置,哎,我们只要在这里写完内容之后呢,我们去刷新我们的浏览器,哎,让它重新渲染一遍, 让他重新渲染一遍, f 五, f 五, f 五刷新一遍,你看他就是一个什么呢?最新的一个值了,最新一个值了。这个时候呢,实际上发现这两个节点之间是有故事的, 那么外面这个节点,这个是一个声明的节点,这个 html 呢?它是里面是一个包含的节点,说明当当前我写的是什么 html 代码,是不是 hand 翻译成我们的英文是头头中定义的部分,除了脸被显示,你的这个思想和数据,这个是隐藏的,它和用户无关,它是和浏览器,搜索引擎有关系, 明白了吗?所以说你脑子里想什么东西,那不好意思,没有人知道,除了你自己,但是你长什么样子,你只要出门上街,大家都知道。所以 hand 头部定义的是一张脸,还有什么呢?它思想类的信息,好吧,隐藏类的信息,那么你这个 body, 它显示的这个信息是什么意思啊?就是用户可以看得到吗?它不仅看得到,还能怎么样?摸得着?如果说你希望写一些信息,做一些样式,对吧?让用户可以看得到,那你一定要往 body 里写,如果你希望定一些信息,哎,那你就写到 head 里边是不是?所以这个就是我们 html 网页结构的一个什么基本的组成。 好了,小伙伴们,通过今天的课程,我们学习了 web 前端开发工具 vs code 的 安装和使用啊,还有我们 html 的 结构的解析。那么本次课程到此结束,感谢您的观看,让我们下期再会。

上一节课我们认识了 c e 加加的基本架构,这节课我们学习安装 c e 加加软件 vs code。 首先在控制面板中打开更改适配器选项,右键网络选择属性,打开 i、 p、 v 四选项,把 d、 n、 s 改为我这样 重启一下网络, 打开微软商店, 搜索 vs code, 点击 community 版本安装, 往下翻,找到 c 家家桌面开发,这是主要安装的 旁边的组建自行选择 c 加加组建中 msvc 要勾选这是翻译器, 安装完成后记得重启 a few moments later, 在 开始菜单里找到 vs code, 有 微软账户的同学可以先登录我这里,直接跳过这些个性化功能。自定义 点,创建新项目,新建空项目,这些自行调整 右键,点击右侧栏里的原文件, 选择,添加新文件 名称自你 把上节课的代码复制过来,注意头文件要改成 iso, 看见这个黑色的框就代表翻译成功了。 接下来我们学习怎样使用万能头文件,先准备这个点 h 文件 夹,把这个文件拖到框里, 打开 visual studio, 把头文件改成 s t d c 加加 h, 注意把监扩号改成双引号, 运行一下,如果没有报错就改成功了。 那我们这节课就到这,下节课我们学习变量注视输入的使用,下课。

这期视频跟大家聊一下怎么更好的使用 vs code 啊?主要分三块吧,第一块是优化文件数, 我不知道你们有没有这种感受,就它这个缩进 vs code 默认的缩进不是很清晰,比如说这个 app 点 css 就 有的时候你可能觉得它是在 tab 四的目录下,也有可能在 s r c 的 目录下 啊,就有时候容易看走眼,然后这几个配置项就是解决这个问题。 vsco 的 默认缩进像素是八像素,给给它改成十五像素 啊,这样的话就会更明显一些。然后第二的话,它这个默认是你鼠标悬浮的时候才给你这个辅助线,然后给它改成 always, 永远显示,这样的话能减少你误判的这个概率。第三个就是它这个线可能不是很清晰,你可以给它设置一个颜色 啊,是这种荧光绿,这样的话,比如说我的 icons, 然后这荧光绿在 tab 这,你就一下就知道它在哪了,比如这 a p p 点 c s s, 这荧光绿在 s r c 下,你就知道它的目录归属了。这是第一个这个 j 三目录怎么打开这个 j 三目录?其实就是 你打开这个啊, open user settings 就是, 我是 mac 啊,就是 command 加 shift 加 p 就 打开这个,如果你是 windows, 你 上网查一下应该都差不多,然后就可以打开这个,然后你在里面输入 open user settings, 就打开这个这次了。第二个推荐的是一个字体,叫菲拉蔻的,这个字体是干什么的呢?就是比如说我们写 gs 啊, gs 他 他有三等号对吧?但如果你写三个等号看着就不太好看,但是他这字体就会把你这种三等号给 给变成这种三个竖线啊,三个横线,还有像你箭头函数,对吧?它直接把你连成了一个箭头,而不是啊拆分成两部分,还有像,呃,不等于 更符合啊我们的实际直觉。然后它在 github 上啊, star 也很多是一个开源项目,它也有中文文档, 我们点进中文文档你会发现像如何安装 mac、 怎么安装 linux, 怎么安装 windows、 怎么安装字体啊?安装完之后呢?你怎么在你编辑器中使用?包括这个 webstorm, 还有 vs code 都有非常详细的说明。 第三个想分享的是可以通过设置主题来获得更好看的这个使用体验。一个主题叫 one dark pro, 然后还有一个深色的主题叫这个德古拉 啊,这个吸血鬼主题也很好看。还有跟那个 github 网站的设计比较相近,有 github 主题,然后还有一些图标主题,就是让你的图标更好看。