当前位置: 首页 > news >正文

Vue脚手架的安装(超详细篇,保姆级教程)

一、环境安装

1.软件下载

官网:https://github.com/coreybutler/nvm-windows/releases

官网往下滑,找到这个nvm-setup.zip,然后进行下载

2.安装

下载后,双击进行安装,注意安装目录不要出现中文和空格

安装后,打开cmd,输入命令 nvm ,查看安装版本

修改一下下载的镜像地址:

打开一下你刚刚的安装目录nvm,双击打开,找到settings.txt,然后用记事本编辑打开,复制粘贴

node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://npmmirror.com/mirrors/npm/

随后保存,这样子我们镜像就配置完成了

3.使用

打开cmd(快捷键win+R)

(1)安装指定版本的node

这边的安装版本可以跟我的一样,安装16.20.2和14.21.3的版本

nvm install 14.21.3 // 安装14.21.3 版本node 或者输入

如果要安装最新的版本:

nvm install 14 nvm install latest // 安装最新版本node

(2)查看node所有安装版本

nvm list

这边我下载了node的14和16的版本

可以看到这个就说明你刚刚安装的版本成功了!!!

(3)使用指定版本的node

nvm use 14.21.3 // 使用14.21.3版本node

此时,你再次输入nvm list

(4)查看node和nvm的使用版本

node -v

npm -v

这版本是相互匹配的,

16版本的node就是跟着8版本的npm

14版本的node就是跟着6版本的npm

(5)卸载指定版本的node

nvm uninstall 14.5.0 // 卸载14.5.0版本node

4、安装成功后可查看系统环境变量

这个系统环境变量是它自己添加上去的,不用我们手动添加

查看path:

能看到环境变量的就是环境安装成功了

二、安装脚手架

-g的意识是全局安装,就-g和-s,-s是局部安装,就是只在当前项目可以使用

这边建议全局安装,使用-g,所有项目都可以使用

npm install @vue/cli -g  

如果安装不成功那就使用管理员身份打开运行,然后再输入命令

脚手架安装完之后,打开nvm安装目录,打开你刚刚使用node的版本

(我是使用16版本的)

安装成功示例:

然后再打开cmd,输入vue

输入   vue -V  可以查看脚手架的安装版本

安装失败示例:

三、项目创建和运行

项目创建:

打开你要创建项目的目录下,

直接输入cmd打开

这样子你就可以进入当前目录

输入  vue create 项目名

按下回车键,之后会出现这个页面

弄到这个就说明项目创建成功

项目运行:

说明项目运行成功

四、基本使用和说明

在这边进行项目的运行,快捷键   ctrl+`   打开控制台输入npm run serve进行项目运行

成功~~~

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【web3.0】Web3 开发教程与代码资源:探索如何在Web3项目中开发应用
  • VBA之Excel应用第二章第三节:InputBox函数对话框
  • Io 35
  • VUE实现TAB切换不同页面
  • 【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化
  • 洛谷练习(8.6)
  • Maven实战.插件
  • 深入SpringBoot:SpringCache的集成与使用
  • SQL注入之sqli-labs靶场第一关
  • sql server 通过 sql查询今天、本周、上周、本月、上月、今年、去年的时间范围
  • forwardRef和useImperativeHandle到底能做啥
  • DataWhale AI夏令营-英特尔-阿里天池LLM Hackathon
  • Xlua原理分析 四
  • 虚拟机ubuntu22.04找不到ttyUSB*端口
  • Windows系统之环境变量
  • android图片蒙层
  • Apache的基本使用
  • CSS实用技巧
  • Druid 在有赞的实践
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • Javascript设计模式学习之Observer(观察者)模式
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • maya建模与骨骼动画快速实现人工鱼
  • Meteor的表单提交:Form
  • React的组件模式
  • Spring Cloud Feign的两种使用姿势
  • SSH 免密登录
  • 浮现式设计
  • 聚簇索引和非聚簇索引
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 深度解析利用ES6进行Promise封装总结
  • 正则表达式小结
  • 函数计算新功能-----支持C#函数
  • ​ArcGIS Pro 如何批量删除字段
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • # 达梦数据库知识点
  • #单片机(TB6600驱动42步进电机)
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • ()、[]、{}、(())、[[]]等各种括号的使用
  • (06)Hive——正则表达式
  • (SpringBoot)第二章:Spring创建和使用
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (生成器)yield与(迭代器)generator
  • (十)c52学习之旅-定时器实验
  • (一)项目实践-利用Appdesigner制作目标跟踪仿真软件
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • *p++,*(p++),*++p,(*p)++区别?
  • ..thread“main“ com.fasterxml.jackson.databind.JsonMappingException: Jackson version is too old 2.3.1
  • .Net CoreRabbitMQ消息存储可靠机制
  • .NET Framework与.NET Framework SDK有什么不同?
  • .net经典笔试题
  • .net开发日常笔记(持续更新)