【第1章】Vue环境搭建

文章目录

  • 前言
  • 一、安装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.mfbz.cn/a/699421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【品质】如何培养幽默感,如何幽默的沟通与应对生活(自卑vs自信,悲观vs乐观)

【品质】如何培养幽默感&#xff0c;如何幽默和正能量的沟通与应对生活&#xff08;自卑vs自信&#xff0c;悲观vs乐观&#xff09; 文章目录 一、性格底色&#xff08;自我认知&#xff0c;世界观&#xff09;1、从悲观的底色开始2、用摆烂、自嘲的方式与世界和解 二、沟通方法…

同余式,乘法逆元,费马小定理

同余式 同余式是 数论 的基本概念之一&#xff0c;设m是给定的一个正整数&#xff0c;a、b是整数&#xff0c;若满足m| (a-b)&#xff0c;则称a与b对模m 同余 &#xff0c;记为a≡b (mod m)&#xff0c;或记为a≡b (m)。 这个式子称为模m的同余式&#xff0c;若m∤ (a-b)&…

express入门02静态资源托管

目录 1 搭建静态资源结构2 代码助手3 多目录托管4 服务器热启动总结 上一篇我们讲解了使用express搭建服务器的过程&#xff0c;服务器搭建好了之后&#xff0c;除了在地址栏里输入URL发起get请求或者post请求外&#xff0c;通常我们还需要访问静态资源&#xff0c;比如html、c…

LabVIEW程序内存泄漏分析与解决方案

维护他人编写的LabVIEW程序时&#xff0c;若发现程序运行时间越长&#xff0c;占用内存越大直至崩溃&#xff0c;通常是内存泄漏导致的。本文从多角度分析内存泄漏的可能原因&#xff0c;包括数组和字符串处理、未释放的资源、循环中的对象创建等&#xff0c;并提供具体的解决方…

Linux-笔记 设备树插件

前言&#xff1a; 设备树插件&#xff08;Device Tree Blob Overlay&#xff0c;简称 DTBO&#xff09;是Linux内核和嵌入式系统中用于动态修改或扩展系统运行时的设备树配置的一种机制。它是对传统设备&#xff08;Device Tree Source&#xff0c;简称 DTS&#xff09;的补充&…

Nextjs 集成富文本编辑器react-quill

目录 一、组件代码 二、参考文档 由于Next与react有些差别&#xff0c;直接调用组件会报无法找到文档的错误&#xff0c;于是我们只有考虑动态导入了解决问题。因为富文本编辑器一般作用与form页面对SEO意义不大&#xff0c;所以这里可以考虑暂时关闭SSR。 一、组件代码 /*…

推荐系统学习笔记(五)-----双塔模型

目录 双塔模型 训练 pointwise训练 pairwise训练 listwise训练 双塔模型 矩阵补充模型只用到了用户id和物品id&#xff0c;其余属性没有用上 用户属性也可以这样处理 用户塔和物品塔各输出一个向量&#xff0c;两个向量的余弦相似度作为兴趣的预估值 训练 第一种&#x…

麦稻同框丰收忙,食家巷美味之旅

在夏收时节&#xff0c;金色的麦浪随风翻滚&#xff0c;洋溢着丰收的喜悦。而在这丰收的背后&#xff0c;食家巷以其独特的产品&#xff0c;为人们带来了一场与麦稻有关的美味盛宴。 传统的烤馍&#xff0c;带着麦子烘焙后的醇厚香气。用心挑选的原料&#xff0c;经过精…

如何用二维码进行来访登记?这个模板帮你轻松实现!

在工厂、学校、写字楼、建筑工地等人员出入频繁的场所&#xff0c;使用传统的纸质登记方法容易造成数据丢失&#xff0c;而且信息核对过程繁琐&#xff0c;效率低下。 可以用二维码代替纸质登记本&#xff0c;访客进入时扫码就能登记身份信息&#xff0c;能够提高门岗访客管理…

气膜建筑在体育和娱乐行业的多样化应用—轻空间

