NodeJS安装并生成Vue脚手架(保姆级)

在这里插入图片描述

文章目录

  • NodeJS下载
  • 配置环境变量
  • Vue脚手架生成
  • Vue脚手架创建项目
  • Vue项目绑定git

更多相关内容可查看

NodeJS下载

下载地址:https://nodejs.org/en

下载的速度应该很快,下载完可以无脑安装,以下记得勾选即可

注意要记住自己的安装路径,下面配置环境变量可能会用到

在这里插入图片描述
注:下载过程中如果弹,配置环境变量失败直接选择忽略,跳过即可

下载完成示例 打开cmd 输入npm -v

在这里插入图片描述
注:如果这里可以查看版本了,则可以跳过,直接看Vue脚手架生成,如果显示无npm命令则需要配置环境变量

配置环境变量

有两种方式,可以直接在环境变量加安装路径的地址,也可以将地址定义为一个用户变量,在path中加入%用户变量%,以下演示的是直接加安装路径的地址

右键我的电脑-属性-高级系统设置-环境变量
在这里插入图片描述
将你下载的nodejs路径加到path中环境变量跟系统变量都要加
在这里插入图片描述
在这里插入图片描述
如果在安装完环境变量中存在nodejs的路径了可以删掉,自己重新加一遍防止路径混乱

加完可以重新试一下上面步骤npm -v看看是否可以打印版本号,如果还未生效,要考虑是否地址配错,可能会存在C盘会自动生成一个地址,如未生效,不妨试一下另一个地址,总归二者有其一是正确的

Vue脚手架生成

打开cmd执行

npm install -g @vue/cli

这里会自动安装vue命令,这里可能比较慢,如果报错显示已经安装,说明你已经安装成功

成功示例
在这里插入图片描述
若显示不存在vue命令,那说明下载失败,可能的原因是环境变量配置的有问题,可以重新配置一遍

将vue.cmd所在的路径安装上述描述的配置方式,也加到环境变量path中

在这里插入图片描述
重新打开cmd试一下vue -V如果成功则代表脚手架安装成功

Vue脚手架创建项目

找一个你想将创建的vue项目放到的路径,利用cmd进入cd 你的路径,输入以下命令

vue  create  项目名
例如:vue create hello

如果显示vue命令不存在,看上文处理

正常会进入到已下页面,选最后一个Manually select features
在这里插入图片描述
移到这一行Linter按空格去掉—按回车进入下一步*
在这里插入图片描述
选3.x–回车
在这里插入图片描述
选package–回车
在这里插入图片描述
是否保存一个快照,输入 N --回车
在这里插入图片描述
进行安装
在这里插入图片描述

最后会在你的路径下创建一个hello文件在这里插入图片描述
利用你的vscode或者别的工具打开你创建的hello文件
在这里插入图片描述
终端执行readme.ad的命令
打开vue终端–新建终端
在这里插入图片描述
然后依次执行以下命令

npm install
npm run serve
npm run build

如果此时还报没有npm命令,但是cmd中可以查看npm -v 需要重新打开一下vscode

可能有的小伙伴发现,生成的文件里面已经绑定了git,通过脚手架会默认创建git,若想跟自己的gitee进行绑定上传,可以继续往下看

Vue项目绑定git

打开vue终端–新建终端
在这里插入图片描述
输入git remote add gitee名 gitee地址

例如:git remote add vue https://gitee.com/xxxx/vue.git

若没有gitee仓库可以新建一个然后将仓库的地址绑定你的项目

注意:vscode可能上传git比较慢,上传过程中可以耐心等待,或者通过idea以及别的工具上传到git,至此你可以快乐的玩耍了

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

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

相关文章

【Linux】简单模拟C语言文件标准库FILE

👦个人主页:Weraphael ✍🏻作者简介:目前正在学习c和算法 ✈️专栏:Linux 🐋 希望大家多多支持,咱一起进步!😁 如果文章有啥瑕疵,希望大佬指点一二 如果文章对…

Kaggle——First Machine Learning Model

kaggle(需要魔法才能访问):https://www.kaggle.com/ 需要下载的数据集:melb_data.csv、train.csv(已放在资源里面) First Machine Learning Model Selecting Data for Modeling #Selecting Data for Modeling import…

C++ 学习 关于引用

