【前端】vue运行环境和编辑器VScode安装
创始人
2025-05-28 14:53:45
0

vue运行环境

  • Vue安装
    • 安装node环境
    • vue安装
  • VSCode安装
  • 总结

上一篇了解一下Vue的故事,知道了Vue的特点
接下就看看vue的运行环境需要安装哪些东西,编辑器的话就安装VScode,这里介绍安装步骤

Vue安装

安装node环境

node的现在的最新版本是18.115.0,可以在官网根据自己的电脑环境选择需要安装包下载地址点击下载地址
在这里插入图片描述
下载之后可以一键安装,安装完成可以通过node -v命令查看自己安装的版本是多少
在这里插入图片描述
接下来就是配置一下node全局环境,配置淘宝镜像源
如果node安装目录在D盘,就在“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框里面设置NODE_PATH.

查看npm下载源命令 npm config get registry
在这里插入图片描述
看了默认的下载源是官方默认的,所以需要更换国内的淘宝镜像源,这样下载速度会快很多。
通过以下命令可以永久的设置淘宝镜像源下载:

npm config set registry https://registry.npm.taobao.org 

然后再通过 npm config list命令查看自己是否设置成了没有。
在这里插入图片描述
node安装好之后,我们就可以进行vue相关的安装了。

vue安装

第一步: 根据自己的淘宝镜像源设置选择命令,其中-g是全局安装,指安装到global全局目录去

npm install vue -g或者 cnpm install vue -g

第二步:安装的vue信息:npm info vue
在这里插入图片描述
这样就安装好了vue了,为了开发方便还可以安装webpack ,安装脚手架vue-cli最新版本

安装webpack 命令 : npm install --global webpack-cli
版本检查:webpack -v
安装脚手架vue-cli 最新版本命令:npm install @vue/cli –g
新建项目命令:vue create 项目名

VSCode安装

VSCode是什么呢?

VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。
该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

官方下载地址点击跳转
https://code.visualstudio.com/
官方文档地址 点击跳转:
https://code.visualstudio.com/docs

在这里插入图片描述
根据自己的需要下载对应的安装包,安装完之后,打开的页面就是这样的,是不是很好看。
在这里插入图片描述
如果需要汉化的版,按照下面的步骤进行安装,重启之后就是跟我上面汉化的一模一样的了。
在这里插入图片描述
界面:左侧界面可以看到有文件管理,搜索框,代码管理,debug,扩展安装等等多个模块,每一块有需要知道是干什么的,这样在开发的时候效率会提高很多。
在这里插入图片描述

总结

看到这里基本就可以开始编写vue相关的代码了,这一篇有node安装步骤,vue安装,编辑器下载和安装。一切准备就绪了,接着就可以通过VSCode编写vue项目了。

一边写代码一边深入的学习vue吧。

相关内容

热门资讯

容芯致远获天使轮融资 2026年5月8日,北京容芯致远科技有限公司(简称“容芯致远”)宣布完成天使轮融资。本轮融资由万利达...
试管期间能运动吗?避开这些坑,... 做试管的姐妹都纠结:不动怕气血差、影响卵泡,动了又怕伤子宫、毁着床,到底该怎么办?其实试管不用“躺平...
原创 今... 2026年5月6日,国内金价算是彻底“凉”了一下,你看那AU9999现货黄金,直接跌到了1013元一...
美国5月消费者信心再创历史新低... 财联社5月8日讯(编辑 牛占林)随着中东战争持续推高能源价格,美国消费者信心本月继续下滑,并再度刷新...
“压高盛一头”!江西一精神病院... 蓝鲸新闻5月8日讯(记者 徐甘甘)5月8日,盛通股份(002599.SZ)一季报引发资本市场热议——...
2026年企业短视频能力升级:... 本篇将回答的核心问题 2026年企业短视频营销面临哪些关键挑战,有效应对策略是什么? 服务机构的能力...
江西一精神病院炒股炒成上市公司... 红星资本局5月8日消息,近日,上市公司盛通股份(002599.SZ)发布一季报,披露了前十大股东名单...
企业IP打造指南:小公司低成本... 小公司做企业IP,不是为了装门面,而是让客户在没见到你之前,就能通过内容知道你是谁、你解决什么问题、...
官方:赵心童入选世界斯诺克名人... 北京时间5月8日消息,世界斯诺克巡回赛(WST)今日正式公布了2025/26赛季年终奖项及名人堂更新...
小灰熊AI学员王锋:希望能跟上... 35了,老程序员了。 从进入互联网行业到现在,其实已经做了很多年移动端开发。最早那几年,安卓行业发展...
原创 2... 2026年全国两会把稳定房地产市场列为重点工作,政府工作报告明确提出因城施策控增量、去库存、优供给。...
一年翻倍,六年未归——徽商银行... 文:向善财经 今年的港股市场,与A股市场出现了明显的分化。 A股这边,科技板块在AI浪潮中热闹非凡;...
古井贡酒2025:在行业深度调... 以“稳”为底、以“新”为翼。 文/每日财报 杜康 在行业库存高企、价格倒挂的背景下,当多数酒企在为...
好上好8408万收购鼎瑞芯加码... 5月7日晚,好上好(001298.SZ)抛出一份收购公告,拟以8408万元现金收购深圳市鼎瑞芯科技有...
全面大撤离!李嘉诚英国“套现”... 突发,李嘉诚又卖了。 这次,套现了455亿。 金额不少,但更值得关注的是透露着不同寻常的信号。 因为...
油气价格上涨加剧法国一季度贸易... 据新华社,法国海关7日发布的数据显示,受中东局势推高国际油气价格影响,法国今年第一季度贸易逆差扩大至...
昆仑芯启动科创板IPO上市辅导... 5月8日,据证监会官网显示,昆仑芯(北京)科技股份有限公司于2026年5月7日正式启动科创板上市辅导...
贵州茅台酒股份有限公司关于回购... 来源:上海证券报 证券代码:600519 证券简称:贵州茅台 公告编号:临2026-016 贵州茅...
百度昆仑芯启动科创板上市辅导,... 5月8日,证监会官网显示,昆仑芯(北京)科技股份有限公司 (下称“昆仑芯”)于2026年5月7日正式...
滕州信华的承压时刻:罚单、失信... 2026年4月末,滕州信华美元债单日跌近2%,关联方被列“老赖”。半年前,这家AA+城投曾因非市场化...