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.mzph.cn/diannao/56281.shtml

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

相关文章

模电板测试分析报告【运放直流偏置电路】

测试方法:输入一个1K正弦波,调节R80观看是否进行偏置调节。 需要接正负电源。 按照这个计算公式,信号在第二极被放大了11倍。 这么看的话第一级也被放大了10倍: R79是用来调节增益的,R80是用来调节偏置的: 芯片介绍&a…

大学生入学审核系统(论文+源码)_kaic

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了大学生入学审核系统的开发全过程。通过分析大学生入学审核系统管理的不足,创建了一个计算机管理大学生入学审核系统的方案。文章介绍了大学生入学审核…

【C语言】你不知道的知识小盲区——柔性数组

文章目录 一、什么是柔性数组二、柔性数组的特点三、柔性数组的使用四、柔性数组的优势 一、什么是柔性数组 也许你从来没有听说过柔性数组(flexible array)这个概念,但是它确实是存在的。在C99标准中,如果结构体的最后一个成员是…

Spring Integration + MQTT

1. 简介 Spring Integration: Spring Integration是一个开源的Java库,用于构建基于消息的应用程序。它提供了一套丰富的组件和工具,使得开发者可以轻松地开发出可靠、灵活和可扩展的集成解决方案。以下是Spring Integration的一些主要用途&…

jenkins 插件Publish Over SSH

一、安装插件 二、配置sshserver http://192.168.31.156:8080/manage/configure 三、添加自由风格:PublishOverSSHDemo 我们将工作目录:/var/lib/jenkins/workspace/PublishOverSSHDemo下的图片m3.jpeg 同步到目标143服务器目录:/root/imag…

SQL分类中的DDL

DDL(Data Definition Language):数据定义语言,用来定义数据库对象(数据库,表,字段)。 一、DDL语句操作数据库 1、查询所有数据库:show databases;(一般用大写&#xff…

OpenCV-人脸检测

文章目录 一、人脸检测流程二、关键方法三、代码示例四、注意事项 OpenCV是一个开源的计算机视觉和机器学习软件库,它提供了多种人脸检测方法,以下是对OpenCV人脸检测的详细介绍: 一、人脸检测流程 人脸检测是识别图像中人脸位置的过程&…

【Docker系列】Docker查看镜像架构

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

模态与非模态的对话框

本文学习自&#xff1a; 《Qt Creato快速入门》 #include "widget.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); }1. #include "widget.h" #include "ui_w…

MySQL数据的导入

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…

小白也能学会的预测新模型!ReliefF特征选择+XGBoost回归!

小白也能学会的预测新模型&#xff01;ReliefF特征选择XGBoost回归&#xff01; 目录 小白也能学会的预测新模型&#xff01;ReliefF特征选择XGBoost回归&#xff01;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现ReliefF-XGBoost多变量回归预测 1.excel数据…

有问必答!zabbix“专家坐诊”第259期问答

问题一 Q&#xff1a;现在监控项4万多&#xff0c;调整到多少比较合理 zabbix7.03&#xff1f; A&#xff1a;慢慢往上调&#xff0c;没有标准。 问题二 Q&#xff1a;想问下大家&#xff0c;zabbix的监控项怎么不能自动清除&#xff0c;比如说这次监控是A监控项&#xff0c;下…

如何通过构建对应的api服务器使Vue连接到数据库

一、安装数据库驱动 在后端安装 MySQL 数据库驱动&#xff0c;比如在 Node.js 环境中可以使用 mysql2 包来连接 MySQL 数据库。在项目目录下运行以下命令安装&#xff1a; npm install mysql2或者使用 yarn&#xff1a; yarn add mysql2二、创建数据库连接模块 创建一个专门…

Light灯光组件+组件的相关操作+游戏资源的加载

Light灯光组件 Type: Directional:平行光&#xff0c;模仿的是太阳光 Spot:聚光灯 Area:区域光 Color&#xff1a; 颜色值 Mode: RealTime:实时 Mix:混合 Baked:烘焙 Intersity: 光照强度 Indirect Multiplier:光照强度乘数 Shadow Type:影子设置&#xff1a;…

Java通过RAG构建专属知识问答机器人_超详细

RAG&#xff1a;融合检索与生成的文本精准生成技术 检索增强生成&#xff08;RAG&#xff09;是一种技术&#xff0c;它通过结合检索模型和生成模型来提高文本生成的准确性。具体来说&#xff0c;RAG首先利用检索模型从私有或专有的数据源中搜索相关信息&#xff0c;然后将这些…

智能优化算法-水循环优化算法(WCA)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1.内容介绍 水循环优化算法 (Water Cycle Algorithm, WCA) 是一种基于自然界水循环过程的元启发式优化算法&#xff0c;由Shah-Hosseini于2012年提出。WCA通过模拟水滴在河流、湖泊和海洋中的流动过程&#xff0c;以及蒸发…

【load_file读文件】

一、文件操作基础 show 先试试 show variables;发现显示了三百多行的系统变量: 这是数据库的目录&#xff1a; mysql有多种编码方式&#xff0c;有数据库编码、连接时的编码、还有客户端的编码&#xff1a; 这里还有一个日志路径&#xff0c;这个日志是需要手动打开的&#…

CSMA/CA协议

802.11局域网在使用CSMA/CA的同时&#xff0c;还使用确认重传&#xff08;ARQ&#xff09;。这是因为无线信道的通信质量远不如有线信道的&#xff0c;因此无线站点每通过无线局域网发送完一帧后&#xff0c;要等到收到对方的确认帧后才能继续发送下一帧。这就是链路层确认。 帧…

C语言笔记 12

逻辑类型 bool&#xff1a;在“#include <stdbool.h>”之后就可以使用bool和true、false 并没有真正的bool量的类型 逻辑运算 逻辑运算是对逻辑量进行的运算&#xff0c;结果只有0或1逻辑量是关系运算或逻辑运算的结果 运算符描述示例结果!逻辑非!a如果a是true结果就是…

ARP欺骗的多种手法

学习参考&#xff1a; ARP欺骗的各种d玩法-CSDN博客 https://juejin.cn/post/7383702153892954164 一、什么是ARP欺骗 1.什么是ARP&#xff1f; ARP (Address Resolution Protocol) 是一种网络层协议&#xff0c;用于将 IP 地址转换为物理地址&#xff08;MAC 地址&#xff0…