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_name

npm 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

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(保姆级教程傻瓜式操作)树莓派--基于opencv实现人脸识别

前言 因为当时没有边实验边记录&#xff0c;所以这篇文章可能存在疏漏。不过很多地方我推荐了我参考过的博客或者视频&#xff0c;希望尽可能地解答您的疑惑&#xff0c;如果您仍有不懂的地方&#xff0c;欢迎评论&#xff0c;如果我知道答案&#xff0c;我会很乐意为您解答。 …

C++错题集(持续更新ing)

Day 1 一、选择题 解析&#xff1a; 在数字不会溢出的前提下&#xff0c;对于正数和负数&#xff0c;有&#xff1a; 1&#xff09;左移n位&#xff0c;相当于操作数乘以2的n次方&#xff1b; 2&#xff09;右移n位&#xff0c;相当于操作数除以2的n次方。 解析&#xff1a…

基于51单片机的自动浇花器电路

一、系统概述 自动浇水灌溉系统设计方案&#xff0c;以AT89C51单片机为控制核心&#xff0c;采用模块化的设计方法。 组成部分为&#xff1a;5V供电模块、土壤湿度传感器模块、ADC0832模数转换模块、水泵控制模块、按键输入模块、LCD显示模块和声光报警模块&#xff0c;结构如…

51单片机超声波测距_液位检测_温度检测原理图PCB仿真代码

目录 实物图&#xff1a; PCB ​原理图​ 仿真图 ​编辑 程序 资料下载地址&#xff1a;51单片机超声波测距-液位检测-温度检测原理图PCB仿真代码 主控为stc89c52,通过ds18b20进行温度采集&#xff0c;超声波测距&#xff0c;距离不可以超过1m&#xff0c;通过按键可以设…

做简单易用的GIS资源管理软件

在室外资源管理领域&#xff0c;采用基于GIS的解决方案已成为主流趋势&#xff0c;旨在实现资源的高效利用和管理。GIS技术结合资源对象的规划、定位和监控&#xff0c;为企业提供全面的管理方案&#xff0c;从而优化资源使用、提高运营效率和降低成本。 然而&#xff0c;许多资…

shell脚本实现linux系统自动化配置免密互信

目录 背景脚本功能脚本内容及使用方法 1.背景 进行linux自动化运维时需要先配置免密&#xff0c;但某些特定场景下&#xff0c;做了互信的节点需要取消免密&#xff0c;若集群庞大节点数量多时&#xff0c;节点两两之间做互信操作非常麻烦&#xff0c;比如有五个节点&#x…

计网面试干货---带你梳理常考的面试题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、HTTP和HTTPS的区别 1.安全性&#xff1a;HTTPS通过SSL/TLS协议对数据进行加密处理&#xff0c;有效防止数据在传输过…

人工智能项目,如何解决大模型的数据私有化

这个问题是最近走访百家企业&#xff0c;客户问的最多的问题。人工智能是对数据集中后&#xff0c;再利用的智能化手段&#xff0c;ChatGPT还在持续的投入&#xff0c;汇集数据、训练模型&#xff0c;微软也不过是做了一个办公客户端的智能工具&#xff0c;那么行业应运之时&am…

写后端项目时上传文件接口使用阿里云oss-规范写法

文章目录 开通对象存储服务密钥管理点击头像点击密钥管理创建新密钥AccessKey 写在yml配置文件中相关配置1.pom依赖2.全局配置类3.AliOssUtil 工具类3.AliOssProperties类&#xff0c;用于读取yml文件中写入的密钥4.controller层&#xff0c;用于写传输文件的接口 开通对象存储…

《Python编程从入门到实践》day29

# 昨日知识点回顾 修改折线图文字和线条粗细 矫正图形 使用内置格式 # 今日知识点学习 15.2.4 使用scatter()绘制散点图并设置样式 import matplotlib.pyplot as plt import matplotlib matplotlib.use(TkAgg)plt.style.use(seaborn-v0_8) # 使用内置格式 fig, ax plt.subpl…

荣耀MagicBook X 14 Pro锐龙版 2023 集显(FRI-H76)笔记本电脑原装出厂Windows11系统工厂模式安装包下载,带F10智能还原

