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.mzph.cn/news/577639.shtml

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

相关文章

Cesium.js三维地图的实现(依托天地图CDN文件)

零、技术选型: Vue2、VueCli5、天地图、Cesium.js 一、通过天地图官网案例实现 需要引入天地图官方提供的CDN链接访问Cesium.js相关文件 相关文件: https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js https://api.tianditu.gov.cn/…

【WPF.NET开发】数据绑定应用场景

目录 1、实现属性更改通知 示例 2、双向绑定​​​更新源 示例 3、对分层数据使用主-从模式 示例 4、对分层 XML 数据使用主-从模式 示例 5、绑定两个控件的属性 示例 6、创建和绑定到 ObservableCollection 示例 7、使用 XMLDataProvider 和 XPath 查询绑定到 XML…

喜报!酷克数据携手中移在线入选2023大数据“星河”数据库优秀案例

12月20日-21日,由中国信通院、中国通信标准化协会主办,中国通信标准化协会大数据技术标准推进委员会承办的“2023数据资产管理大会”在京召开。 在会上,第七届大数据“星河(Galaxy)”案例评选结果正式公布。中移在线服…

华纳云:组策略与注册表之间的区别和联系

组策略和注册表是在 Windows 操作系统中用于配置和管理系统行为的两种不同的管理机制。它们之间有着紧密的联系,但也有一些重要的区别。 区别: 定义和作用: 组策略: 组策略是一种集中管理和配置 Windows 系统设置的机制。通过组策…

如何在Laravel中屏蔽错误提示(两种方法)

前言 Laravel是一个非常流行的PHP框架,其提供的错误提示机制使得在开发过程中出现问题时可以迅速定位原因,从而提高了开发效率。然而,有时候我们在正式上线的时候,不希望用户看到任何错误提示,这时候我们可以通过屏蔽…

Java 中 Stream 流的使用方法

目录 一、Stream 的概念 二、Stream 的特点 三、Stream 的使用步骤 1、Stream 的创建 1.1、通过Collection对象的stream()或parallelStream()方法 1.1.1、stream() 和 parallelStream() 两个方法的区别 1.2、通过 Arrays 工具类的 stream() 方法 1.3、通过Stream接口的of()…

Local Binary Convolutional Neural Networks (LBCNN)

论文:https://arxiv.org/abs/1608.06049 代码:GitHub - juefeix/lbcnn.torch: Torch implementation of CVPR17 - Local Binary Convolutional Neural Networks http://xujuefei.com/lbcnn.html 摘要: 我们提出了局部二值卷积(LBC)&#x…

在uni-app项目中,如何进行性能优化

在uni-app项目中,可以通过以下几种方式进行性能优化: 减少请求次数:合并请求,将多个请求合并成一个请求,减少网络请求次数,提高性能。优化图片加载:使用合适的图片格式,并进行压缩和…

python实现对终端信息的清屏或者部分行清除

有些时候我们看到部分工具能够在给出提示项或者下载库信息的时候,有点类似滚动的效果,其实就是清除了一些行的字符信息。虽然我总结的不是很全,但是就我知道的方式而言,总结了下面的一些方法实现工具,仅供参考&#xf…

【效率工具】利用python进行本地知识库(PDF和WORK文件内容)的批量模糊搜索

目录 前言 一、为什么要进行本地文档的批量搜索? 二、如何去做呢?

【ScienceAI Weekly】DeepMind最新研究再登Nature;我国首个自研地球系统模型开源;谷歌推出医疗保健模型

AI for Science 的新成果、新动态、新视角抢先看—— * DeepMind 最新研究 FunSearch 登 Nature * 谷歌推出医疗保健行业模型 MedLM * 晶泰科技冲刺港交所,AI机器人赋能 AI for Science * GHDDI 与微软研究院科学智能中心达成合作 * 用于地震学处理分析的 AI 工…

服务器的出口IP地址查询

在服务器中,IP地址是至关重要的。但是很多情况下我们看见的IP地址多数为内网IP。比如192.168.X.X。这些都是内网IP,也就是脱离了内网环境我们就无法再访问这些IP地址。 工作中,我们常常会接触到IP白名单;使用云服务器时需要配置安…

【华为机试】2023年真题B卷(python)-分月饼

一、题目 题目描述&#xff1a; 中秋节公司分月饼&#xff0c;m个员工&#xff0c;买了n个月饼&#xff0c;m<n&#xff0c;每个员工至少分1个月饼&#xff0c;但可以分多个&#xff0c;单人份到最多月饼的个数为Max1&#xff0c;单人分到第二多月饼的个数是Max2&#xff0c…

python(上半部分)

第一部分 1、input()语句默认结果是字符串 2、type()可以判断变量的类型 3、input()输出语句 &#xff08;默认为字符串类型&#xff09; 4、命名规则&#xff1a;中文、英文、数字、_&#xff0c;数字不可开头&#xff0c;大小写敏感。 5、 %s&#xff1a;将内容转换成…

常用css属性

所有 CSS 背景属性 属性描述background在一条声明中设置所有背景属性的简写属性。background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。background-clip规定背景的绘制区域。background-color设置元素的背景色。background-image设置元素的背景图像。bac…

Java并发(二十一)----wait notify介绍

1、小故事 - 为什么需要 wait 由于条件不满足&#xff08;没烟干不了活啊&#xff0c;等小M把烟送过来&#xff09;&#xff0c;小南不能继续进行计算 但小南如果一直占用着锁&#xff0c;其它人就得一直阻塞&#xff0c;效率太低 于是老王单开了一间休息室&#xff08;调…

refusing to merge unrelated histories如何解决git冲突

当使用git merge命令合并分支时&#xff0c;如果Git检测到分支之间存在不相关的提交历史记录&#xff0c;它会给出refusing to merge unrelated histories错误。这种情况下&#xff0c;可以通过以下几种方法解决冲突。 强制合并&#xff1a;使用git merge命令时&#xff0c;加…

如何在uni-app项目中进行数据持久化

在uni-app项目中进行数据持久化有多种方法&#xff0c;以下是几种常用的方式&#xff1a; 使用uni-app的本地存储API&#xff08;uni.setStorageSync和uni.getStorageSync&#xff09;进行数据存取。例如&#xff1a; // 存储数据 uni.setStorageSync(key, value); // 获取数…

vue场景 无分页列表条件过滤,子组件多选来自父组件的列表

日常开发中&#xff0c;经常会遇到下面场景&#xff1a; 页面加载一个无分页列表&#xff0c;同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)父组件传给子组件列表&#xff0c;子组件中需要多选列表多选&#xff0c;选择结果返回父组件 1 无分页列表过…

鸿蒙 - arkTs:网络请求封装和使用

1. module.json5文件配置网络请求 {"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET"}]} } 2. 在pages同级创建一个文件夹&#xff0c;起名为api 3. api文件夹下创建index.ts文件&#xff0c;文件内容&…