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

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

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

相关文章

canvas基础教学

Canvas <canvas>是一个可以使用脚本&#xff08;通常是JavaScript&#xff09;来绘制图形的HTML元素&#xff0c;例如&#xff0c;它可以用于绘制图表、制作图片构图或者制作简单的动画。 本篇博客从一些就基础开始&#xff0c;描述了如何使用<canvas>元素来绘制…

数据库管理-第127期 LSM Tree(202301225)

数据库管理-第127期 LSM Tree&#xff08;202301225&#xff09; 说起分布式数据库&#xff0c;绕不开的一个话题就是LSM Tree&#xff0c;全称为log-structured merge-tree&#xff0c;回到吕海波老师授权过的那句话“没搞过Oracle的&#xff0c;但又是数据库圈里的人&#x…

《C++避坑神器·二十五》简单搞懂json文件的读写之遍历json文件读写

json.hpp库放在文章末尾 1、遍历json文件读写 &#xff08;1&#xff09;插入新键值对到json之情形1 原来json文件如下所示&#xff1a; {"Connection": {"IpAddress": "192.168.20.1","Rock": 0,"Solt": 1}, "Data…

Linux操作系统——进程(四)进程切换与命令行参数

进程切换 概念引入 下面我们先了解几个概念&#xff1a; 竞争性: 系统进程数目众多&#xff0c;而CPU资源只有少量&#xff0c;甚至1个&#xff0c;所以进程之间是具有竞争属性的。为了高效完成任务&#xff0c;更合理竞争相关资源&#xff0c;便具有了优先级 独立性: 多进程…

Centos7安装Docker和Docker-Compose

环境 操作系统&#xff1a;Centos 7.9 root环境 Docker安装 卸载原先的Docker环境 如果你先前的操作系统安装了Docker环境&#xff0c;请卸载 Docker 相关的软件包&#xff0c;没有则忽略这一步。 yum remove docker \docker-client \docker-client-latest \docker-common \doc…

python:改进型鳟海鞘算法(SSALEO)求解23个基本函数

一、改进型鳟海鞘算法SSALEO 改进型鳟海鞘算法&#xff08;SSALEO&#xff09;由Mohammed Qaraad等人于2022年提出。 参考文献&#xff1a;M. Qaraad, S. Amjad, N. K. Hussein, S. Mirjalili, N. B. Halima and M. A. Elhosseini, "Comparing SSALEO as a Scalable Larg…

把握数字时代新机遇,ZTUP峰会圆满落幕!

​随着人工智能技术的不断升级与突破&#xff0c;生成式AI正在加速向文本、图像、音视频等领域渗透&#xff0c;AIGC未来将成为各行业工作中必不可少的新工具&#xff0c;加速企业效能精准提升。技术、创新和赋能也将成为组织实现竞争优势和持续增长的关键要素。 为了帮助更多的…

【C++】string

文章目录 1. 标准库中的string类1.1 string类 2 string类的常用接口说明2.1 string类对象的常见构造2.2 string类对象的容量操作2.3. string类对象的访问及遍历操作2.4 string类对象的修改操作2.5 string类非成员函数2.6 vs和g下string结构的说明 1. 标准库中的string类 1.1 s…

redis基本用法学习(C#调用StackExchange.Redis操作redis)

StackExchange.Redis是基于C#的高性能通用redis操作客户端&#xff0c;也属于常用的redis客户端之一&#xff0c;本文学习其基本用法。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装StackExchange.Redis&#xff0c;如下图所示&#xff1a;   StackExchange.…

【开源】基于JAVA语言的大学生相亲网站

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询会员4.2 查询相亲大会4.3 新增留言4.4 查询新闻4.5 新增新闻 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的大学生相亲网站&#xff0c;包含了会员管理模块、新闻管…

免费IDEA插件推荐-Apipost-Helper

IDEA插件市场中的API调试插件不是收费&#xff08;Fast Request &#xff09;就是不好用&#xff08;apidoc、apidocx等等&#xff09;今天给大家介绍一款国产的API调试插件&#xff1a;Apipost-Helper&#xff0c;完全免费且好看好用&#xff01; 这款插件由Apipost团队开发的…

【2024 行人重识别最新进展】ReID3D:首个关注激光雷达行人 ReID 的工作!

【2024 行人重识别最新进展】ReID3D&#xff1a;首个关注激光雷达行人 ReID 的工作&#xff01; 摘要&#xff1a;数据集&#xff1a;方法模型&#xff1a;多任务预训练&#xff1a;ReID Network&#xff1a; 实验结果&#xff1a;结论&#xff1a; 来源&#xff1a;Arxiv 2023…