Vue工程化结构环境安装及搭建教程 : 之nvm

vue需要的环境:

node.js :

Node.js和Vue.js通常会一起使用。Node.js作为后端服务器,处理服务器端的逻辑和数据访问,而Vue.js则负责前端用户界面的构建和交互。通过Ajax通信,Vue.js应用程序向Node.js服务器发送请求,并使用服务器返回的数据更新UI。这种前后端分离的方式提高了Web应用程序的可维护性和可扩展性。

npm:

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,主要用来安装vue项目需要的一些包和资源,运行项目也要用到npm

vue-cli脚手架:

Vue脚手架是用于快速构建Vue.js项目的工具。它提供了一系列的命令和模板,可以帮助开发者快速搭建项目的基础结构,提高开发效率。搭建项目的框架

webpack:

webpack是一个前端构建工具,主要用于代码的打包和优化

我们主要使用nvm来管理node.js的版本,它是一个版本管理工具,可以方便随时切换。有些时候运行别人的项目的时候,和自己的node版本不一样,就运行不出来,这时候就需要重新换它项目开发时候的版本了,直接安装node.js太麻烦了,每次切换版本都要卸载然后重新装,配置环境。

nvm安装教程:

进入下载地址:            


https://github.com/coreybutler/nvm-windows/releases

windows系统下载nvm-setup.zip安装包

在这里插入图片描述

2. NVM安装

如果电脑上之前已经单独安装了node,先卸载删除(原先的环境变量也不需要了可以删除),然后解压nvm-setup.zip安装包,进入解压的文件夹,双击exe后缀文件进行安装:

在这里插入图片描述

选择nvm的安装路径:

在这里插入图片描述

选择nodejs的快捷方式路径(这里一定得是空文件夹或者不创建这个文件夹,因为nvm会自动创建这个文件夹为快捷方式):

在这里插入图片描述

下一步后确认安装即可

验证

安装完成后查看环境变量会发现新增了NVM_HOME(nvm安装路径)和NVM_SYMLINK(nvm自动创建的nodejs文件夹的快捷方式路径),如下图:

在这里插入图片描述

在命令行窗口输入nvm后有如下图信息证明安装成功:

三、NVM使用

注意:nvm在切换node版本时需要系统的管理员权限,所以需要以管理员身份打开命令行窗口!!!

1. 设置nvm环境

nvm默认会从github下载npm,可能会有网络问题,所以最好设置为淘宝镜像。nvm的配置也很简单,可以采用命令方式,在shell中执行:

1

2

nvm node_mirror https://npm.taobao.org/mirrors/node/

nvm npm_mirror https://npm.taobao.org/mirrors/npm/

或者直接修改配置文件(在nvm安装路径下的settings.txt),如下图:

在这里插入图片描述

2.安装nodejs

直接命令行执行(v6.9.4可以替换为需要安装的版本,此处仅做示例):

1

nvm install v20.1.0

安装成功

执行nvm list查看效果如下:

3.使用或切换nodejs版本

nvm use 20.1.0

4.全局安装vue

npm install vue -g

                

5.安装webpack(非必须)

npm install webpack -g

npm install webpack-cli -g

6.安装脚手架vue-cli

npm install vue-cli -g

7.创建一个vue应用程序

vue create my-project

cd my-project

运行项目命令:

npm run dev  (vue2)

npm run serve  (vue3)

 查看vue版本的命令--npm list vue

说明这是vue3

vue  ui  命令  是打开vue的图形化界面进行项目管理

查看node.js版本

查看vue脚手架版本

查看npm版本

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

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

相关文章

扩展、包含、泛化-系统架构师(七十七)

1()是系统分析阶段结束后得到的工作产品,()是系统测试阶段完成后的工作产品。 问题1 A系统设计规格说明 B系统方案建议书 C系统规格说明 D单元测试数据 问题2 A验收测试计划 B测试标准 C系统测试计划 D操作手…

基于STM32单片机的配电室环境监测系统

本设计了一个基于STM32单片机的配电室环境监测系统。该系统可以实现配电室环境温湿度检测、烟雾浓度检测和火焰信息检测,这主要是为了防止火灾发生;本系统还加入了红外人体检测模块,可以检测配电室周围是否有行人经过,最终将传感器…

极狐GitLab 发布安全补丁版本 17.4.1、17.3.4、17.2.8

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料: 极狐GitLab 官网极狐…

Autodesk Flame 2025:视觉特效制作解决方案

Autodesk Flame 2025是一款功能强大的视觉特效制作解决方案,由Autodesk公司开发。它提供了出色的性能,为视觉特效艺术家成功完成制作项目提供了所需的交互性和灵活性。 以下是Autodesk Flame 2025的一些主要特点和功能: 高效的三维合成环境&…

基于BERT的深度强化学习求解图上的组合优化问题(未完)

