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.hqwc.cn/news/704565.html

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

相关文章

redis报错500

之前自己举一反三把value也给序列化了&#xff1a; 然后报错了&#xff1a; 原因是这里传入的是Integer类型&#xff0c;序列化的话就变为string类型了

基于springboot+vue+Mysql的大学生社团活动平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

评价决策类-层次分析法

师从江北 问题引出 归一化处理&#xff1a;指标的数组[a b c]归一化处理得到[a/(abc),b/(abc),c/(abc)] 因为每个指标的重要性不同&#xff0c;所以要加上一个权重 如何科学的确定权重&#xff0c;就要用到层次分析法&#xff08;AHP&#xff09; 模型原理 建立递阶层次结构模…

2024最新软件测试【测试理论+ 接口测试】面试题(内附答案)

一、测试理论 3.1 你们原来项目的测试流程是怎么样的? 我们的测试流程主要有三个阶段&#xff1a;需求了解分析、测试准备、测试执行。 1、需求了解分析阶段 我们的 SE 会把需求文档给我们自己先去了解一到两天这样&#xff0c;之后我们会有一个需求澄清会议&#xff0c; …

深度盘点在当今经济形势下资深项目经理或PMO的或去或从

在当今经济形势下&#xff0c;资深项目经理&#xff08;Project Manager&#xff09;或项目管理办公室&#xff08;PMO&#xff09;的去向和选择受到多种因素的影响。以下是对他们可能面临的或去或从的深度盘点&#xff1a; 1、发展去向 1. 深化专业领域&#xff1a;在经济形势…

AI绘画提示词案例(车

目录 1. 提示词1——复古敞篷车&#xff1a;2. 提示词2——霓虹城市&#xff1a;3. 提示词3——沙滩SUV&#xff1a;4. 网站推荐——LibLib小结&#xff1a; 1. 提示词1——复古敞篷车&#xff1a; 正向提示词&#xff1a; In the quiet suburbs,a vintage-style convertible…

js之选项卡制作实例

大家好&#xff0c;今天给大家书写选项卡实例&#xff0c;话不多说&#xff0c;直接上干货 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…

【嵌入式开发】Arduino人机界面及接口技术:独立按键接口,矩阵按键接口,模拟量按键接口(基础知识介绍)

“生活总是让我们遍体鳞伤,但到后来,那些受伤的地方一定会变成我们最强壮的地方。” 🎯作者主页: 追光者♂🔥 🌸个人简介: 📝[1] CSDN 博客专家📝 🏆[2] 人工智能领域优质创作者🏆 🌟[3] 2022年度博客之星人工智能领域TOP4🌟 🌿[4] …

OpenHarmony 实战开发——ArkUI容器类API介绍

容器类&#xff0c;顾名思义就是存储的类&#xff0c;用于存储各种数据类型的元素&#xff0c;并具备一系列处理数据元素的方法。在 ArkUI 开发框架中&#xff0c;容器类采用了类似静态的语言来实现&#xff0c;并通过 NAPI 框架对外提供。通过对存储位置以及属性的限制&#x…

Go微服务: 日志系统ELK核心架构设计

微服务日志系统建设 1 &#xff09;为什么需要日志系统 业务发展越来越庞大&#xff0c;服务器越来越多各种访问日志&#xff0c;应用日志&#xff0c;错误日志量越来越多&#xff0c;无法管理开发人员排查问题&#xff0c;需要到服务器上查日志 2 &#xff09;Elastic Stack…

栈和队列经典面试题详解

目录 题目一&#xff1a;20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 题目二&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 题目三&#xff1a;232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目四&#xff1a;622. 设…

AI大模型探索之路-训练篇23:ChatGLM3微调实战-基于P-Tuning V2技术的实践指南

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…