恢复开箱状态预装OEM系统&#xff0c;适用型号&#xff1a;HONOR荣耀FRI-H76、FRI-H56 链接&#xff1a;https://pan.baidu.com/s/1Lcg45byotu5kDDSBs3FStA?pwdl30r 提取码&#xff1a;l30r 华为荣耀原装WIN11系统工厂安装包&#xff0c;含F10一键恢复功能、系统自带所有驱…

蓝桥杯-外卖店优先级(简单写法)

“饱了么”外卖系统中维护着 N 家外卖店&#xff0c;编号 1∼N。 每家外卖店都有一个优先级&#xff0c;初始时 (0 时刻) 优先级都为 0。 每经过 1 个时间单位&#xff0c;如果外卖店没有订单&#xff0c;则优先级会减少 1&#xff0c;最低减到 0&#xff1b;而如果外卖店有订…

四、基于Stage模型的应用架构设计

前面我们了解了如何构建鸿蒙应用以及开发了第一个页面&#xff0c;这只是简单的demo&#xff1b;那么如何去设计&#xff0c;从0到1搭建一个真正的应用呢 一、基本概念 1、Stage模型基本概念 Stage模型概念图 AbilityStage&#xff1a;是一个Module级别的组件容器&#xff0…

「AIGC」Python实现tokens算法

本文主要介绍通过python实现tokens统计,避免重复调用openai等官方api,开源节流。 一、设计思路 初始化tokenizer使用tokenizer将文本转换为tokens计算token的数量二、业务场景 2.1 首次加载依赖 2.2 执行业务逻辑 三、核心代码 from transformers import AutoTokenizer imp…

基于网络爬虫技术的网络新闻分析(二)

目录 2 系统需求分析 2.1 系统需求概述 2.2 系统需求分析 2.2.1 系统功能要求 2.2.2 系统IPO图 2.2 系统非功能性需求分析 3 系统概要设计 3.1 设计约束 3.1.1 需求约束 3.1.2 设计策略 3.1.3 技术实现 3.3 模块结构 3.3.1 模块结构图 3.3.2 系统层次图 3.3.3…

与禹老师学前端vue3学习汇总

24.5.15&#xff1a; 创建Vue3工程 1.确定自己电脑有没有nodejs环境&#xff0c;在cmd中输入node&#xff0c;如果出现Node.js的版本号说明已经有这个环境了&#xff0c;否则搜索Node.js安装 2.先在D盘创建一个文件夹Vue3_Study&#xff0c;然后在这个空文件夹中右键选择终端…

汇聚荣:拼多多长期没有流量如何提高?

在电商的海洋中&#xff0c;拼多多以其独特的团购模式吸引了众多消费者的目光。然而&#xff0c;随着市场竞争的加剧和消费者需求的多样化&#xff0c;一些商家发现自家店铺的流量持续低迷&#xff0c;销售业绩难以突破。面对这样的挑战&#xff0c;如何有效提升拼多多店铺的客…

Linux进程控制——Linux进程程序替换

前言&#xff1a;Linux进程控制包含了进程终止&#xff0c;进程等待&#xff0c;进程程序替换。走到现在我们也只剩下进程程序替换没介绍了&#xff0c;那么让我们来看看进程程序替换到底是什么&#xff01; 本篇主要内容&#xff1a; 替换原理 替换函数 实现简易shell 我们所创…

不用投稿邮箱,怎样向各大新闻媒体投稿?

身为单位的信息宣传员,我深知肩上责任重大。每个月,完成单位在媒体上投稿发表文章的考核任务,就如同一场无声的赛跑,既要保证速度,更要注重质量。起初,我遵循“前辈们”的老路,一头扎进了邮箱投稿的海洋。但很快,现实给了我一记重拳——邮箱投稿的竞争犹如千军万马过独木桥,稿件…

C++ 中的 lambda 表达式

1.概念 lambda表达式实际上是一个匿名类的成员函数&#xff0c;该类由编译器为lambda创建&#xff0c;该函数被隐式地定义为内联。因此&#xff0c;调用lambda表达式相当于直接调用匿名类的operator()函数&#xff0c;这个函数可以被编译器内联优化&#xff08;建议&#xff0…