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,一经查实,立即删除!

相关文章

【知识科普】单元测试框架TestNG介绍

文章目录 TestNG概述常用注解说明springboot项目集成比较完整的示例步骤 1: 创建被测试的类步骤 2: 编写TestNG测试用例步骤 3: 运行测试步骤 4: 查看测试报告 TestNG概述 TestNG是一个开源的自动化测试框架,它在JUnit和NUnit的基础上增加了很多强大的功能&#xf…

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

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

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

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

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

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

Spring Integration + MQTT

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

电话聊天狂人

给定大量手机用户通话记录,找出其中通话次数最多的聊天狂人。 输入格式: 输入首先给出正整数N(≤105),为通话记录条数。随后N行,每行给出一条通话记录。简单起见,这里只列出拨出方和接收方的11位数字构成…

jenkins 插件Publish Over SSH

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

Python脚本爬取目标网站上的所有链接

一、爬取后txt文件保存 需要先pip install requests和BeautifulSoup库 import requests from bs4 import BeautifulSoup# 定义要爬取的新闻网站URL url https://www.chinadaily.com.cn/ # China Daily 网站# 发送请求获取页面内容 response requests.get(url)# 检查请求是否…

Jgit的使用

Jgit的使用 文章目录 Jgit的使用一,git操作的对应代码1.1 查看操作1.1.1 打开仓库1.1.3 获取状态信息 1.2 添加操作1.2.1 初始化本地仓库1.2.2 创建一个新文件并写入内容1.2.3 添加指定(所有)文件到暂存区1.2.4 提交操作1.2.5 连接并推送到远…

Android中的三种数据存储方式

目录 1.文件存储 1)内部存储 1--MODE_PRIVATE: 2--MODE_APPEND: 3--MODE_WORLD_READABLE: 4--MODE_WORLD_WRITEABLE: 5--简单使用 3)外部存储 4)内部读取 4)外部读取 2.SharePreferences存储 1)基本概念 2&#xff09…

设计模式 - 行为模式

行为模式 观察者模式,策略模式,命令模式,中介者模式,备忘录模式,模板方法模式,迭代器模式,状态模式,责任链模式,解释器模式,访问者模式 保存/封装 行为/请求…

MySQL表连接查询算法

前言 MySQL属于关系型数据库,我们建的表大多也都存在业务上的关联关系,同时我们又不可能将所有的数据都冗余一份,这不符合数据库的设计范式。因此,当我们需要把多张表的数据融合在一起的时候,就需要使用到「多表连接查…

CSS伪元素详解

CSS伪元素详解 一、引言 在CSS中,伪元素是一个非常强大的工具,它允许我们为元素的特定部分添加样式,而无需修改HTML结构。这不仅提高了样式的灵活性,还有助于保持代码的整洁和可维护性。本文将深入探讨CSS伪元素的使用方法和一些…

详解tar.gz, tar.xz, tar, gz后缀文件的区别

详解tar.gz, tar.xz,tar, gz后缀文件的区别 tar.gz、tar.xz、tar 和 gz 是常见的文件压缩与归档格式,它们的区别主要在于文件的归档和压缩方式。 1. tar 文件 全称:Tape Archive扩展名:.tar说明:tar 文件本身并没有压缩&#x…

SQL分类中的DDL

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

C语言动态内存开辟

文章目录 malloc函数free函数calloc函数realloc函数二维数组的动态内存开辟 malloc函数 malloc函数包含再#include<stdlib.h>头文件中 void* malloc (size_t size);这个函数向内存申请⼀块连续可⽤的空间&#xff0c;并返回指向这块空间的指针。 如果开辟成功&#xff…

OpenCV-人脸检测

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

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

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐: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数据库技术_夏天又到了…