【第1章】Vue环境搭建

news2024/11/16 3:26:07

文章目录

  • 前言
  • 一、安装Node
    • 1. 下载
    • 2. 安装
    • 3. 验证
      • 3.1 npm版本与Node.js版本
      • 3.2 验证环境
    • 4. npm
      • 4.1 安装npm
      • 4.2 安装包
      • 4.3 全局安装包
      • 4.4 更新包
      • 4.5 删除包
      • 4.6 查看已安装的包
      • 4.7 初始化package.json
    • 5. 国内源
  • 二、安装Visual Studio Code
    • 1.下载
    • 2.安装
    • 3.安装Vue - Official
  • 三、Visual Studio Code自动保存
  • 总结


前言

Vue需要Node环境,开发工具官方推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展。。


一、安装Node

1. 下载

在这里插入图片描述

2. 安装

一路Next,这里可以调整安装路径。

在这里插入图片描述

3. 验证

3.1 npm版本与Node.js版本

在这里插入图片描述
更多对应关系请访问官网

3.2 验证环境

node -v
npm -v

在这里插入图片描述

4. npm

npm(Node Package Manager)是Node.js的包管理器,它允许你安装、更新、删除和管理Node.js应用程序的依赖关系。

4.1 安装npm

当你安装Node.js时,npm通常会作为Node.js的一部分一起被安装。

4.2 安装包

使用npm install <package-name>命令来安装包。

4.3 全局安装包

如果你希望将包安装为全局包(可以在任何地方使用),你可以使用-g或–global选项。

npm install -g <package-name>

4.4 更新包

使用npm update <package-name>命令来更新已安装的包。如果你想要更新所有的包,可以使用npm update

4.5 删除包

使用npm uninstall <package-name>命令来删除已安装的包。

4.6 查看已安装的包

你可以通过查看node_modules目录或运行npm list命令来查看已安装的包。

4.7 初始化package.json

使用npm init命令来初始化一个新的package.json文件,这个文件包含了你的项目的元数据和依赖关系。

5. 国内源

这里我们使用淘宝的源,速度会比较快。

#配置源
npm config set registry https://registry.npm.taobao.org/
#查看配置
npm config get registry

二、安装Visual Studio Code

1.下载

在这里插入图片描述

2.安装

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.安装Vue - Official

打开 Vue - Official 扩展,点击Install
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

或者Ctrl+Shift+x搜索Vue - Official安装
在这里插入图片描述

三、Visual Studio Code自动保存

用习惯了IDEA,文件修改之后它不自动保存,真的难受!
在这里插入图片描述


总结

回到顶部
nodejs
visualstudio

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1812843.html

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

相关文章

Nuxt3 实战 (八):优雅的实现暗黑主题模式

前言 在 Nuxt3 中要实现暗黑模式&#xff0c;需要用到一个库&#xff1a;color-mode&#xff0c;它可以帮助我们很轻易地实现暗黑模式切换。 具体使用 安装 nuxtjs/color-mode 依赖&#xff1a; pnpm add nuxtjs/color-mode -D打开 nuxt.config.ts 配置文件注入依赖&#x…

【Linux】shell脚本变量——系统变量、环境变量和用户自定义变量

系统变量 系统变量是由系统预设的&#xff0c;它们通常在系统启动时被加载&#xff0c;并对所有用户和所有shell实例都有效。这些变量通常控制着系统的行为和配置&#xff0c;例如PATH&#xff08;命令搜索路径&#xff09;、HOME&#xff08;用户主目录&#xff09;等。系统变…

美团强势领涨恒指,港股即将迎来触底反弹?

恒指早间低开低走&#xff0c;持续低位徘徊&#xff0c;一度试探万八关口&#xff0c;最低见17994点&#xff0c;市场情绪表现疲弱&#xff0c;大型科技股普遍走低&#xff0c;但主要指数午后回升&#xff0c;恒生科技指数率先转涨&#xff0c;美团(3690.HK)涨超4%领涨成分股&a…

Java毕业设计 基于springboot vue大学生助学贷款管理系统

Java毕业设计 基于springboot vue大学生助学贷款管理系统 SpringBoot 大学生助学贷款管理系统 功能介绍 学生 登录 注册 个人中心 修改密码 个人信息 助学贷款 申请贷款 放贷信息 还贷信息 公告资讯 学校 登录 注册 个人中心 修改密码 个人信息 助学贷款管理 申请贷款管理 公…

TCP四次挥手全过程详解

TCP四次挥手全过程 有几点需要澄清&#xff1a; 1.首先&#xff0c;tcp四次挥手只有主动和被动方之分&#xff0c;没有客户端和服务端的概念 2.其次&#xff0c;发送报文段是tcp协议栈的行为&#xff0c;用户态调用close会陷入到内核态 3.再者&#xff0c;图中的情况前提是双…

LeetCode:419. 甲板上的战舰(遍历 Java)

