和chatgpt学架构02-环境搭建

news2025/1/11 22:43:16

目录

  • 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.coloradmin.cn/o/770305.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kubernetes集群故障排查—审计

Kubernetes 审计(Auditing) 功能提供了与安全相关的、按时间顺序排列的记录集, 记录每个用户、使用 Kubernetes API 的应用以及控制面自身引发的活动。 审计功能使得集群管理员能够回答以下问题: 发生了什么?什么时候…

跨文化合作:如何解决海外网红营销中的文化差异?

随着社交媒体的快速发展,海外网红营销已成为许多品牌和企业获取国际市场的有效方式。然而,由于不同国家和地区存在着独特的文化差异,如语言、价值观、习俗等,这也给品牌进行海外网红营销带来了一系列挑战。本文Nox聚星将和大家探讨…

linux主机上面使用kubectl连接 Kubernetes 集群

**kubectl连接Kubernetes集群,应用场景在一台linux主机上面可以使用kubectl命令查看k8s集群信息。 1、首先需要在linux或者debain上安装kubectl命令。 官网安装地址:https://kubernetes.io/zh-cn/docs/tasks/tools/install-kubectl-linux/#install-kubec…

什么是70v转12v芯片?

问:什么是70v转12v芯片? 答:70v转12v芯片是一种电子器件,其功能是将输入电压范围在9v至100v之间的电源转换为稳定的12v输出电压。这种芯片通常被用于充电器、车载电池充电器和电源适配器等设备中。 问:这种芯片的最大…

回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于ELM-Adaboost极限学习机结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于ELM-Adaboost极限学…

Flink-端到端精确一次(End-To-End Exactly-Once)

1.总结 目的:想要在故障恢复后不丢数据 输入端 保证可以重复发送数据如果是kafka,Flink负责维护offset,不用kafka维护设置kafka的隔离级别为:读已提交flink 开启检查点采用对齐或者不对齐的精确一次输出端 kafka 幂等事务两阶段…

让你不再疑惑加水印用什么软件

每个人都有自己的独特创意和作品,而在现今互联网时代,分享和传播作品已成为一种普遍现象。然而,随着互联网的发展,越来越多的作品被人恶意盗用和复制,使得原创作者的权益受到了侵害。为了保护自己的作品,加…

每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户

文章目录 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户每日语录第26题 中级题: 活跃时长的均值1. 需求列表思路分析 答案获取加技术群讨论附表文末SQL小技巧 后记 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户 大家好,我是Maynor。…

Vue中的事件处理

一,基本使用 1.使用v-on:事件名或者事件名绑定事件 常见的事件有: onclick, 鼠标单击事件; ondblclick, 鼠标双击事件;onmousedown,鼠标按下去的事件;onmouseup,鼠标弹起事件; onmouseover,onmouseente…

mybatis-plus逻辑删除与唯一约束冲突问题

问题描述: 在使用mybatis-plus进行数据库的增删查改的时候,我们一般都会设置用户名为唯一索引(为什么?因为用户名肯定不能重复) 当第一次新增用户时,会在数据库插入一条用户数据:能插入成功代…

计算机科学与技术专业课程内容汇总

大学课程结束了,真的好快。昨天把专业课程涉及到的内容汇总了下,还是挺多的,存到网盘里也不会丢,电脑存储空间还能扩大。 把网盘链接放在这里,希望大家共勉。图片中所涉内容仅为部分课程。 链接:https://…

Jmeter测试 Websocket服务器

目录 一、Jmeter 安装1.1 自定义 JMeter 的 JVM 设置 二、WebSocket插件安装三、环境准备3.1 连接数限制修改 四、测试4.1 脚本构建4.1.1 连接请求4.1.2 心跳4.1.3 WebSocket request-response Sampler4.1.4 WebSocket Single Write Sampler4.1.5 WebSocket Single Read Sample…

Mac配置CMake

目录 写在前面命令行安装安装包安装准备配置 参考完 写在前面 1、本文内容 Mac上配置CMake 2、平台 Mac 3、转载请注明出处: https://blog.csdn.net/qq_41102371/article/details/131807995 命令行安装 通过brew安装,先安装brew https://blog.csdn.n…

Sourcetree 同时推送两个仓库

Sourcetree 同时推送两个仓库 添加远端仓库添加完成推送推送完成git 命令版 添加远端仓库 注意名称不能相同 ,自己取个名子区分一下,别把自己搞懵就行了。 添加完成 推送 选择仓库。选择目标分支。并勾选跟踪。推送。 推送完成 推送完成后,…

应用案例|探索高精度3D机器视觉在车间滑橇检测与测量中的应用

Part.1 应用行业 随着科技的不断进步,3D机器视觉技术逐渐成为了现实世界与数字世界之间的桥梁。3D机器视觉技术能使计算机感知和理解三维空间重的物体和场景,被广泛应用于机器人引导、工业检测等行业,例如:物流、电商、教育、医疗…

开发 SpringBoot 项目所用版本的选择

一、为什么要关注 springboot 的版本? 最开始做项目时候,组长说创建一个 springboot 2.5.4 的项目,mysql使用 5.6.X ,maven使用是3.6.X。其实最开始我也没有多想,直接照做了,但是后面回想自己平时看到的SpringBoot开源…

【Win10系统下载Python3】

Python3官网:https://www.python.org/downloads/windows/ 注

谷歌Bard:ChatGPT之外的第三选择

2023年年初,为了对应ChatGPT方面的压力,谷歌Bard仓促上线,此后便进入了低调前行。目前为止已经迭代了9个版本,也就是在近期的版本更新中支持了中文(简体/繁体)语言,对国内用户可以说又友好了一步…

pytest入门介绍

目录 1、pytest是一个非常成熟的全功能的Python测试框架。 2、pytest安装 3、要求 4、运行 5、生成html报告 6、常见问题 1、pytest是一个非常成熟的全功能的Python测试框架。 主要有以下几个特点: 简单灵活,容易上手 支持参数化 能够支持简单的…

孩子没有身份证如何坐火车

既然写这个话题就有必要搞清楚,儿童多大是免票的。(儿童票怎么买,我们在买票的时候点击选择乘车人,左侧是添加乘车人右侧是添加随行儿童) 如果你有12306app 点击app -> 点击我的 -> 点击使用须知 -> 点击常见问题 上面的有效证件…