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

news2024/11/19 7:24:16

在这里插入图片描述

文章目录

  • 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.coloradmin.cn/o/1692227.html

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

相关文章

Dilworth 定理

这是一个关于偏序集的定理,事实上它也可以扩展到图论,dp等中,是一个很有意思的东西 偏序集 偏序集是由集合 S S S以及其上的一个偏序关系 R R R定义的,记为 ( S , R ) (S,R) (S,R) 偏序关系: 对于一个二元关系 R ⊂…

项目9-网页聊天室7(消息传输模块之解决之前存在的问题:获取最后一条消息)

1.服务器中转的原因 IPV4不够用 (1)使用服务器中转,最大原因, 就是 NAT 背景下,两个内网的设备无法直接进行通信(不在同一个局域网内) (2)另外一个原因,通过服务器中转,是更容易在服务器这里记录历史消息随时方便咱们来查询历史记…

01-05.Vue自定义过滤器

目录 前言过滤器的概念过滤器的基本使用给过滤器添加多个参数 前言 我们接着上一篇文章01-04.Vue的使用示例:列表功能 来讲。 下一篇文章 02-Vue实例的生命周期函数 过滤器的概念 概念:Vue.js 允许我们自定义过滤器,可被用作一些常见的文本…

中国人工智能大模型价格战

近年来,人工智能技术迅猛发展,尤其是大模型领域的突破让人们看到了更多的可能性。然而,在这一高科技领域,中美两国的竞争日趋激烈。近日,中国互联网巨头们纷纷启动大模型价格战,引发了广泛关注。这场价格战…

rockeylinux 搭建k8s 1.28.10

1.关闭防火墙 systemctl stop firewalld systemctl disable firewalld 2.关闭selinux # 临时禁用selinux # 将 SELinux 设置为 permissive 模式(相当于将其禁用) setenforce 0 sed -i s/^SELINUXenforcing$/SELINUXpermissive/ /etc/selinux/config 3.网…

MATLAB学习:频谱图的绘制

1.概述 时域信号经FFT变换后得到了频谱,在作图时还必须设置正确的频率刻度,这样才能从图中得到正确的结果。 2.案例分析 下面透过一个简单的例子来分析频谱图中频率刻度(横坐标)的设置的重要性。一余弦信号,信号频率为30Hz,采样频率100Hz,信号长128,在FFT后做谱图&#xff0…

AtCoder Beginner Contest 354 (ABCDEFG题)视频讲解

2024年5月19日补充G题。 A - Exponential Plant Problem Statement Takahashi is growing a plant. Its height at the time of germination is 0 c m 0\,\mathrm{cm} 0cm. Considering the day of germination as day 0 0 0, its height increases by 2 i c m 2^i\,\mat…

AWS迁移与传输之AMS/MGN

AWS Application Migration Service(AWS Application Migration Service简称为AWS MGN,MGN是migration的缩写。)是一项全面的迁移服务,旨在帮助企业将其本地服务器和虚拟机迁移到云端,包括AWS和VMware Cloud on AWS。 …

Bugku Crypto 部分题目简单题解(四)

目录 python_jail 简单的rsa 托马斯.杰斐逊 这不是md5 进制转换 affine Crack it rsa python_jail 启动场景 使用虚拟机nc进行连接 输入print(flag) 发现报错,经过测试只能传入10个字符多了就会报错 利用python中help()函数,借报错信息带出flag变…

海康威视NVR通过ehome协议接入视频监控平台,视频浏览显示3011超时错误的问题解决,即:The request timeout! 【3011】

目录 一、问题描述 二、问题分析 2.1 初步分析 2.2 查看日志 2.3 问题验证 1、查看防火墙 2、查看安全组 3、问题原因 三、问题解决 3.1 防火墙开放相关端口 3.2 安全组增加规则 3.3 测试 1、TCP端口能够联通的情况 2、TCP端口不能够联通的情况 四、验证 五、云…

.DS_store文件

感觉mac里的这个.DS_store文件烦人,老是莫名其妙的出现,然后造成困扰 处理方式如下: import os pic_list os.listdir("./mask_pic/") print(len(pic_list)) # 从文件夹中删掉 if(".DS_Store" in pic_list):print(&quo…

orin部署tensorrt、cuda、cudnn、pytorch

绝大部分参考https://blog.csdn.net/qq_41336087/article/details/129661850 非orin可以参考https://blog.csdn.net/JineD/article/details/131201121 报错显卡驱动安装535没法安装、原始是和l4t-cuda的部分文件冲突 Options marked [*] produce a lot of output - pipe it th…

webstorm新建vue项目相关问题

前言 这个迭代后端需求偏少,前端code的键盘都起火星子了。来了4个外包支持,1个后端3个前端,还是不够用啊。刚好趁这个机会稍微学习下vue,其实之前环境也配置过了,所以这里就不分享环境配置了,主要分享下新建…

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.…

【全开源】分类记账小程序系统源码(ThinkPHP+FastAdmin+UniApp)

基于ThinkPHPFastAdminUniAppvk-uView-uiVue3.0开发的一款支持多人协作的记账本小程序,可用于家庭,团队,组织以及个人的日常收支情况记录,支持周月年度统计。 :智能管理您的财务生活 一、引言:财务智能化…

云计算中的弹性计算是什么?

弹性计算在管理云计算中的云服务器方面起着举足轻重的作用。顾名思义,弹性计算服务为云服务提供商提供了扩展和缩减计算资源(如内存、带宽、基础架构等)的能力。此功能可使用监控自动快速扩展资源以满足业务的不同需求工具。 本文 德迅云安全…

十五、Python模块(入门一定看!!!)「长期更新Python简单入门到适用」

首先什么是模块? 小伙伴们经常看我写的教程不难发现,前面我们用过几次模块就是sys的那个,其实python不仅标准库中包含了大量的模块(也被称之为准模块),还有大量的第三方模块,开发者也可以自己发…

集创北方ICN6211 MIPIDSI桥接到RGB,支持RGB565/RGB888/RGB666

ICN6211描述: ICN6211是一个桥接芯片,它接收MIPIDSI输入并发送RGB输出。MIPIDSI最多支持4个车道,每个车道的最大运行频率为1Gbps;总最大输入带宽为4Gbps;并且还支持MIPI定义的ULPS(超低功耗状态&#xff0…

算法课程笔记——矩阵乘法整除同余LCMGCD

算法课程笔记——矩阵乘法&整除&同余&LCM&GCD bool相等 不需要库函数 只有除法不是 本身就很大,如果不行就要考虑其他方法

vue3.0+ts+vite+scss创建一个vue项目

使用Vite创建一个vue3项目 文章目录 1、创建vue3项目2、安装less/scss3、自动导入 1、创建vue3项目 npm ​npm create vitelatestyarn ​yarn create vite输入新项目名字(例子:vueDemo) 按上下选择框架,vue按回车 ​​​​ 选…