随着人们生活水平的提高和健康意识的增强&#xff0c;体育和娱乐行业的发展迎来了新的机遇和挑战。气膜建筑&#xff0c;作为一种新型建筑技术&#xff0c;因其独特的优势和广泛的应用场景&#xff0c;正在引领体育和娱乐行业的新潮流。 快速建设高品质体育场馆 气膜建筑以其快…

护眼台灯怎么选?保护孩子视力看这些标准!

如果家中孩子最近开始出现“眯眼”的行为&#xff0c;那么家长们就要格外注意了&#xff01;孩子很可能会出现近视的情况&#xff0c;要注意观察学习写作业的光线以及用眼姿势习惯&#xff0c;同时可以及时就医检测。如今&#xff0c;孩子的学习负担越来越大&#xff0c;孩子的…

qt-C++笔记之命令行生成项目pro文件(极简编译qt项目代码)

qt-C笔记之命令行生成项目pro文件(极简编译qt项目代码) 文章目录 qt-C笔记之命令行生成项目pro文件(极简编译qt项目代码)步骤 1&#xff1a;生成项目文件步骤 2&#xff1a;生成 Makefile 文件步骤 3&#xff1a;编译程序详细解释注意事项项目结构main.cpp 文件生成项目文件生成…

【Mac】Premiere Pro 2024 for Mac v24.1软件介绍和安装教程

软件介绍 Premiere Pro是一款专业的视频编辑软件。它被广泛应用于电影、电视和网络视频的制作和编辑&#xff0c;具备强大的功能和灵活的工作流程&#xff0c;适用于从初学者到专业人士的各种需求。以下是对Premiere Pro的一些详细介绍&#xff1a; 主要特点 多轨道时间线编…

据阿谱尔APO Research统计显示,2023年全球有机硅弹性体凝胶市场销售额约为2.1亿美元

根据阿谱尔 (APO Research&#xff09;的统计及预测&#xff0c;2023年全球有机硅弹性体凝胶市场销售额约为2.1亿美元&#xff0c;预计在2024-2030年预测期内将以超过4.17%的CAGR&#xff08;年复合增长率&#xff09;增长。 有机硅弹性体凝胶是一类具有独特性质和广泛应用领域…

[论文笔记]Query Rewriting for Retrieval-Augmented Large Language Models

引言 今天带来论文Query Rewriting for Retrieval-Augmented Large Language Models的笔记。 本篇工作从查询重写的角度介绍了一种新的框架&#xff0c;即重写-检索-阅读&#xff0c;而不是以前的检索-阅读方式&#xff0c;用于检索增强的LLM。关注的是搜索查询本身的适应性&…

Java二维数组的定义以及使用

二维数组 1.二维数组的定义格式 1.概述:数组中的套多个数组 2.定义格式a.动态初始化数据类型[][] 数组名 new 数据类型[m][n]数据类型 数组名[][] new 数据类型[m][n]数据类型[] 数组名[] new 数据类型[m][n]m:代表的是二维数组的长度n:代表的是二维数组中每一个一维数组的…

20240607在ubuntu下解压缩7z的压缩包文件

20240607在ubuntu下解压缩7z的压缩包文件 2024/6/7 10:26 百度&#xff1a;ubuntu 7z解压缩 在Ubuntu中&#xff0c;可以使用7z命令来解压.7z文件。首先&#xff0c;确保你已经安装了p7zip-full包&#xff0c;如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; sudo …

力扣每日一题 6/11

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 419.甲板上的战舰[中等] 题目&#xff1a; 给你一个大小为 m x n 的矩阵 b…

图形和插图软件Canvas X Pro 20 Build 914

Canvas X Pro是一款功能强大、用途广泛的Windows软件,旨在处理技术图形和可视化,该程序结合了创建矢量和光栅图形的工具,这使其成为需要创建高质量技术插图和演示文稿的工程师、设计师、科学家和其他专业人士的理想选择。 Canvas X Pro的主要功能之一是支持处理大型和复杂的…