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)”案例评选结果正式公布。中移在线服…

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…

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

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

【华为机试】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;将内容转换成…

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

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

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

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

行业首台7英寸彩屏,掌阅iReader Color 7 发布

12月22日消息&#xff0c;掌阅iReader 继2021年发布 C6 Pro 后&#xff0c;时隔2年再次推出彩屏系列新产品 Color 7&#xff0c;该产品为彩色电子纸智能阅读本&#xff0c;采用 Kaleido3 新一代彩色电子纸技术&#xff0c;黑白像素密度为 300PPI &#xff0c;彩色像素密度为 15…

并发程序设计--D1进程的创建和回收

进程和程序内容区别 进程包含的内容&#xff1a; BSS段&#xff1a;存放程序中未初始化的全局变量 数据段&#xff1a;已初始化的全局变量 代码段&#xff1a;程序执行代码 堆&#xff08;heap&#xff09;&#xff1a;malloc等函数分配内存 栈(stack)&#xff1a;局部变量…

让学习成为一种生活方式:数字化助力终身学习

12月以来,“让学习成为一种生活方法”全民终身学习活动在北京、安徽、湖北、湖南、云南等地密集启动,而依托数字化赋能终身学习成为共同关键词。 近年来,随着教育现代化体系的不断深入推进,数字化转型成为建设高质量终身学习体系的重要“推动力”,数字技术与大数据的应用汇聚了…

2023新能源汽车,吵得越凶,卖得越多

作者 | 辰纹 来源 | 洞见新研社 2023年的汽车行业很残酷&#xff0c;合资大败退&#xff0c;市场份额被自主品牌大幅渗透&#xff0c;三菱退出中国市场&#xff0c;成为真实写照。 新能源车企&#xff0c;威马领头&#xff0c;天际、自游家NIUTRON、恒驰、爱驰、雷丁等造车新…

如何学习VBA_3.2.10:人机对话的实现

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的劳动效率&#xff0c;而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册&#xff0c;现在已经全部完成&#xff0c;希望大家利用、学习。 如果…

智能优化算法应用:基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.斑马算法4.实验参数设定5.算法结果6.参考文献7.MA…

算法导论复习(三)

这一次我们主要复习的是递归式求解 递归式求解主要有的是三种方法&#xff1a; 代换法递归树法主方法 我们进行处理的时候要 代换法 方法讲解 主要就是猜测答案的形式 我们只在乎 n 在无穷大的时候成立就行 关于答案的形式&#xff0c;我发现最后能够是 n log n 的形式的…

SUS-Chat-34B领先一步:高效双语AI模型的突破

引言 在人工智能领域&#xff0c;模型的规模和效能一直是衡量其先进性的关键指标。南方科技大学联合IDEA研究院CCNL团队最新开源的SUS-Chat-34B模型&#xff0c;以其340亿参数的庞大规模和卓越的双语处理能力&#xff0c;在AI界引起了广泛关注。 模型概述 SUS-Chat-34B是基于…

在VSCode中使用Git教程

文章目录 提交代码操作分支提交远程库拉取代码参考 介绍一下如何在VSCode中使用Git 首先在VSCode中打开一个项目 打开项目后, 点击下图按钮, 可以引入Git 提交代码 点击 &#xff1b;相当于git add. 下面两张图, 第一张表示改文件后的号, 只会add本文件. 第二张图表示这段时…

linux系统和网络(四):网络

本文主要探讨linux网络相关知识,详细介绍看本博客其他博文。 网络基础(参考本博客其他文章&#xff1a;基础网络知识&#xff0c;socket网络编程&#xff0c;基于socket的聊天室和简易ftp) 路由器是局域网和外部网络通信出入口 DNS实现域名和IP地址之间转换 …

Ai画板原理

在创建时画板可以选择数量和排列方式 也可以采用这个图片左上的画板工具&#xff0c;选择画板在其他地方画框即可生成&#xff0c;同时可以在属性框中可以修改尺寸大小 选择全部重新排列可以进行创建时的布局