和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的搭建过程,有了这些材料我们就可以按照自己的想法架构软件了,还没有动手开发的同学赶紧照着做一遍吧,马上你也可以拥有自己的软件啦。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mac 谷歌浏览器选中查看悬浮出现的元素样式

Mac 谷歌浏览选中查看悬浮出现的元素样式 1. Mac 暂停脚本执行快捷键 command \或F8 2.以斗鱼主站下载悬浮面板为例 3. 操作步骤 (1)打开控制台,选中源代码 (2)鼠标选中下载,让面板悬浮出来 &#xf…

【GitOps系列】K8s极简实战

文章目录 示例应用介绍部署应用到k8s 如何使用命名空间隔离团队及应用环境?如何为业务选择最适合的工作负载类型?如何解决服务发现问题?如何迁移应用配置?如何将集群的业务服务暴露外网访问?如何保障业务资源需求和自动…

Selenium自动化之弹窗处理

1.前言 我们在使用Selenium做Web自动化测试时,页面经常出现弹窗,如果不处理后续的测试脚本就无法正常运行,今天我们就带大家一起来学习如何处理Web页面上的弹窗。 2.Web页面弹窗的分类 弹窗通常有3种:Alert类型弹框、Confirm类…

【文生图系列】stable diffusion webui 汉化(双语)教程

文章目录 安装双语插件下载json源文件设置双语 这篇博文记录于我成功安装双语插件之后,所以以下的示例页面均是双语。汉化教程分为三步,安装插件,JSON源文件下载和最后一步的双语设置。 安装双语插件 在扩展(extensions&#xf…

【已解决】idea使用debug启动一直卡着不动

debug启动时一直卡着不动出现下图提示,但是正常启动又可以启动 翻译结果是:方法断点可能会大大降低调试速度。很明显,有断点的位置没加对或者误加断点了,以下是解决方法。 打开 .idea文件夹,找到workspace.xml文件 找…

引入Vue的方式

1.cdn引入 <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

配置需求分类中的科目分配

其中科目分配的内容都为灰色无法修改 结果是在科目分配里面单独维护的&#xff1a; 路径&#xff1a;销售分销-基本功能-科目分配/成本-维护成本科目分配的需求类别

【Ceph集群应用】Ceph对象存储系统之RGW接口详解

Ceph对象存储系统之RGW接口详解 1.创建Ceph对象存储系统RGW接口2. 开启httphttps,更改监听端口3. 更改监听端口4.S3接口访问测试5.实验中遇到的故障案例 接上文基于ceph-deploy部署Ceph集群详解 1.创建Ceph对象存储系统RGW接口 &#xff08;1&#xff09;对象存储概念 对象存…

广州市番禺区委领导一行莅临和鲸科技考察交流

7月18日下午&#xff0c;广州市番禺区区委常委、组织部部长、人才工作局局长唐力明&#xff0c;组织部副部长、两新工委书记罗翌洁及组织部其他相关领导一行莅临和鲸科技开展实地考察与调研&#xff0c;国投科创广州基地负责人、海创人才南方创业服务中心常务副秘书长徐斌&…

详解C#开发Android应用程序的流程

Android系统一下子铺天盖地而来&#xff0c;让人目不暇接。兴奋的同时也让部分开发人员犯难了&#xff01;要知道从熟知的Wince、Mobile开发语言C#跨越到RFID-Android的Java。可不是一朝一夕就能完成的。就好比你的乾坤大挪移已经第七层了&#xff0c;却忽然要你从易筋经从头练…

Beyond Compare 代码比较工具

一、下载 官网下载地址&#xff1a; https://www.scootersoftware.com/download.php 选择 Windows 系统&#xff0c;简体中文版本&#xff0c;点击下载。 下载完成 二、安装 步骤1&#xff1a;双击安装包 步骤2&#xff1a;进入安装向导&#xff0c;点击下一步 步骤3&a…

微信小程序事件点击跳转页面的五种方法

第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 <navigator url"/pages/main/main"></navigator>第二种:wx.navigateTo({})方法 1.前端wxml <button bindtap"getCeshi" type"primary"> 测试按钮 </button>…

php连接上mysql数据库该的配置方法

用mysql官方的管理工具workbench&#xff1a; 打开导出界面后&#xff0c;下一步&#xff0c;选择csv格式&#xff0c;导出后excel就能打开了 如果你需要在程序代码中导出&#xff0c;需要找到对应代码的excel处理库。 如php 的 phpExcel( 最新版已更名为 phpoffice/phpspread…

思维决定发展,测试人也不例外

最近特别懒&#xff0c;不想码字&#xff0c;原本写作就很差&#xff0c;更是退化严重。社招和校招面试过很多人&#xff0c;从十年前自己还很弱的时候学着面试&#xff0c;到数百次面试积累之后&#xff0c;面对候选人的时候&#xff0c;我的内心依然有些许紧张&#xff0c;非…

域内信息收集

将网络中多台计算机逻辑上组织到一起进行集中管理&#xff0c;这种区别于工作组的逻辑环境叫 做域。域是由域控制器(Domain Controller)和成员计算机组成&#xff0c;域控制器就是安装了活动 目录(Active Directory)的计算机。活动目录提供了存储网络上对象信息并使用网络使用该…

132、仿真-基于51单片机主从串口通信家用防盗报警器设计(程序+Proteus仿真+流程图等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、设计功能 二、Proteus仿真图​编辑 三、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&#xff1…

C++模拟实现位图和布隆过滤器(哈希)

目录 前言引入&#xff1a; 一、位图 1.1 位图概念 1.2 位图的实现 1.3 位图的应用 二、布隆过滤器 2.1 哈希的弊端 2.2 布隆过滤器概念 2.3 布隆过滤器的插入 2.4 布隆过滤器的查找 2.5 布隆过滤器的删除 2.6 布隆过滤器的模拟实现 2.7 布隆过滤器优缺点 三、…

那些漏洞挖掘高手都是怎么挖漏洞的?

前言 说到安全就不能不说漏洞&#xff0c;而说到漏洞就不可避免地会说到三座大山&#xff1a; 漏洞分析 漏洞利用 漏洞挖掘 从个人的感觉上来看&#xff0c;这三者尽管通常水乳交融、相互依赖&#xff0c;但难度是不尽相同的。本文就这三者分别谈谈自己的经验和想法。 漏洞分析…

Spring、SpringBoot、SpringCloud、SpringCloud Alibaba、Elasticsearch版本对应,附下载地址

1、GitHub Alibaba 发布SpringCloud Alibaba和SpringCloud 、SpringBoot版本 Spring Cloud Alibaba VersionSpring Cloud VersionSpring Boot2022.0.0.0-RC2Spring Cloud 2022.0.03.02022.0.0.0-RC1Spring Cloud 2022.0.03.0.02021.0.5.0*Spring Cloud 2021.0.52.6.132021.0.4…

中国人民大学与加拿大女王大学金融硕士--中外合作办学硕士领域的宝藏项目

大多数读研人都知道&#xff0c;从办学方式来看&#xff0c;中外合作办学硕士可以分为两种&#xff1a; 一是双学位教育项目&#xff0c;颁发的是外方高校硕士学位证书&#xff0c;同时还可以申请国内高校的硕士学位证书&#xff0c;同时教育部中留服还可以做学历学位认证。 二…