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

news2024/10/11 16:58:57

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.coloradmin.cn/o/2205286.html

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

相关文章

Collection 集合框架

Collection 集合框架 各类集合 Set TreeSet 基于红黑树实现,支持有序性操作,例如根据一个范围查找元素的操作。但是查找效率不如 HashSet,HashSet 查找的时间复杂度为 O(1),TreeSet 则为 O(logN)。 HashSet 基于哈希表实现&…

Python入门笔记(四)

文章目录 第九章 集合set9.1 创建集合:set()、集合生成式9.2 集合性质9.3 一些函数:issubset()、issuperset()、isdisjoint()9.4 集合增加元素:add()、update()9.5 集合删除元素:remove()、discard()、pop()、clear()9.6 创建不能…

ELM分类预测 | MATLAB实现ELM极限学习机多特征分类预测(二分类)

分类预测 | MATLAB实现ELM极限学习机多特征分类预测(二分类) 目录 分类预测 | MATLAB实现ELM极限学习机多特征分类预测(二分类)效果一览基本介绍程序设计学习总结参考资料效果一览 训练集正确率Accuracy = 89%(445/500) 测试集正确率Accuracy = 86.9565%(60/69) 基本介绍 MATLA…

《RabbitMQ篇》消费者轮询消费消息

当有多个消费者都在同一个队列中拿取消息时,会轮询从队列中拿取消息消费。 RabbitMQUtil类为工具类,获取Channel。 import com.rabbitmq.client.Channel; import com.rabbitmq.client.Connection; import com.rabbitmq.client.ConnectionFactory;public…

基于SSM的线上学习网站【附源码】

基于SSM的线上学习网站(源码L文说明文档) 目录 4 系统设计 4.1 系统结构设计 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 管理员模块的实现 5.1.1 学生信息管理 5.1.2 教…

亚马逊云科技生成式 AI 认证正式上线!

为了更好帮助大家在人工智能领域入门及快速成长,助力企业发掘优秀人工智能人才,亚马逊云科技推出 AWS Certified AI Practitioner 认证,涵盖人工智能领域的必备技能、前沿技术和实践经验。 通过该认证,你将掌握设计考虑、RAG&…

大傻工具提示:没有找到c:\windows\system32\msrd3x43.dll

解决办法: 1、不用理会它,对串口工具运行没有任何影响。就算你下载了也没用,依然会有提示。 2、右键以管理员身份运行就不报错了。

医学大模型微调·数据处理全流程:炼丹,是自我超越的方法

医学大模型微调数据处理全流程:炼丹,是自我超越的方法 数据清洗脚本数据标注数据核验转为微调格式随机化 数据清洗脚本 HTML标签移除 去除文本中的所有HTML标签,保留纯文本内容。 特殊字符处理 替换特殊数字符号(如①②③&#x…

如何保护源代码?十种有效方法实现源代码防泄密

在数字化时代,源代码的安全保护对于企业来说至关重要。源代码不仅是企业技术创新的成果,更是其核心竞争力的体现。一旦源代码泄露,不仅可能导致企业丧失市场优势,还可能引发知识产权纠纷、增加竞争对手的市场竞争力,甚…

k8s 1.28.2 集群部署 MinIO 分布式集群

文章目录 [toc]MinIO 介绍MinIO 生产硬件要求MinIO 存储要求MinIO 内存要求MinIO 网络要求MinIO 部署架构分布式 MinIO复制的 MinIO 部署 MinIO创建目录节点打标签创建 namespace创建 pv创建 MinIO配置 ingress问题记录通过代理服务器访问 MinIO 的 Object Browser 界面一直显示…

用echarts画天气预报

如图 上代码 <template><div id"temp15day"></div> </template><script setup> import * as echarts from "echarts"; const initChart () > {const machart echarts.init(document.getElementById("temp15day&q…

如何选择最合适的华为云数据库:指南与建议

在数字化转型的浪潮中&#xff0c;选择合适的数据库是企业成功的关键。华为云提供了多种数据库服务&#xff0c;以满足不同业务需求。以下是九河云总结的一些指南和建议&#xff0c;帮助您选择最合适的华为云数据库。 1. 了解业务需求 在选择数据库之前&#xff0c;首先需要了…

西米:未来的支付还能做吗?

未来支付行业还能做吗&#xff1f;一直是在洗牌&#xff0c;一直让你有上场的机会&#xff0c;做一个行业&#xff0c;最好的时间是行业刚刚开始&#xff0c;市场相对空白&#xff0c;跑马圈地&#xff0c;广撒网&#xff0c;利用时差赚钱&#xff0c;这是最好的时间。 另外&a…

【Kubernets】容器网络基础二:通讲CNI(Container Network Interface)容器网络接口实现方案

文章目录 背景知识Underlay网络Overlay网络一、基本概念二、工作原理三、实现方案四、应用场景 两者对比示意图 CNI实现有哪些&#xff1f;FlannelFlannel 的工作原理Flannel 的主要组件数据传输机制总结 Calico一、架构基础二、核心组件与功能三、路由与数据包转发四、安全策略…

Java微信支付接入(4) - API V3 API字典和相关工具

1. API列表 Native下单 - Native支付 | 微信支付商户文档中心 (qq.com) 以下是微信提供的 Native 支付的相关 API 微信提供了详细的请求接口和参数 2.接口规则 概述 - 通用规则 | 微信支付商户文档中心 (qq.com) 微信支付 APIv3 使用 JSON 作为消息体的数据交换格式。 JSO…

jupyterlab的安装与使用攻略

官网链接 Project Jupyter | Home 1.第一步安装 打开控制台 使用pip工具安装 pip install jupyterlab 如图 2.安装成功后启动 jupyter lab 会自动启动它的web页面 然后就可以正常使用咯&#xff01;&#xff01; 如果需要更换浏览器访问 新开控制台执行下面命令 jupy…

PowerJob做定时任务调度

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、区别对比二、使用步骤1. 定时任务类型2.PowerJob搭建与部署 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; PowerJob是基于java开…

文件夹访问被拒绝:深度解析、恢复策略与预防指南

一、文件夹访问被拒绝现象概述 在日常的电脑使用中&#xff0c;我们时常会遇到文件夹访问被拒绝的情况。这一现象通常表现为在尝试打开某个文件夹时&#xff0c;系统弹出权限不足的提示&#xff0c;阻止用户进行访问或操作。文件夹访问被拒绝不仅会影响用户的正常使用&#xf…

KingbaseES数据库迁移-SHELL方式

目录说明 bin: 启动脚本 conf: 配置文件 doc: 帮助文档 drivers: 数据库连接驱动&#xff08;注意不同版本驱动的存放目录差别&#xff0c;详见readme.md&#xff09; jdk: jdk kdms: kdms程序 lib: 程序包 logs: 日志 result: 迁移报告 配置数据库连接信息 进入KDT…

FTP连接池与多线程FTP上传下载算法(Java)

设计一个能够处理FTP连接池在多线程环境下,尤其是涉及到故障重连时避免竞争条件的算法,需要综合考虑线程同步、连接状态管理和重试机制。以下是一个设计思路和实现方案: 设计思路 连接池管理: 维护一个连接池,其中包含多个FTP连接对象。每个FTP连接对象需有状态标记(如…