Web前端VScode/Vue3/git/nvm/node开发环境安装

目录

1 基本配置

2 安装vscode

3 安装vue

4 配置bash

5 安装nvm

6 安装node

7 安装yarn

8 新建项目

9 运行helloworld


1 基本配置

本篇是为了做前端开发的环境而写。使用的操作系统是windows 10 64位

2 安装vscode

现在做vue和node基本就是vscode和webstorm,本篇就是用vscode。

可以从主页直接下载

选择windows版本下载即可。

下载速度还是可以的,如果下不下来,可以看本篇的附件资源。

下载后就是一顿默认安装,只有文件关联那里不要勾选,因为平时也不用vscode默认浏览。

安装好直接打开,我们从vscode里下载vue相关组件。

3 安装vue

打开vscode后,点击插件,搜索vue volar 会找到一堆插件,选择vue volar extension package 目前版本是1.1.8

直接点击install就可以,这里下载速度有点慢,需要等1-3分钟。下载好后是这样的

这样就算是安装好了,接下来安装git,使用git主要是想用他的bash。vscode默认是使用powershell

4 安装git

也是从官网直接下载,下载慢的话去本文资源自己拿。

下载的网速有点慢,就顺手把后面要用的nvm也一并下载了。

nvm是管理node版本的包,一会弄完git后,我们会用nvm来下载node。所以从电脑网页下载的就只有3个:

好了 git终于下完了,才50m,打了一局王者才下下来。开始安装。

还是一顿默认安装就可以。

安装速度还是很快的。安装完毕后,在vscode里进行配置。

4 配置bash

用管理员权限打开vscode,再打开terminal终端。

选择select default profile 然后刚才不是安装git了么,就选择bash就行

这样就设置好了,关掉vscode重新进入,就可以看到bash是默认的终端了。

5 安装nvm

接下来安装nvm,点击安装包,一顿默认安装。

就可以了。安装好以后,我们要在vscode的bash终端用他安装node。

6 安装node

用管理员权限打开vscode,在bash终端输入:

nvm list available

这里会列出nvm可用的node的版本号,看不到的话,把终端调大一点

我们选择一个版本安装,通常安装lts版的,这是长久维护的稳定版

nvm install 18.19.0

网速不好的话,安装node需要花费2-3分钟。可恶的移动网络。

安装完就是上面这个样子了。

之后,需要打

nvm use 18.19.0

这样才是配置好node了。

为了验证下是否安装好,可以检查下版本号,

node -v

就看到当前版本号了。

7 安装yarn

yarn是管理依赖的一个包,也需要安装,输入

npm install yarn -g

就开始安装了,也要花费一点时间

这样就算是安装好了,其实我有点觉得好像就没安装,原来就有似地。也可以照猫画虎的检查下yarn的版本号

yarn -v

好了,有版本号,那就是可以使用了。

8 新建项目

在本地文件夹新建一个叫source的文件夹 用来存放工程。

之后,在bash输入

cd /d/web/source

就进入到文件目录下了。接下来执行yarn命令来创建工程依赖的文件

yarn create vite

这时候,就会自动往这个文件夹下下载东西了,大概是30多M。都是些依赖的资源和文件。

下载完毕后,会要求输入工程名字:

输入:

vite-demo

紧接着要求选择是设呢框架,咱满就选择vue

再接着又要选择是js还是ts,我们选择js

选择完了,项目就建好了

9 运行helloworld

上面提示已经给出提示后面怎么弄,我们跟着走一遍。

首先是cd到目录下

cd vite-demo

然后执行yarn

yarn

然后终端又是一顿嘎嘎蹦字儿,过一会儿就好了。

这时候我们可以用vscode打开工程了,点文件-打开文件夹,选择刚才建好的工程的目录

可以看到这文件夹有30m大小。

这下我们终于用vscode打开工程了。

在终端输入

yarn dev

终端一顿运行,终于出来这个页面,有个网址了,打开网址一看,成了

我们打开components文件夹下的文件,修改一下

再看效果

可见,页面是实时更新的。

这样就算是完成了vue的helloworld项目了。

最后有点疑问:

vue为啥用vscode安装,而且在没有node情况下就可以安装?

