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.rhkb.cn/news/331664.html

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

相关文章

Linux--线程的认识(一)

线程的概念 线程(Thread)是操作系统中进行程序执行的最小单位,也是程序调度和分派的基本单位。它通常被包含在进程之中,是进程中的实际运作单位。一个线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线…

Redis内存回收-内存淘汰策略

LFU的访问次数之所以叫做逻辑访问次数&#xff0c;是因为并不是每次key被访问都计数&#xff0c;而是通过运算&#xff1a; 生成0~1之间的随机数R计算 (旧次数 * lfu_log_factor 1)&#xff0c;记录为P如果 R < P &#xff0c;则计数器 1&#xff0c;且最大不超过255访问…

二叉树详解

目录 一、二叉树的实现 1.1 二叉树的前序遍历 1.2 二叉树的中序遍历 1.3 二叉树的后续遍历 1.4 二叉树的节点个数 1.5 二叉树叶子节点个数 1.6 二叉树查找值为x的节点 1.7 二叉树第k层节点个数 1.8 二叉树的高度 1.9 二叉树的销毁 二、代码展示 BTNode.h BTNode.c 最后 一…

skynet.newservice简介:服务的启动

skynet是一个轻量级的游戏服务器框架。 简介 在skynet的体系中&#xff0c;服务是一个基础概念。通常&#xff0c;我们使用skynet.newservice来启动一个snlua服务。 那么&#xff0c;当我们写下local addr skynet.newservice("test")这行代码时&#xff0c;系统是怎…

【Java Web】前端利用 form 表单传多项数据,后端 Servlet 取出的各项数据均为空

前端利用 form 表单传多项数据&#xff0c;后端 Servlet 取出的各项数据均为空 文章目录 1.问题引入2.问题解决 1.问题引入 最近在写一个 java web 项目时&#xff0c;遇到一个让我头疼了一下午的问题&#xff1a;前端通过 post 提交的 form 表单数据可以传到后端&#xff0c…

Windows远程连接命令?

Windows操作系统提供了多种远程连接命令&#xff0c;使用户可以通过网络连接到远程计算机&#xff0c;并在远程操作系统上执行操作。远程连接命令可方便实现远程工作、故障排查和系统维护等任务。本文将介绍几种常见的Windows远程连接命令及其基本使用方法。 远程连接命令 Win…

心链2---前端开发(整合路由,搜索页面,用户信息页开发)

心链——伙伴匹配系统 接口调试 说书人&#x1f4d6;&#xff1a;上回书说到用了两种方法查询标签1.SQL查询&#xff0c;2.内存查询&#xff1b;两种查询效率是部分上下&#xff0c;打的是难解难分&#xff0c;是时大地皴裂&#xff0c;天色聚变&#xff0c;老祖斟酌再三最后决…

仪器校准中移液器的使用规范,应当注意哪些细节?

校准行业中&#xff0c;移液器的使用是非常多的&#xff0c;尤其是理化室&#xff0c;经常需要借助到移液器来校准。作为常规的溶液定量转移器具&#xff0c;其在校准过程中的使用也需要遵守规范&#xff0c;既是保证校准结果准确低误差&#xff0c;也是为了规范实验室校准人员…

2024.5.25晚训题解

这套题挺简单的。。。 A题 AC率差不多100% B题 AC率差不多75% C题 AC率也差不多75% D题 AC率 50% E题 AC率 25% 向着top 1%出发 A题题解 Stair, Peak, or Neither? 简单判断题&#xff0c;自己写 #include<bits/stdc.h> using namespace std; int A[5]; int main() {…

llama-factory学习个人记录

框架、模型、数据集准备 1.llama-factory部署 # 克隆仓库 git clone https://github.com/hiyouga/LLaMA-Factory.git # 创建虚拟环境 conda create --name llama_factory python3.10 # 激活虚拟环境 conda activate llama_factory # 安装依赖 cd LLaMA-Factory pip install -…

线性回归模型

目录 1.概述 2.线性回归模型的定义 3.线性回归模型的优缺点 4.线性回归模型的应用场景 5.线性回归模型的未来展望 6.小结 1.概述 线性回归是一种广泛应用于统计学和机器学习的技术&#xff0c;用于研究两个或多个变量之间的线性关系。在本文中&#xff0c;我们将深入探讨…

会声会影调速怎么用 会声会影如何调整音频速度

会声会影是一款功能强大的视频编辑软件&#xff0c;可以帮助我们轻松的实现剪辑。 会声会影的操作简单易懂&#xff0c;界面简洁明快。适合家庭使用&#xff0c; 我们使用会声会影可以在家就能将视频剪辑成好莱坞大片。但是在使用的过程中&#xff0c;仍然会遇到一些操作上的问…

微信小程序预览图片和H5使用canvas实现图片+蒙层+文字

1、效果 2.H5实现 <!--* Author: limingfang* Date: 2024-05-20 10:26:51* LastEditors: limingfang* LastEditTime: 2024-05-21 16:31:11* Description: --> <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8&q…

【小程序 按钮 表单 】

按钮 代码演示 xxx.wxml <view class"boss" hover-class"box"hover-start-time"2000"hover-stay-time"5000">测试文本<view hover-stop-propagation"true">子集</view><view>子集2</view>…

Capture One Studio for Mac:打造完美影像的利器

对于摄影师而言&#xff0c;每一次按下快门都是一次对完美影像的追求。而Capture One Studio for Mac正是这样一款能够帮助你实现这一追求的利器。 Capture One Studio for Mac v16.4.2.1中文直装版下载 首先&#xff0c;Capture One Studio for Mac拥有出色的图像处理能力。它…

Java—二分查找

介绍 二分查找&#xff08;Binary Search&#xff09;是一种在有序数组中查找特定元素的搜索算法。其基本思想是将目标值与数组中间的元素进行比较&#xff1a; 如果目标值等于中间元素&#xff0c;则查找成功。如果目标值小于中间元素&#xff0c;则在数组左半部分继续进行二…

2024年汉字小达人活动4个多月开赛:18道历年选择题和答案、解析

根据近年的安排&#xff0c;2024年第11届汉字小达人比赛还有4个多月就启动&#xff0c;那么孩子们如何利用这段时间有条不紊地备考呢&#xff1f;我的建议是两手准备&#xff1a;①把小学1-5年级的语文课本上的知识点熟悉&#xff0c;重点是字、词、成语、古诗。②把历年真题刷…

VTK 数据处理:特征边提取

VTK 数据处理&#xff1a;特征边提取 VTK 数据处理&#xff1a;特征边提取原理实例 1&#xff1a;边界边提取实例 2&#xff1a;模型特征边提取实例 3&#xff1a;利用 vtkFeatureEdges 提取的边界补洞实例 4&#xff1a;利用 vtkFillHolesFilter 补洞 VTK 数据处理&#xff1a…

全局平均池化笔记

全局平均池化&#xff08;Global Average Pooling, GAP&#xff09;是一种用于卷积神经网络&#xff08;CNN&#xff09;中的池化操作&#xff0c;其主要作用和优点包括&#xff1a; 减少参数数量&#xff1a;全局平均池化层将每个特征图通过取其所有元素的平均值&#xff0c;压…

初识Spring Boot

初识Spring Boot SpringBoot是建立在Spring框架之上的一个项目,它的目标是简化Spring应用程序的初始搭建以及开发过程。 对比Spring Spring Boot作为Spring框架的一个模块&#xff0c;旨在简化Spring应用程序的初始搭建和开发过程&#xff0c;以下是Spring Boot相对于传统Spri…