和chatgpt学架构02-环境搭建

目录

  • 1 安装vs code
  • 2 vs code功能介绍
  • 3 安装nodejs
  • 4 安装vue
  • 5 在vs code打开工程
  • 总结

我们在上一篇 技术选型 里咨询了chatgpt前后端的框架选择和数据库的选择。有了框架之后就需要选择合适的开发工具了,继续咨询一下chatgpt

我现在选型,前端使用vue,后端使用nodejs,数据库使用mysql,需要搭建开发环境,用什么开发工具比较合适

以下是一些常用的开发工具供您选择:

  1. Visual Studio Code(VS Code):这是一款轻量级且功能强大的代码编辑器,支持大量的插件和扩展,适用于前端和后端开发。
  2. WebStorm:这是一款由JetBrains开发的专业Web开发IDE,提供了丰富的功能和工具,适用于前端和后端开发。
  3. Sublime Text:这是一款简洁高效的代码编辑器,支持大量的插件和自定义功能,适用于前端和后端开发。
  4. Atom:这是一款由GitHub开发的开源代码编辑器,具有可扩展性和自定义性,适用于前端和后端开发。

四款工具可用根据个人喜好,都下载安装一下,这里我们选择vs code来建立开发环境

1 安装vs code

下载地址:

https://code.visualstudio.com/

在这里插入图片描述
打开网站点击download,下载安装即可

2 vs code功能介绍

在这里插入图片描述

vs code的界面一共分为五个区域,顶部导航我们最常用的是file菜单,可以打开我们电脑里的工程目录,点击Open folder就可以打开我们本地的文件夹
在这里插入图片描述
有的同学可能要问要不要汉化,我个人建议是不要,既然你准备写代码,本身就是使用英文的环境编程,汉化的意义是不太大的。

第二部分是侧边栏导航,我们经常使用的是插件安装,因为编辑器默认这些高亮呀,自动补全呀都是需要使用插件的。点击插件的图标
在这里插入图片描述
在搜索框输入你需要的插件名称就可以

第三部分是我们的文件导航,在这里可以创建、修改文件,也可以建立文件夹
在这里插入图片描述
第四部分就是我们代码的编辑区了,日常我们的创作就是在这里完成的。其实目前的前端开发也基本都是组件化开发了,使用现成的UI框架会提效不少
在这里插入图片描述
最后一部分就是命令行窗口,类似于windows的cmd,可以在这里运行命令。
在这里插入图片描述
有时候我们需要打开多个命令行窗口,在顶部的菜单导航选择Terminal,选择第一个子菜单就可以
在这里插入图片描述

3 安装nodejs

因为本次我们是以javascript作为开发语言,前后端编程的时候需要引入第三方的库,javascript是通过npm来管理包的,需要先安装好Nodejs

https://nodejs.org/en

在这里插入图片描述
下载后按照指引进行安装即可,如何验证nodejs配置成功了呢?打开windows的cmd,可以按快捷键win+R
在这里插入图片描述
在cmd里分别输入

node -v
npm -v

在这里插入图片描述
如果可以正常显示出版本号就表示我们的安装成功了

4 安装vue

vue的话目前已经是3.0版本了,2.0版本到今年年底就停止维护了,因为是自己用所以使用新版本就可以,安装的时候可以使用脚手架搭建

先在你的磁盘里建一个vue的目录,然后进入vue目录,在地址栏里输入cmd

在这里插入图片描述
这样就在当前目录打开了cmd
在这里插入图片描述
在cmd里安装vue-cli,输入如下命令

npm install -g @vue/cli

在这里插入图片描述
接着创建我们的工程,输入如下命令

vue create my-vue-project

在这里插入图片描述
选择vue3版本
在这里插入图片描述
安装好之后 输入

cd my-vue-project

进入到工程的根目录,如何输入

npm run serve

