NVM安装及VUE创建项目的N种方式

VUE 参考官网:https://cli.vuejs.org/zh/guide/

目录

NVM安装

1.卸载node.js

2.安装nvm

​编辑​

3.配置

4.使用nvm安装node.js

5.nvm常用命令

创建VUE项目

1.使用vue init 创建vue2(不推荐)

2.使用vue create创建vue2和3(较推荐)

3.使用npm create vue创建vue2和3

4.使用npm create vite创建(推荐)

5.使用vue ui 创建(推荐)


 

NVM安装

我们开发过程中常常遇到nodejs版本不适配的问题,需要切换到不同版本的nodejs,nodejs卸载安装麻烦,这就需要用到nvm了。

nvm 全名 node.js version management

顾名思义是一个node.js的版本管理工具。通过它可以安装和切换不同版本的nodejs。

1.卸载node.js

为了确保彻底删除node在看看你的node安装目录中还有没有node文件夹,有的话一起删除。再看看C:\Users\用户名 文件夹下有没有.npmrc以及.yarnrc等等统统删除。再去看看你的环境变量有没有node相关的,有的话也一起删除了。一定要卸载干净!

2.安装nvm

 Releases · coreybutler​​​​​​/nvm-windows · GitHub

 分别选择nvm的安装路径和nodejs的安装路径

终端输入nvm -v查到版本号则安装成功!

3.配置

环境变量在安装过程中会自动配置好

在nvm的安装目录找到settings.txt,配置下载源

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

里面的root和path应该是安装的时候配好的,不要动。 

4.使用nvm安装node.js

nvm list available查看可安装版本

选择一个安装:npm install 版本号

安装后nvm list查看已安装的版本和正在使用的版本 

5.nvm常用命令

命令说明
nvm version查看当前的版本
nvm root [path]设置和查看root路径
nvm install 版本号安装指定版本的node
nvm list查看已经安装的版本
nvm list available查看网络可以安装的版本
nvm use切换指定的node版本
nvm uninstall卸载指定的版本

创建VUE项目

1.使用vue init 创建vue2(不推荐)

前提:安装了vue-cli

# 安装(最新版)
npm install -g vue-cli# 安装(指定版本)
npm install -g @vue/cli@4.5.14#测试版本,显示版本号即安装成功
vue -V

 创建项目

vue init webpack 命令是vue -cli2.x 版本的初始化方式,启动方式默认为 npm run dev ,webpack 为官方推荐模板。

# 生成一个基于 webpack 模板的新项目
vue init webpack project_name#进入项目目录
cd project_name#启动项目
npm run serve

使用vue init构建项目的时候,会有如下几步提示信息:

  1. ? Project name vuedemo1,设置项目名称,这一步直接回车,使用默认即可。

  2. ? Project description A Vue.js project,项目描述,我这也直接回车略过。

  3. ? Author (zhangkai <xxxxx@163.com>),如果你的电脑上安装了git,这里会默认提取你的git账户名作为作者,我同样回车使用默认。

2.使用vue create创建vue2和3(较推荐)

vue create是vue -cli3.x 版本的初始方式 ,启动方式默认为 npm run serve

如果在执行vue create时,提示如下内容,那么就按照提示重新安装下高版本的vue/cli就行了。

提示是否从https://registry.npmmirror.com这个仓库进行快速安装 ,选yes或no

3.使用npm create vue创建vue2和3

npm create vue@2 project_namenpm create vue@3 project_name

4.使用npm create vite创建(推荐)

基于Vite创建vue项目是目前vue官方比较推荐的创建方式。

Vite 需要Node.js 版本 14.18+,16+,有些模板需要依赖更高的 Node 版本才能正常运行

这种创建方式依赖npm版本,不同版本命令不太一样:

#查看npm版本
npm -v# npm 6.x
npm create vite@latest vite-vue --template vue# npm 7+, 需要额外的加两个短横线:
npm create vite@latest vite-vue -- --template vue# yarn
yarn create vite vite-vue --template vue# pnpm
pnpm create vite vite-vue --template vue

