【前端】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吧。

相关内容

热门资讯

央企名录更新中国长安汽车集团入... 新京报贝壳财经讯(记者王琳琳)7月29日,国务院国资委网站中央企业名录更新,中国长安汽车集团有限公司...
A股午评:三大指数分化,沪指跌... 格隆汇7月29日|A股主要指数涨跌不一,截至午间收盘,沪指跌0.08%报3595.19点,深成指跌0...
2025年基金二季报划重点!泓... 来源:新浪基金 2025年第二季度泓德睿享一年持有期混合A基金净值增长率为3.09%,同期业绩比较基...
美团发文:绝不自营,浣熊食堂只... 来源:猎云网 7月29日,美团官方公众号发文称,经过半年多的试运营,7月初正式推出“浣熊食堂”品牌以...
独角兽疫苗企业三冲港股IPO:... 疫苗行业独角兽三冲港股IPO了! 在国产疫苗行业持续升级转型的浪潮中,一家坚持技术创新的企业正蓄势待...
A股站上新台阶,看好科技非银接... |2025年7月28日 星期一| NO.1中信建投:A股站上新台阶,看好科技非银接力 中信建投研报表...
中国长安汽车集团挂牌成立,朱华... 7月29日上午,中国长安汽车集团有限公司(以下简称“中国长安”)在重庆挂牌成立。这既是国内第三家汽车...
原创 扒... 懂车帝一场测试,成了智驾领域的“照妖镜”。测试结果触目惊心,无一车型全优通过!那些被吹上天的“遥遥领...
2025年LNG船拆解创纪录,... 2025年,LNG运输船拆解市场迎来爆发式增长,待拆解船成交量创下纪录——这凸显出在现货费率低迷的背...
中国押注电力无限的未来 文|小卢鱼 编辑|杨旭然 中国第99家央企中国雅江集团横空出世,序列号22,位于中国长江三峡集团有限...
多地消协发布上半年消费者投诉情... 7月以来,多地消协陆续发布了2025年上半年消费者投诉情况,从受理情况来看,消费欺诈、虚假宣传、预付...
7.28纯碱日评:纯碱市场交投... 纯碱市场分析 今日国内纯碱市场整体呈现稳中震荡走势,价格跌多涨少。截至目前,华北地区轻质纯碱价格在1...
国家税务总局:我国税收的调节分... 7月28日,国务院新闻办公室举行高质量完成“十四五”规划系列主题新闻发布会,介绍“十四五”时期税收改...
7.29黄金首现四连阴 交易有两个悲剧,一是万念俱灰,另一则是踌躇满志,美丽属于自信者,从容属于有备者,单边属于布局者,这本...
“吃药”行情再爆发,药ETF上... 7月29日早盘,A股“吃药”行情再爆发,制药、医疗联袂拉涨。 国内首只跟踪制药指数的药ETF(562...
上海谊众:7月28日融券卖出2... 证券之星消息,7月28日,上海谊众(688091)融资买入1424.3万元,融资偿还9642.78万...
凌晨重磅,又创新高! 【导读】标普500指数和纳斯达克指数双双创新高,英伟达市值突破4.3万亿美元 见习记者 储是 美东时...
贬值!人民币中间价单日调降48... 北京商报讯(记者 廖蒙)7月28日,中国人民银行授权中国外汇交易中心公布,当日银行间外汇市场人民币汇...
ETF盘中资讯|“吃药”行情再... 7月29日早盘,A股“吃药”行情再爆发,制药、医疗联袂拉涨。 国内首只跟踪制药指数的药ETF(562...
拓山重工连续5涨停后现&quo... 7月29日,拓山重工股价出现剧烈波动。该股以涨停价开盘,延续此前连续涨停态势。开盘后不久,股价突然出...