在这里插入图片描述
这样就启动了工程,在地址栏里输入http://localhost:8080/可以看到我们的工程
在这里插入图片描述

5 在vs code打开工程

打开vs code 点击file->open folder,选择我们的工程的根目录打开
在这里插入图片描述
在这里插入图片描述
然后点击terminal打开一个命令行窗口,可以在这里输入启动命令
在这里插入图片描述

总结

本篇我们介绍了环境的搭建,做开发第一步就是要搭建开发环境,选择合适的工具无疑可以提高开发效率。我们介绍了nodejs、vscode、vue的搭建过程,有了这些材料我们就可以按照自己的想法架构软件了,还没有动手开发的同学赶紧照着做一遍吧,马上你也可以拥有自己的软件啦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/19850.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

〖编程初学者的自我修养 - 职业规划篇①〗- 大学生选择职业前的自我认知与剖析

历时18个月,采访 850 得到的需求。 不管你是在校大学生、研究生、还是在职的小伙伴,该专栏有你想要的职业规划、简历、面试的答案。说明:该文属于 编程初学者的自我修养 专栏,购买任意白宝书体系化专栏可加入易编程社区&#xff0…

谷歌Bard被曝剽窃ChatGPT?BERT一作跳槽OpenAI,揭惊天内幕

【导读】谷歌有大麻烦了!外媒爆料说,Bard的训练数据部分来自ChatGPT。谷歌可能跳到黄河里也洗不清了。 3月29日,外媒The Information曝出了一个惊天大瓜! 谷歌的离职员工、已跳槽OpenAI的顶级研究员竟然曝出——Bard竟是用ChatG…

人工智能AIGC最新综述:从 GAN 到 ChatGPT 的AI生成历史

一句话总结 本综述全面回顾了生成模型的历史、基本模型组件、AIGC从单模态交互和多模态交互的最新进展,以及模态之间的交叉应用,最后讨论了AIGC中存在的开放问题和未来挑战。 摘要 最近,ChatGPT 与 DALL-E-2 和 Codex 一起受到了社会的广泛关…

ChatGPT is not all you need,一文综述6大公司9类生成式AI模型

关注并星标 从此不迷路 计算机视觉研究院 公众号ID|ComputerVisionGzq 学习群|扫码在主页获取加入方式 计算机视觉研究院专栏 作者:Edison_G 生成模型领域里,ChatGPT 并不是一切。 转自《机器之心》 过去两年,AI 领域里…

chatgpt赋能python:Python最简单的小游戏:猜数

Python 最简单的小游戏:猜数 作为一门高效、简单而且易于学习的编程语言,Python 受到了越来越多的开发者的喜爱。其中,编写小游戏是Python语言学习中一个很有趣的领域,因为它可以帮助你通过实践加深对Python语法和概念的理解。在…

chatgpt赋能Python-python3小游戏

Python3小游戏:为你的休闲时光增添乐趣 如果你正处于寻找一款简单好玩的小游戏,那么Python3小游戏将是你的不二之选。作为一名有10年Python编程经验的工程师,我可以说Python3小游戏是一款非常有趣、挑战性适中、易于上手的游戏。接下来&…

Github推荐--PC版微信/QQ/TIM防撤回补丁(我已经看到了,撤回也没用了)

逛Github的时候会遇到一些很好玩的项目 今天分享一个可以在PC端实现QQ防撤回功能的项目。(安卓手机有Xposed框架) 首先是项目地址: 我已经看到了,撤回也没用了 使用方法: 下载后解压,会出现RevokeMsgPatche…

微信防撤回功能修改

今天无意之中看到了一个帖子,谈到了有关微信消息撤回的。突发奇想实现一下,以后就不怕错过朋友的消息了。 首先介绍一下基本思路,由于微信采用的是CS端原理,所有的数据请求均通过服务器,客户端只是响应指令而已。 A向…

Git 如何撤回已经push到远端上的代码