vscode安装的文件都在哪里,在控制面板能看到卸载选项吗?

vue具体咋用?还得实现个小项目才能了解更多。

最后提醒一下,node和vscode都不太支持win7了,所以开发必须得换win10

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

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

相关文章

入门级:用devEco Studio创建一个鸿蒙APP

文章概叙 本文主要讲的是如何在鸿蒙的开发工具devEco Studio新建一个项目,全文很水,只适合新手!! 开始贴图 假设当前你已经下载好了devEco Studio,但是还没正式开始安装,此时你点击安装包,你会发下如下页面,只需要点…

043、循环神经网络

之——RNN基础 杂谈 第一个对于序列模型的网络,RNN。 正文 1.潜变量自回归模型 潜变量总结过去的信息,再和当前信息一起结合出新的信息。 2.RNN 循环神经网络将观察作为x,与前层隐变量结合得到输出 其中Whh蕴含了整个模型的时序信息&#xf…

10-让Java性能提升的JIT深度剖析

文章目录 JVM的语言无关性解释执行与JITC1、C2与Graal编译器C1编译器C2编译器 分层编译(了解即可)热点代码热点探测方法调用计数器回边计数器 编译优化技术方法内联锁消除标量替换逃逸分析技术逃逸分析的原理逃逸分析 JVM的语言无关性 跨语言(语言无关性&#xff0…

【各种**问题系列】Java 数组集合之间的相互转换

📌 问题点: 在 Coding 过程中经常会遇到数组、List、Set、Map 之间的相互转换......这里记录一下转换的几种方式。😶😶😶 目录 📌 集合转换 1.数组 转 List: 2.List 转 数组: 3…

【DevOps 工具链】软件版本号命名规范 - 3种规则(读这一篇就够了)

文章目录 1、简述2、常见软件的版本号命名规则3、版本号命名规范整理3.1、XYZ/MMP3.1.1、规则3.1.2、确定3.1.3、举例3.1.4、详细规则 3.2、XYZD/MMPD3.3、VRC3.3.1、规则3.3.2、对"Vxxx"的说明3.3.3、对"Rxxx"的说明3.3.4、对"LLL"的说明3.3.5、…

Databend 开源周报第 125 期

Databend 是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展,遇到更贴近你心意的 Databend 。 密码策略 Data…

8.21 PowerBI系列之DAX函数专题-帕累托分析

需求 实现 1 按商品小类累积 var rollup_sales calculate(//计算当前累计销售额 [销售额], filter(allselected(order_2[产品小类]),sum(order_2[订单金额])<[销售额]) ) //按小类累积金额,filter内的销售额为选中的各小类的销售额 //金额从大到小累积&#xff0c;用&l…

RabbitMQ如何做到不丢不重

目录 MQTT协议 如何保证消息100%不丢失 生产端可靠性投递 ​编辑 RabbitMQ的Broker端投 &#xff08;1&#xff09;消息持久化 &#xff08;2&#xff09;设置集群镜像模式 &#xff08;3&#xff09;消息补偿机制 消费端 ACK机制改为手动 总结 MQTT协议 先来说下MQTT…

阿里云经济型e实例2核2G3M99元1年,性价比超高的入门级云服务器

产品简介 经济型e实例是阿里云面向个人开发者、学生、小微企业&#xff0c;在中小型网站建设、开发测试、轻量级应用等场景推出的全新入门级云服务器&#xff0c;采用Intel Xeon Platinum架构处理器&#xff0c;支持1:1、1:2、1:4多种处理器内存配比&#xff0c;采用非绑定CPU…

IntelliJ IDEA快捷键及调试

文章目录 一、IntelliJ IDEA 常用快捷键一览表1-IDEA的日常快捷键第1组&#xff1a;通用型第2组&#xff1a;提高编写速度&#xff08;上&#xff09;第3组&#xff1a;提高编写速度&#xff08;下&#xff09;第4组&#xff1a;类结构、查找和查看源码第5组&#xff1a;查找、…

ES8生产实践——Kibana对接Azure AD实现单点登录

基本概念介绍 什么是单点登录 单点登录&#xff08;Single Sign-On&#xff0c;SSO&#xff09;是一种身份验证和访问控制机制&#xff0c;允许用户使用一组凭据&#xff08;通常是用户名和密码&#xff09;仅需登录一次&#xff0c;即可访问多个应用程序或系统&#xff0c;而…

DDIM详解

DDIM详解 参考&#xff1a;https://www.bilibili.com/video/BV1VP411u71p/ 虽然 DDIM 现在主要用于加速采样&#xff0c;但他的实际意义远不止于此。本文将首先回顾 DDPM 的训练和采样过程&#xff0c;再讨论 DDPM 与 DDIM 的关系&#xff0c;然后推导 DDIM 的采样公式&#xf…

MySQL的事务-隔离级别

上篇&#xff0c;整理了MySQL事务的原子性&#xff0c;这篇继续整理MySQL事务的一致性、隔离性和持久性。 2. 一致性指的是事务开始前和结束后&#xff0c;数据库的完整性约束没有被破坏&#xff0c;这保证了数据的完整性和一致性。一致性必须确保数据库从一个一致的状态转换到…

【无标题】【一周安全资讯1223】一图读懂《工业和信息化部办公厅关于组织开展网络安全保险服务试点工作的通知》;15亿条纽约房产记录泄露

要闻速览 1、一图读懂《工业和信息化部办公厅关于组织开展网络安全保险服务试点工作的通知》 2、国家数据局《“数据要素”三年行动计划 (2024—2026年)》公开征求意见 3、中国信息通信研究院发布《公共数据授权运营发展洞察 (2023年)》 4、15亿条纽约房产记录泄露&#xff0c…

c# OpenCvSharp透视矫正六步实现透视矫正(八)

透视矫正,引用文档拍照扫描&#xff0c;相片矫正这块。 读取图像Cv2.ImRead();预处理&#xff08;灰度化&#xff0c;高斯滤波、边缘检测&#xff09;轮廓检测&#xff08;获取到最大轮廓&#xff09;获取最大面积轮廓的四个顶点标识最小矩形坐标透视矫正显示 完整代码 // 1、…

结构体的对齐规则

1.引入 我们在掌握了结构体的基本使⽤后。 现在我们深⼊讨论⼀个问题&#xff1a;计算结构体的大小。 这也是⼀个特别热门的考点&#xff1a; 结构体内存对齐。 2.具体分析 ⾸先我们得掌握结构体的对⻬规则&#xff1a; 1. 结构体的第⼀个成员对⻬到和结构体变量起始位置偏移量…

直通车定义、功能以及扣费原则

1.直通车是天猫付费搜索广告&#xff0c;即时需求&#xff0c;是消费者主动来搜索的&#xff0c;cpc扣费原则&#xff0c;一般用来拉新或者收割客户&#xff1b; 2.一般关键词优先&#xff0c;人群溢价是用来更精准投放的&#xff0c;可以不投溢价人群&#xff1b; 3.溢价人群…

移动开发新的风口?Harmony4.0鸿蒙应用开发基础+实践案例

前段时间鸿蒙4.0引发了很多讨论&#xff0c;不少业内人士认为&#xff0c;鸿蒙将与iOS、安卓鼎足而三了。 事实上&#xff0c;从如今手机操作系统竞赛中不难看出&#xff0c;安卓与iOS的形态、功能逐渐趋同化&#xff0c;两大系统互相取长补短&#xff0c;综合性能等差距越来越…

详细学习Java注解Annotation、元注解(通俗易懂,一学就会)

概述 底层原理 自定义注解 示例代码&#xff1a; 1. 2.只有属性名为value的才可以&#xff0c;java对它进行了标识&#xff0c;如果是其他别名如value1是不行的 3.多个属性&#xff0c;必须用键值对形式&#xff0c;不能少写&#xff0c;也不能多写&#xff0c;除非有default修…

Apache Commons BeanUtils: JavaBean操作的艺术

第1部分&#xff1a;Apache Commons BeanUtils 简介 咱们今天聊聊Apache Commons BeanUtils。这货简直就是处理JavaBean的利器&#xff0c;用起来又方便又快捷。不管是属性拷贝、类型转换&#xff0c;还是动态访问&#xff0c;BeanUtils都能轻松应对。 BeanUtils是啥&#xf…