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

news2024/9/22 17:10:31

目录

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

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

相关文章

添加调试日志,bug消失

参考:就删了个printf,代码崩了! 1、运行报错代码 #include "stdio.h" #include "stdlib.h" #include "string.h"void func1() {int arr[10];memset(arr, 1, sizeof(arr)); }void func2() {int index;int* ar…

《我在北京送快递》平凡隽永的时刻,对人生更具意义

《我在北京送快递》平凡隽永的时刻,对人生更具意义 胡安焉 文章目录 《我在北京送快递》平凡隽永的时刻,对人生更具意义[toc]摘录感悟 摘录 转“没有期限的承诺无疑就是委婉的拒绝” 转书友:亨利福特说,我聘的是一双手&#xff0…

逆向P1P2总结

字节八位 word 16位 deword 32 位 00 00 00 e8 是存储32位信息的起点 不是程序运行的起点 为什么电脑有32位与64位之分 寻址宽度 以字节为单位 0xfffffff 1 就是最大容量 转为十进制为 4294967296 / 1024 (k)/1024 (kb)/ 1…

Vue 封装echarts饼状图(Pie)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 效果显示&#xff1a; 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title"><div>{{ title }}</div>…

JavaScript进阶(事件+获取元素+操作元素)

目录 事件基础 事件组成 执行事件的步骤 获取元素 根据ID获取元素 根据标签名获取元素 获取ol中的小li 类选择器&#xff08;html5新增的I9以上支持&#xff09; 获取body和html 操作元素 innerText和innerHtml 表单标签 样式属性操作 操作元素总结 事件基础 事…

【C++】STL 容器 - list 双向链表容器 ① ( 容器特点 | 容器操作时间复杂度 | 构造函数 )

文章目录 一、 list 双向链表容器简介1、容器特点2、容器操作时间复杂度3、遍历访问5、头文件 二、 list 双向链表容器 构造函数1、默认无参构造函数2、创建包含 n 个相同元素的 list 双向链表3、使用初始化列表构造 list 双向链表4、使用另外一个 list 容器 构造 list 双向链表…

图解机器学习神器:Scikit-Learn

算法进阶 ​​本文详解 Scikit-learn 工具库的用法&#xff0c;覆盖机器学习基础知识、SKLearn讲解、SKLearn三大核心API、SKLearn高级API等内容。 https://www.showmeai.tech/article-detail/203 我们在上一篇SKLearn入门与简单应用案例 [1] 里给大家讲到了 SKLearn 工具的基…

reactive和TypeScript标注数据类型-ts使用方法

一、vite项目中<script setup lang"ts"> : lang"ts" 是表明支持ts校验&#xff08;ts 全称typescript,是es6语法&#xff0c;是javascript的超集强类型编程语言&#xff0c;类似java&#xff0c;定义变量类型后&#xff0c;赋值类型不一致&#xff0…

Redis 内存爆了?使用 Python 分析一下哪些 Key 占用空间比较大

大家好,我是水滴~~ 在这篇文章中,我们将探讨如何使用Python来分析Redis中哪些Key占用空间较大,以便识别和优化内存使用。 《Python入门核心技术》专栏总目录・点这里 文章目录 1. 前言2. 代码与解析2.1 安装依赖2.2 完整代码2.3 代码解析3. Excel 分析4. 总结1. 前言 Redi…

(2023|CVPR,Corgi,偏移扩散,参数高斯分布,弥合差距)用于文本到图像生成的偏移扩散

Shifted Diffusion for Text-to-image Generation 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要 1. 简介 2. 方法 2.1 偏移扩散 3. 实验 3.1 无监督文本到图像生成 3.2 无…

免费IDEA插件推荐-Apipost-Helper

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

C++ 比 C语言的新增的特性 1

1. C是C的增强 1.1 C是静态类型的语言&#xff0c;具有严格的数据类型检查 1.1.1 c 因为const修饰的变量不允许修改&#xff0c;但是只给了警告&#xff0c;不严谨 const int a10;a20; //报错int *p&a;*p20;//a的值&#xff1f; test1.c:6:9: warning: initialization dis…

第十六节TypeScript 类

1、简介 TypeScript是面向对象的JavaScript。 类描述了所创建的对象共同的属性与方法。 2、类的定义 class class_name { // 类作用域 } 定义类的关键字是class&#xff0c;后面紧跟类名&#xff0c;类可以包含以下几个模块&#xff1a; 字段 – 字段是类里面声明的变量。字…

微信小程序-textarea组件字数实时更新

一、前言 本文实现的是在小程序中&#xff0c;textarea文本框输入文字后&#xff0c;实时显示文字的字数&#xff0c;获取更好的用户输入体验以及提示。 下图是实现的效果 二、代码实现 2-1、wxml代码 <view style"padding: 30rpx;"><view style"…

【网络安全 | 网络协议】结合Wireshark讲解TCP三次握手

TCP三次握手在Wireshark数据包中是如何体现的&#xff1f;在此之前&#xff0c;先熟悉TCP三次握手的流程。 TCP三次握手流程 TCP&#xff08;传输控制协议&#xff09;是一种面向连接的、可靠的传输层协议。在建立 TCP 连接时&#xff0c;需要进行三次握手&#xff0c;防止因为…

IntelliJ IDEA快捷键及调试

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

【Spring】15 MessageSourceAware 接口

文章目录 1. 简介2. 功能3. 使用3.1 创建并实现接口3.2 配置 Bean 信息3.3 资源文件3.4 创建启动类3.5 启动 4. 应用场景总结 Spring 框架为开发者提供了丰富的扩展点&#xff0c;其中之一是 Bean 生命周期中的回调接口。本文将专注介绍一个与国际化相关的接口 MessageSourceAw…

正则表达式:元字符

一、什么事元字符 正则是由一系列的元字符组成的&#xff0c;所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符&#xff0c;元字符是构成正则表达式的基本元件。 二、元字符的分类 1.特殊单字符 效果&#xff1a; ①.任意字符&#xff08;换行符除外&#xff09;&…

【基础篇】一、认识JVM

文章目录 1、虚拟机2、Java虚拟机3、JVM的整体结构4、Java代码的执行流程5、JVM的三大功能6、JVM的分类7、JVM的生命周期 1、虚拟机 虚拟机&#xff0c;Virtual Machine&#xff0c;一台虚拟的计算机&#xff0c;用来执行虚拟计算机指令。分为&#xff1a; 系统虚拟机&#x…

“React学习之旅:从入门到精通的点滴感悟“

在探索和学习React的过程中&#xff0c;我逐渐领悟到了前端开发的魅力与挑战。React&#xff0c;作为Facebook推出的开源JavaScript库&#xff0c;以其独特的思维方式和强大的功能&#xff0c;引领着前端开发的潮流。在这篇文章中&#xff0c;我将分享我的React学习心得&#x…