首先 git log,目的是找到这次想要撤回的提交的上一次提交,并记录下红框中的commit id 回退代码,输入 git reset --soft commit id 回退代码, 回退完成后代码相当于刚写完的状态,即还没有进行add、commit、push…

微信多开防撤回工具再也不用担心好友撤回消息和登录多个账号了

微信,大家工作中生活中用的最多的一款应用;很多公司喜欢用微信来作为工作沟通的工具,官方原版只支持登陆一个微信,这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便。另外有的时候别人撤回了一些重要消息&#xf…

Python神级操作,还原已撤回的微信消息

项目环境 语言:Python3 编辑器:Pycharm 导包效果展示 以下截图显示的撤回消息类型依次是文字消息、微信自带表情、图片、语音、定位地图、名片、公众号文章、音乐、视频。有群里撤回的,也有个人号撤回的。 图文来源:http://kk…

利用Python查看微信好友撤回的消息

效果图如下: 不仅可以查看微信好友撤回的文字消息,如位置、视频、音频、图片等等都可以查看。 直接上源代码: # Python查看微信撤回消息 import re import os import time import itchat import platform from itchat.content import TEXT …

用Python实现微信撤回消息还原

在使用微信过程中,有时候我们会撤回一些发错或者不该发的一些信息,今天我就用一段代码实现将撤回的消息还原。。。 从此再也不怕别人撤回消息,自己不能看的尴尬了 import osimport reimport shutilimport timeimport itchatfrom itchat.con…

python学习 -对象把微信消息撤回后好慌,有了这个你就能看到撤回的消息了(超详解)

目录​​​​​​​ 一.简介 普通人 python技术人员 1、准备环境 2、itchat介绍 3、itchat使用 4、pycharm解释器写入代码 一.简介 当我们与朋友,亲人,爱人聊天的时候,我估计每个人都经理过,那就是微信撤回功能中所提到的…

微信能自定义“撤回消息”? QQ 笑了!

大家有没有遇到过和小伙伴聊天,结果输入法突然崛起,等到你撤回的时候尴尬到不行的窘境? 没办法,只好撤回...(咳咳,只能说我的输入法已经妖魔化了 但是小伙伴的?号已经紧随其后,要是…

Telegram防撤回工具(Windows)

使用方法 Telegram v2.8.5 及之后版本 使用最新版本补丁将 TAR-Resources文件夹 、TAR-Launcher-x64.exe 、TAR-Launcher-x86.exe 全部解压到Telegram根目录 通过 TAR-Launcher-x64.exe 或 TAR-Launcher-x86.exe(取决于你安装的Telegram版本,如果不知道…

用python实现监听微信撤回消息

import itchat from itchat.content import * import os import time import xml.dom.minidom temp d:/itchat / 撤回的消息 if not os.path.exists(temp):os.mkdir(temp)itchat.auto_login(True) dict {} itchat.msg_register([TEXT, PICTURE, FRIENDS, CARD, MAP, …

Git回退已经提交commit的(还未推送push的)代码及撤回代码回退

1.Git回退已经提交的代码 原文链接(原文写的是已经推送push的代码) http://t.csdn.cn/CDjgq 已经开始难过了,我提交后没有推送就按照上文提示进行了代码回退,结果idea里面没得我最后一次提交的代码。。。然后我开始了第二轮操作…

用Python找回微信撤回信息,(来自程序员的小骄傲)就算你撤回我也看的到~

微信(WeChat) 是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,由张小龙所带领的腾讯广州研发中心产品团队打造 。在互联网飞速发展的下、民众的需求下,微信已经更新到2.6.2.31版本,全民…

微信PC版防撤回

人总是有好奇心的,好友发了微信消息,然后撤回了,就很想知道,但是又不好意思问。。。。 万一是女神表白呢?哈哈~~~~ 网上也有很多教程。这里仅为记录一下。用别人放网上的又感觉不安全。。遂自己折腾一下。。 好了言…