文章目录 Abstract1 Introduction2 文献综述2.1 相关的深度学习方法2.2 基于强化学习的方法3 Methodology3.1 问题定义和预备知识3.2 策略网络架构Abstract 组合优化,如图上的车辆路径和旅行商问题,是NP-hard问题,几十年来一直被研究。已经提出了许多方法来解决这些问题,包…

SSM高校体育器材管理系统-计算机毕业设计源码48197

摘 要 如今计算机行业的发展极为快速,搭载于计算机软件运行的数据库管理系统在各行各业得到了广泛的运用,其在数据管理方面具有的准确性和高效性为大中小企业的日常运营提供了巨大的帮助。在高校体育器材管理系统中,一开始对体育器材的管理…

python迭代器和生成器区别是什么

python中迭代器和生成器的区别 1、共同点 生成器是一种特殊的迭代器。 2、不同点 a、语法上: 生成器是通过函数的形式中调用 yield 或()的形式创建的。 迭代器可以通过 iter() 内置函数创建。 b、用法上&#x…

加密软件有哪些?2024年十大好用的企业文件加密软件大盘点

随着数字化转型的加速,企业面临的数据安全威胁日益增加。为防止敏感数据泄露,企业文件加密已成为保护公司机密信息的必要手段。以下是2024年十大好用的企业文件加密软件大盘点,帮助企业在复杂的数字环境中确保数据安全。 1.安秉加密软件 安秉…

WPF中的内容控件

控件分类 在第一篇文章.Net Core和WPF介绍中的WPF的功能和特性部分根据功能性介绍了WPF的控件 名称。 在接下来的文章中,将会详细的介绍各个控件的概念及使用。 主要包括: 内容控件:Label、Button、CheckBox、ToggleButton、RadioButton、…

几何建模基础-拓扑结构介绍

1.什么是拓扑? 拓扑是研究几何图形或空间在连续改变形状后还能保持不变的一些性质的一个学科。它只考虑物体间的位置关系而不考虑它们的形状和大小。 Body对象的拓扑可以理解为面(Face)与边(Edge)、边( E…

fmql之Linux设备驱动框架

设备驱动框架 正点原子第39章---LED驱动框架 测试 成功: 贴代码 (不需要测试APP) /***************************************************************Copyright © ALIENTEK Co., Ltd. 1998-2029. All rights reserved.文件名 : le…

Copilot重磅更新!OneDrive全新功能炸裂

今天早上一打开onedrive,就发现了弹窗提醒,它,终于来了: copilot in onedrive全新功能来袭! 当我们在onedrive中随意选择一个文件,顶部功能栏便出现了copilot按钮: 点击按钮后出现三个选项&…

Tauri 2.0 稳定版发布

Tauri 2.0 稳定版发布 Tauri 是什么? Tauri 应用程序的前端使用您喜欢的 Web 前端栈编写。它在操作系统的 WebView 中运行,并与主要用 Rust 编写的应用核心进行通信。 我何时应该使用 Tauri? 如下任一一项符合,你应该使用 Ta…

立体扬声器棒球帽专利TRO维权,速查避免踩坑

案件基本情况起诉时间:2024-9-18案件号:24-cv-08626原告:Audiowear Technology Corporation原告律所:Loza & Loza, LLP起诉地:伊利诺伊州北部法院品牌介绍Audiowear Technology Corporation,一家位于特…

SpringMVC框架:入门讲解和基础案例解析

Spring Web MVC是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架。使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型 。框架的目的就是帮助我们简化开发&…

嵌入式设备硬件和软件安全设计

1. 引言 哪个领域的网络安全实施记录最差? 既不是 PKI/数字证书,也不是 密钥管理,也不是 OAuth。很可能是嵌入式设备和物联网 领域。 总的来说,这似乎是一个梦想,但如果可设计出“设计安全”的系统,而不…

DHCP Snooping典型配置举例(如何防止路由器乱接问题)

全局开启DHCP Snooping配置举例 组网需求 Router B通过以太网端口Ten-GigabitEthernet0/0/6连接到合法DHCP服务器,通过以太网端口Ten-GigabitEthernet0/0/8连接到非法DHCP服务器,通过Ten-GigabitEthernet0/0/7连接到DHCP客户端。要求: 与合…

各省常住人口及人口密度面板数据(2000-2022年)

常住人口指在某地区居住超过一定时间(通常为半年以上)的人口,而人口密度则指每平方千米或每公顷内的常住人口数。数据集的主要指标包括: 省份年份常住人口(万人)人口密度(人/平方公里&#xff…

每日学习一个数据结构-图

文章目录 图基础一、图的定义二、图的相关概念三、图的分类四、图的使用场景 和图相关的算法一、图的遍历算法二、最短路径算法三、最小生成树算法四、图匹配算法五、网络流算法 图基础 一、图的定义 在数学中,图是描述于一组对象的结构,其中某些对象对…

宠物咖啡馆业务自动化:SpringBoot框架的实现方法

3系统分析 3.1可行性分析 通过对本基于Spring Boot的宠物咖啡馆平台的设计与实现实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于Spring Boot的宠物咖啡馆…