目录 419. 甲板上的战舰 题目描述&#xff1a; 实现代码与解析&#xff1a; 遍历 原理思路&#xff1a; 419. 甲板上的战舰 题目描述&#xff1a; 给你一个大小为 m x n 的矩阵 board 表示甲板&#xff0c;其中&#xff0c;每个单元格可以是一艘战舰 X 或者是一个空位 . &…

【机器学习300问】111、解释目标检测的基本概念?

一、目标检测基本概念 &#xff08;1&#xff09;目标检测的定义 目标检测是计算机视觉领域的一项关键任务&#xff0c;它旨在识别图像或视频帧中出现的所有感兴趣目标&#xff08;物体&#xff09;的位置和类别。简而言之&#xff0c;目标检测不仅需要判断图像中存在哪些类型…

LVS – NAT 模式集群构建

目录 1 环境准备 1.1 准备四台服务器 1.2 IP与网关均按照下图配置 1.3 网卡配置 1.4 real server 安装 web服务 1.5 安装ipvsadm 管理工具 2 使用ipvsadm管理LVS 2.1 创建集群指定使用的算法 2.2 添加真实服务器指定工作原理 2.3 查看是否正确创建集群 3 测试 3.1 使用tcpdump…

6.Hugging Face Transformers 快速入门

Hugging Face Transformers 库独特价值 丰富的预训练模型:提供广泛的预训练模型,如BERT、GPT、T5等,适用于各种NLP任务。易于使用:设计注重易用性,使得即使没有深厚机器学习背景的开发者也能快速上手。最新研究成果的快速集成:经常更新,包含最新的研究成果和模型。强大的…

SQL进阶day12——高级条件语句

1筛选限定昵称成就值活跃日期的用户 我的代码&#xff1a;答案不对 select uid,u.nick_name,u.achievement from exam_record er join practice_record pr using(uid) join user_info u using(uid) where u.nick_name like "牛客%号" and u.achievement between …

冯喜运:6.11晚间黄金原油走势如何及独家交易操作策略

【黄金消息面分析】&#xff1a;随着全球经济的波动和地缘政治的紧张&#xff0c;黄金作为传统的避险资产&#xff0c;其市场表现一直备受投资者关注。本文将深入分析黄金市场的即时反应&#xff0c;并结合技术分析&#xff0c;对黄金的未来走势进行预测&#xff0c;同时探讨可…

35.四方定理

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动&#xff0c;旨在激发青少年对学习人工智能与算法设计的热情与兴趣&#xff0c;提升青少年科学素养&#xff0c;引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/477 题目背…

CyberDAO:引领Web3时代的DAO社区文化

致力于Web3研究和孵化 CyberDAO自成立以来&#xff0c;致力于推动Web3研究和孵化&#xff0c;吸引了来自技术、资本、商业、应用与流量等领域的上千名热忱成员。我们为社区提供多元的Web3产品和商业机会&#xff0c;触达行业核心&#xff0c;助力成员捕获Web3.0时代的红利。 目…

82. 删除排序链表中的重复元素 and II

链接直达&#xff1a; 保留重复元素 不保留重复元素 题目&#xff1a; 1: 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。示例 1&#xff1a;输入&#xff1a;head [1,1,2] 输出&#xff1a;[1…

《数据结构与算法之美》学习笔记二

前言&#xff1a;本篇文章介绍了一下二叉树中的基本知识点&#xff0c;包括二叉树的种类、二叉树的存储方式以及二叉树的深度和广度优先遍历&#xff1b;以及《数据结构与算法》中对于数组的讲解记录&#xff0c;只记录了本前端能看懂的&#x1f913;&#xff0c;还有很多知识点…

codeanalysis服务端Windows环境运行

1、在每个微服务中创建log文件夹 2、

接口+接口自动化测试疑难解答,一篇带你策底打通...

前言 1、你们做接口测试的流程一般是怎么样的&#xff1f; 接口测试的流程其实和功能测试的流程类似&#xff0c;因为接口测试依赖的主要对象也是需求说明书&#xff0c;所以&#xff0c;最初的流程就是参与需求讨论&#xff0c;评审需求。 需求确定以后&#xff0c;开发会根…

蚁群算法的优化计算——旅行商问题(TSP)优化matlab

微♥关注“电击小子程高兴的MATLAB小屋”获得资料 一&#xff0c;理论基础 生物学家研究发现&#xff0c;蚂蚁在寻找食物时&#xff0c;会在其经过的路径上释放一种信息素&#xff0c;并能够感知其他蚂蚁释放的信息素。信息素浓度的大小表示路径的远近&#xff0c;浓度越高&a…

大众点评全国宠物店铺POI采集13万家-2024年5月底

大众点评全国宠物店铺POI采集13万家-2024年5月底 店铺POI点位示例&#xff1a; 店铺id iJLEF6dlJjeeUum4 店铺名称 联合动物医院(汉口总院) 十分制服务评分 9.3 十分制环境评分 9.2 十分制划算评分 9.3 人均价格 679 评价数量 4879 店铺地址 解放大道1725附2号&#x…

catia展开模型树

1 直接点号 2 选中零件&#xff0c;右击--命令--将图居中即可 一般都是上面这样有选择性的展开 如果要一次性都展开那