5.使用vue ui 创建(推荐)

#vue的web端可视化创建
vue ui

 

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

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

相关文章

TINA 使用教程

常用功能 分析-电气规则检查&#xff1a;短路&#xff0c;断路等分析- 直流分析 交流分析 瞬态分析 视图-分离曲线 由于输出的容性负载导致的振荡 增加5欧电阻后OK 横扫参数 添加横扫曲线的电阻&#xff0c;选择R3&#xff1a;8K-20K PWL和WAV文件的支持 示例一&#xff1a;…

AWS简介

AWS AWS&#xff0c;全称为Amazon Web Services&#xff0c;是亚马逊公司旗下的云计算服务平台&#xff0c;自2006年起向全球用户提供广泛而深入的云计算服务。AWS是全球最全面、应用最广泛的云平台之一&#xff0c;它从全球的数据中心提供超过200项功能齐全的服务&#xff0c…

防泄密软件有哪些|2024年企业防泄密软件排行榜

在当今数字化时代&#xff0c;企业的信息安全问题愈发显得重要&#xff0c;尤其是随着网络技术的飞速发展&#xff0c;信息泄露和数据窃取的风险也日益增大。为了保障企业的核心机密和客户隐私&#xff0c;许多企业开始使用防泄密软件&#xff0c;以确保信息的安全性和完整性。…

【Linux 网络】网络基础(二)(应用层协议:HTTP、HTTPS)-- 详解

我们程序员写的一个个解决我们实际问题&#xff0c;满足我们日常需求的网络程序&#xff0c;都是在应用层。 前面写的套接字接口都是传输层经过对 UDP 和 TCP 数据发送能力的包装&#xff0c;以文件的形式呈现给我们&#xff0c;让我们可以进行应用层编程。换而言之&#xff0c…

MP3解码入门(基于libhelix)

主要参考资料: 【Arduino Linux】基于 Helix 解码库实现 MP3 音频播放: https://blog.csdn.net/weixin_42258222/article/details/122640413 libhelix-mp3: https://github.com/ultraembedded/libhelix-mp3/tree/master 目录 一、MP3文件二、MP3 解码库三、libhelix-mp3库3.1 …

Shell之(数组)

目录 一、shell数组 1.数组的定义 2.定义数组的方法 第一种 第二种 第三种 第四种 3.数组分片 4. 数组字符替换 临时替换 永久替换 5.删除数组 删除指定的下标 删除整组 6.数组遍历和重新定义 7.数组追加元素 方式一&#xff1a;指定位置添加 方法二&a…

【JavaScript】WeakMap 和 WeakSet

Map Map 用于存储键值对。 添加属性&#xff1a; 使用 Map 的 set() 方法可以向 Map 对象中添加键值对。例如&#xff1a; const map new Map(); map.set(key1, value1); map.set(key2, value2);通过二维数组快速创建 map 键值对。 let arr [[1, 2],[2, 3],[3, 4]]let map …

计算机Java项目|Springboot高校心理教育辅导设计与实现

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…

yolov9训练自定义数据

1.训练yolov9&#xff0c;先准备好一份自定义数据.。到roboflow下载一份数据&#xff0c;数据格式是yolo格式。 2.到github下载yolov9源码 https://github.com/WongKinYiu/yolov9 3.为了方便配置环境&#xff0c;把代码上传到矩池云上面&#xff0c;使用云服务器 4.执行 pip i…

JSP+SQL学生成绩管理系统

Java版本&#xff1a;1.8 数据库&#xff1a;MySQL 框架&#xff1a;Spring Spring MVC MyBatis 服务器&#xff1a;Tomcat 前端解析框架&#xff1a;Thymeleaf 开发工具&#xff1a;Idea 2017 版本管理工具&#xff1a;Maven 版本控制工具&#xff1a;GitHub 经过对系统的需…

