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,至此你可以快乐的玩耍了

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

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

相关文章

每日AIGC最新进展(10):符号音乐生成SYMPLEX、新型图像编辑数据集ReasonPix2Pix、角色一致性插画生成、高级的风格个性化扩散模型

Diffusion Models专栏文章汇总:入门与实战 SYMPLEX: Controllable Symbolic Music Generation using Simplex Diffusion with Vocabulary Priors http://arxiv.org/abs/2405.12666v1 本文介绍了一种新的符号音乐生成方法,名为SYMPLEX,它基于…

台湾省军事演习路径规划:A*算法在复杂地形中的应用

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容,和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣! 推荐:数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航: LeetCode解锁100…

在MySQL中,Linux表同步到Windows,有大小写的就没同步的详细解决方案

在 Linux 系统上,文件名是区分大小写的,而在 Windows 系统上,文件名通常不区分大小写。导致在从 Linux 同步文件到 Windows 时,有些文件因为名称冲突而无法同步。为了有效解决这个问题,可以采取以下方法: …

1098: 堆的判断

解法&#xff1a; 堆是完全二叉树 用数组来存储 然后用定义判定 #include<iostream> #include<vector> using namespace std; int main() {int n;cin >> n;vector<int> vec(n);for (int i 0; i < n; i) cin >> vec[i];for (int i 0; i &…

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

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

c#自动生成缺陷图像-添加新功能(可从xml直接提取目标数据,然后进行数据离线增强)--20240524

在进行深度学习时,数据集十分重要,尤其是负样本数据。 故设计该软件进行深度学习数据预处理,最大可能性获取较多的模拟工业现场负样本数据集。 该软件基于VS2015、.NETFrameWork4.7.2、OpenCvSharp1.0.0.0、netstandard2.0.0.0、SunnyUI3.2.9.0、SunnyUI.Common3.2.9.0及Ope…

ClickHouse实战处理(一):MergeTree表引擎

MergeTree作为家族系列最基础的表引擎&#xff0c;主要有以下特点&#xff1a; 存储的数据按照主键排序&#xff1a;创建稀疏索引加快数据查询速度。支持数据分区&#xff0c;可以通过PARTITION BY语句指定分区字段。支持数据副本。支持数据采样。 一、MergeTree分类和建表参…

python水果分类字典构建指南

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、理解需求 三、构建字典 1. 数据结构选择 2. 代码实现 3. 结果展示 四、总…

C++实现基础二叉搜索树(并不是AVL和红黑树)

本次实现的二叉搜索树并不是AVL数和红黑树&#xff0c;只是了解流程和细节。 目录 二叉搜索树的概念K模型二叉搜索树的实现二叉搜索树的架构insert插入find 查找中序遍历Inorder删除earse替换法的思路情况一 &#xff1a;假如要删除节点左边是空的。在左边时在右边时 情况二&a…

JavaScript-数组的增删改查

数组的操作一共有四种&#xff1a; 查询数组数据修改数组中元素的值数组添加新的数据删除数组中的元素 数组的初始化 有些编程语言的数组初始化是用{}包着的&#xff0c;而JS的数组初始化用[] let num[2,6,1,77,52,25,7]; 数组的查询 想要具体查询数组中的某个元素 可以用数…

【Spring Cloud】全面解析服务容错中间件 Sentinel 持久化两种模式

文章目录 推送模式本地文件持久化&#xff08;拉模式&#xff09;配置yml编写处理类添加配置演示 配置中心持久化&#xff08;推模式&#xff09;修改nacos在sentinel中生效引入依赖配置文件 修改sentinel在nacos中生效下载源码更改代码演示 总结 推送模式 Sentinel 规则的推送…

【JavaEE 初阶(十)】JVM

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多进阶知识 目录 1.前言2.JVM内存区域划分3.类加载3.1双亲委派模型 4.垃圾回收&#xff08;GC&#xff0…

结构体变量的创建和初始化以及内存对齐

前言 嗨&#xff0c;我是firdawn&#xff0c;在本章中我们将介绍&#xff0c;结构体变量的创建和初始化&#xff0c;结构成员访问操作符以及结构体的内存对齐&#xff0c;下面是本章的思维导图&#xff0c;接下来&#xff0c;让我们开始今天的学习吧&#xff01; 一&#xf…

下载CentOS系统或者下载Ubuntu系统去哪下?

因为Centos官网是挂在国外的服务器上&#xff0c;下载镜像时相比于国内的下载速度会慢很多&#xff0c;分享国内的镜像站去阿里巴巴下载Centos镜像。 首先分享两种下载方式&#xff0c;如果只想下载Centos那么就访问方式一的下载地址即可&#xff0c;如果还想下载其他的系统&a…

AI大模型探索之路-实战篇5: Open Interpreter开放代码解释器调研实践

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;DB-GPT数据应用开发框架调研实践 目录 系列篇章&#x1f4a5;前言一、何为Open Interpreter&#xff1f;二、与 ChatGPT 的代码解释器比较三、 Open Interpreter的特性1、强大的本地计算能力2、丰富的功能3、高度的…

基于springboot+vue的招聘信息管理系统

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

生产物流智能优化系统

对生产调度、物流调度【车辆路径问题、配送中心拣选问题】智能优化算法研究形成系统性程序&#xff0c;逐步开发设计一个智能优化系统【包括&#xff1a;问题说明、实验界面、算法结构和算法程序应用说明】&#xff0c; 当前完成TSP和集送车辆路径的算法程序&#xff0c;程序效…

产品经理-需求分析(三)

1. 需求分析 从业务的需要出发&#xff0c;确定业务目的和目标&#xff0c;将业务需求转为产品需求 1.1 业务需求 业务需求 业务动机 业务目标 就是最根本的动机和目标成果&#xff0c;通过这个需求解决特定的问题 1.2 产品需求 产品需求 解决方案 产品结构 产品流程…

Java进阶学习笔记8——单继承、Object类、方法重写

Java 是单继承的&#xff0c;Java中的类不支持多继承&#xff0c;但是支持多层继承。 Object类是所有类的父类。 Java不支持多类继承&#xff1a; Java支持多层继承&#xff1a; 反证法&#xff1a; Object类&#xff1a; Object类是java所有类的祖宗类&#xff0c;我们写的任…

Excel中Lookup函数

#Excel查找函数最常用的是Vlookup&#xff0c;而且是经常用其精确查找。Lookup函数的强大之处在于其“二分法”的原理。 LOOKUP&#xff08;查找值&#xff0c;查找区域&#xff08;Vector/Array&#xff09;&#xff0c;[返回结果区域]&#xff09; 为什么查找区域必须升序/…