🙋本文主要讲讲C的引用 是基础入门篇~ 本文是阅读C Primer 第五版的笔记 🌈 关于引用 几个比较重要的点 🌿引用相当于为一个已经存在的对象所起的另外一个名字 🌞 定义引用时,程序把引用和它的初始值绑定(b…

【MySQL精通之路】InnoDB磁盘I/O和文件空间管理(11)

主博客: 【MySQL精通之路】InnoDB存储引擎-CSDN博客 目录 1.InnoDB磁盘I/O 1.1 预读 1.2 双写缓冲区 2.文件空间管理 2.1 Pages, Extents, Segments, and Tablespaces(很重要) 2.2 配置保留文件段页面的百分比 2.3 页与表行的关系 …

R可视化:可发表的Y轴截断图

Y轴截断图by ggprism Y轴截断图by ggprism 介绍 ggplot2绘制Y轴截断图by ggprism加载R包 knitr::opts_chunk$set(message = FALSE, warning = FALSE)library(tidyverse) library(ggprism) library(patchwork)rm(list = ls()) options(stringsAsFactors = F) options(future.…

2024年高考考务人员网上培训参考答案

第1部分:单选题 1. 关于试卷保密室负责人职责,以下说法不正确的是(B) [2分] A. 负责试卷的接收、保管和发放工作 B. 试卷保密室内屋门锁钥匙和铁柜门锁钥匙必须由同一人保管 C. 试卷接收和发放应当当面清点试卷袋数量&#…

Go语言的中间件(middleware)是如何实现的?

文章目录 Go语言的中间件(Middleware)是如何实现的?中间件的工作原理中间件的实现步骤示例代码总结 Go语言的中间件(Middleware)是如何实现的? 在Go语言中,中间件(Middleware&#…

springboot实现多开发环境匹配置(超级简洁没废话)

首先logbok-spring.xml里面的内容 <?xml version"1.0" encoding"UTF-8"?> <configuration><!-- 开发、测试环境 --><springProfile name"dev,test"><include resource"org/springframework/boot/logging/log…

探索现代AI生成模型的底层原理:大语言模型、视频模型与图片模型

探索现代AI生成模型的底层原理&#xff1a;大语言模型、视频模型与图片模型 引言大语言模型&#xff08;Large Language Models&#xff09;底层原理先进的模型实例应用与影响挑战与未来发展 视频生成模型底层原理先进的模型实例应用与影响挑战与未来发展 图片生成模型底层原理…

Java并发面试题,多线程通关秘籍

【知识点记录】- 不能不知道的知识点 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xf…

算法设计与分析

一、分治法 二、回溯法 三、贪心法 四、动态规划法 分治法一分而治之 对于一个规模为n的问题&#xff0c;若该问题可以容易地解决&#xff08;比如说规模n较小&#xff09;则直接解决&#xff0c;否则将其分解为k个规模较小的子问题&#xff0c;这些子问题互相独立且与原问题形…

封装UUID

目录 1、 * 封装UUID 1.1、 * 从一个 UU64 恢复回一个 UUID 对象 1.2、 * 64进制表示的 UUID, 内容为 [\\-0-9a-zA-Z_] 1.3、 * 将紧凑格式的 UU16 字符串变成标准 UUID 格式的字符串 package com.my.blog.website.utils;

【数据结构与算法 | 基础篇】单向链表模拟栈

1. 前言 前文我们先后用单向循环链表&#xff0c;环形数组来模拟了队列. 队列的特点是先进先出. 队头移除元素&#xff0c;队尾添加元素. 所以需要两个指针控制.本文我们接下来提及如果和单向链表来模拟栈. 栈的特点是后进先出. 在栈顶压栈或弹栈. 另一侧不动的是栈底. 我们可…

range for

1. 基于范围的for循环语法 C11标准引入了基于范围的for循环特性&#xff0c;该特性隐藏了迭代器 的初始化和更新过程&#xff0c;让程序员只需要关心遍历对象本身&#xff0c;其语法也 比传统for循环简洁很多&#xff1a; for ( range_declaration : range_expression ) {loo…

基于SpringBoot设计模式之结构型设计模式

文章目录 介绍开始 介绍 结构型模式涉及到如何组合类和对象以获得更大的结构。结构型类模式采用继承机制来组合接口或实现。一个简单的例子是采用多重继承方法将两个以上的类组合成一个类&#xff0c;结果这个类包含了所有父类的性质。这一模式尤其有助于多个独立开发的类库协同…

【Linux】关于获取进程退出状态中的core dump标志补充

通过 wait/waitpid 可以获取子进程的退出状态, 从而判断其退出结果. 记录退出状态的 int 变量 status 的使用情况如下图所示: 如果是收到信号终止的话, 低 7 位为收到的终止信号, 而低第 8 位为 core dump 标志, core dump 标志有什么用呢? core dump 标志只存 0/1, 表示是否…

printf 模仿slf4j 的log.xxx效果

printf 模仿slf4j 的log.xxx效果 简介期待的效果颜色遇到的问题实际的效果代码实现使用效果图 简介 突然想玩一玩&#xff0c;能不能用printf实现slf4j里 的log.xxx 的效果。 性能是完全不考虑的&#xff0c;只要功能可用就好。 期待的效果 类似:info("这是第{}条日志…

ffmpeg-webrtc(metartc)给ffmpeg添加webrtc协议

这个是使用metrtc的库为ffmpeg添加webrtc传输协议&#xff0c;目前国内还有一个这样的开源项目&#xff0c;是杨成立大佬&#xff0c;大师兄他们在做&#xff0c;不过wili页面维护的不好&#xff0c;新手不知道如何使用&#xff0c;我专门对它做过介绍&#xff0c;另一篇博文&a…

不同类型水表计量技术的优缺点

1.单流束水表 1.1优点 (1)耐受悬浮固体。适用于硬水或悬浮颗粒物。 (2)多样性&#xff0c;可用性&#xff0c;容易找到需要的合适的表型。 (3)技术可靠&#xff0c;已使用了数十年。 (4)体积小&#xff0c;可以安装在狭小的空间里。 (5)13mm、15mm、20mm水表可能是市面…

CTFHUB技能树——SSRF(二)

目录 上传文件 ​FastCGI协议 Redis协议 上传文件 题目描述&#xff1a;这次需要上传一个文件到flag.php了.祝你好运 index.php与上题一样&#xff0c;使用POST请求的方法向flag.php传递参数 //flag.php页面源码 <?phperror_reporting(0);if($_SERVER["REMOTE_ADDR&…