解决kali Linux安装后如何将语言修改为中文

开启虚拟机 用root用户进入终端 进入终端执行dpkg-reconfigure locales命令 选择en_US.UTF-8 UTF-8选项&#xff0c;按空格键将其取消。 选择zh_CN.UTF-8 UTP-8&#xff0c;按空格选择&#xff0c;按tab键选择ok。 选择zh_CN.UTF-8字符编码&#xff0c;按tab键选择ok&#xff0…

jQuery EasyUI textbox 值取不到问题

用textbox 存值点击修改的时候有些字段是不能更改的所以将textbox 的disabled属性设为true后 像这里的textbox disabled属性设为true是灰的 点击保存时这两个值没传 我们可以在提交保存前先将disabled属性先设为false,保存后又设为true

简单记录下:Navicat 导出表结构至 Excel

首先我们需要通过sql语句查询出相关的表结构的结构 SELECT COLUMN_NAME AS 字段名称,COLUMN_TYPE AS 字段类型,IF(IS_NULLABLENO,否,是) AS 是否必填,COLUMN_COMMENT AS 注释FROM INFORMATION_SCHEMA.COLUMNSWHERE table_schema bs-gdsAND table_name sys_menu;查询的结构如下…

软考-软件工程

软件工程概述 软件工程指的是应用计算机科学、数学及管理科学等原理&#xff0c;以工程化的原则和方法来解决软件 问题的工程&#xff0c;目的是提高软件生产率、提高软件质量、降低软件成本。 概述&#xff1a; 软件开发模型&#xff1a;指导软件开发的体系 需求分析确定软件…

OpenAI春季发布会速览,盘点近30天AI大事件

OpenAI发布会速览 北京时间5月14日凌晨1点&#xff0c;OpenAI在官网举行了"春季更新"活动&#xff0c;推出了全新的旗舰模型“GPT-4o”&#xff0c; 这款模型具备处理文本、图片、视频、语音的全能处理能力&#xff0c;能实时响应用户需求&#xff0c;并进行语音回应…

鸿蒙应用布局ArkUI:【其他常用布局容器和组件】介绍

其他常用布局容器和组件 创建轮播&#xff08;Swiper&#xff09;实现轮播图功能 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 栅格布局&#xff08;GridRow/GridCol&#xff09;和Grid布局类似…

练习题(2024/5/15)

1有多少小于当前数字的数字 给你一个数组 nums&#xff0c;对于其中每个元素 nums[i]&#xff0c;请你统计数组中比它小的所有数字的数目。 换而言之&#xff0c;对于每个 nums[i] 你必须计算出有效的 j 的数量&#xff0c;其中 j 满足 j ! i 且 nums[j] < nums[i] 。 以…

解决MobaXterm无法连接虚拟机问题

MobaXterm 无法连接到虚拟机可能是由于多种原因引起的。以下是一些可能的解决方法&#xff1a; 检查网络配置&#xff1a; 确保虚拟机和 MobaXterm 所在的主机在同一网络中&#xff0c;并且能够相互通信。可以尝试使用 ping 命令来测试两者之间的连通性。确保虚拟机的网络设置正…

Spring 各版本发布时间与区别

版本版本特性Spring Framework 1.01. 所有代码都在一个项目中 2. 支持核心功能IoC、AOP 3. 内置支持Hibernate、iBatis等第三方框架 4. 对第三方技术简单封装。如&#xff1a;JDBC、Mail、事务等 5. 只支持XML配置方式。6.主要通过 XML 配置文件来管理对象和依赖关系&#xff0…

时间序列预测:探索性数据分析和特征工程的实用指南

时间序列分析是数据科学和机器学习领域最广泛的主题之一:无论是预测金融事件、能源消耗、产品销售还是股票市场趋势&#xff0c;这一领域一直是企业非常感兴趣的领域。 随着机器学习模型的不断进步&#xff0c;使除了传统的统计预测方法(如回归模型、ARIMA模型、指数平滑)外&a…