Vue框架学习记录之环境安装与第一个Vue项目

news2025/1/13 13:29:13

Node.js的安装与配置

首先是Node.js的安装,安装十分简单,只需要去官网下载安装包后,一路next即可。

Node.js是一个开源的、跨平台的 JavaScript 运行时环境

下载地址,有两个版本,一个是推荐的,一个是最新的,现在博主学习的话就直接安装最新的即可。

https://nodejs.org/en

在这里插入图片描述

验证是否安装成功,只需要在cmd窗口中输入node-vnpm-v即可,node默认是帮我们安装npm的。可以类别于python中的pip

npm,全名 node package manger。
npm 是Node的开放式模块登记和管理系统,是Node.js包的标准发布平台,用于Node.js包的发布、传播、依赖控制,网址:https://www.npmjs.com/
npm 提供了命令行工具,可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包

在这里插入图片描述

查看npm下载源 npm config get registry

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org)

直接修改npm的默认配置

npm config set registry https://registry.npm.taobao.org 

配置后可以根据 npm config get registrynpm config list 命令查看npm下载源是否配置成功,如图所示配置前为"https://registry.npmjs.org/"

在这里插入图片描述

配置默认安装目录和缓存日志目录

注意:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹"D:\Program Files \nodejs下创建两个文件夹node_globalnode_cache分别作为默认安装目录和缓存日志目录。

随后执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录:

npm config set prefix "D:\software\nodejs\node_global"
npm config set cache "D:\software\nodejs\node_cache"

在这里插入图片描述

npm config get prefix查看npm全局安装包保存路径
npm config get cache查看npm装包缓存路径

还可以输入npm list -global命令来查看全局安装目录:

在这里插入图片描述

安装vue.js

全局安装vue

npm install -g @vue/cli

在这里插入图片描述

输入vue -V看看是否安装成功,但提示vue不是内部命令,这个问题困扰了博主挺长时间,因为这个问题按照博主经验是由于环境变量设置出错,但改了多次依然不行,后来发现改错了地方:

在这里插入图片描述

改完之后再次安装vue,OK了

在这里插入图片描述

创建Vue项目

选择一个我们要创建vue项目的目录,博主选择的是E:/learn,随后执行创建vue项目命令:

vue create hello-world

需要做一些配置,按方向键选中该项,然后按回车键:

代表手动选择进行一些设置,否则可以直接选择Default Vue3

在这里插入图片描述

随后按方向键移动,按空格键选择或取消选择,依次分别是:
Babel 编译,Router 路由,Vuex 状态管理,Linter 如果是想要代码格式这个不要选择,Unit Test单元测试,E2E Test 端对端测试。

在这里插入图片描述

选择vue版本,默认选择3.x即可

在这里插入图片描述

输入Y

在这里插入图片描述

问你需要不要单独文件,还是说全部都放在package.json中,这里我们选择单独文件存放。

在这里插入图片描述

是否要保存为这个项目作为一个模板保存?博主选择N,根据大家需要。然后回车

在这里插入图片描述

出现这个就代表成功了

在这里插入图片描述

命令行启动Vue项目

运行上面的命令:

cd hello-world
nmp run serve

启动成功

在这里插入图片描述

返回命令行界面输入Ctrl+c,项目关闭。

在这里插入图片描述

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

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

相关文章

【洛谷 P1328】[NOIP2014 提高组] 生活大爆炸版石头剪刀布 题解(模拟+向量)

[NOIP2014 提高组] 生活大爆炸版石头剪刀布 题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种石头剪刀布的升级版游戏。 升级版游戏在传统的石头剪刀布游戏的基础…

肖sir__设计测试用例方法之状态迁移法05_(黑盒测试)

设计测试用例方法之状态迁移法 一、状态迁移图 定义:通过描绘系统的状态及引起系统状态转换的事件,来表示系统的行为 案例: (1) 订机票案例1: l向航空公司打电话预定机票—>此时机票信息处于“完成”状…

Elasticsearch实战(五):Springboot实现Elasticsearch电商平台日志埋点与搜索热词

文章目录 系列文章索引一、提取热度搜索1、热搜词分析流程图2、日志埋点(1)排除logback的默认集成。(2)引入log4j2起步依赖(3)设置配置文件(4)配置文件模板(5&#xff09…

使用高斯混合模型进行聚类

一、说明 高斯混合模型 (GMM) 是一种基于概率密度估计的聚类分析技术。它假设数据点是由具有不同均值和方差的多个高斯分布的混合生成的。它可以在某些结果中提供有效的聚类结果。 二、Kmean算法有效性 K 均值聚类算法在每个聚类的中心周围放置一个圆形边…

效果好的it监控系统特点

一个好的IT监控系统应该具备以下特点:  全面性:IT监控系统应该能够监视和管理IT系统的所有方面,包括网络、服务器、应用程序和数据库等。这样可以确保系统的各个方面都得到充分的监视和管理。  可靠性:IT监控系统需要保持高可…

docker 跨平台构建镜像

我们在开发环境构建的镜像在生产环境大多不可用,我们在开发中一般使用 Windows 或者 MAC 系统,部署多半是 linux 环境。那么这篇文章能帮到你。 文章目录 首先构建环境进阶 首先 首先你需要有一个 Dockerfile 文件。 举例:这里以一个 pytho…

SpringMVC之综合案例

SpringMVC注解 Controller: 标记一个类为控制器(处理请求的类),将其作为Spring MVC的组件进行管理。 RequestMapping: 将请求URL映射到具体的处理方法上。可以用在类级别和方法级别,用于指定URL路径。 RequestParam: 用于将请求…

流式数据处理与高吞吐消息传递:深入探索Kafka技术的奥秘

Kafka 是一种高吞吐量、分布式、基于发布/订阅的消息系统,最初由 LinkedIn 公司开发,使用Scala 语言编写,目前是 Apache 的开源项目。 Kafka 概念 Zookeeper 集群是一个基于主从复制的高可用集群,每个服务器承担如下三种角色中的…

【网络编程】C++实现网络通信服务器程序||计算机网络课设||Linux系统编程||TCP协议(附源码)

TCP网络服务器 🐍 1.程序简洁🦎2. 服务端ServerTcp程序介绍🦖3.线程池ThreadPool介绍🦕 4.任务类Task介绍🐙5. 客户端Client介绍🦑6.运行结果:🦐 7. 源码🦞7.1 serverTcp…

C++内存管理(3)——内存池

1. 默认内存管理函数的不足(为什么使用内存池) 利用默认的内存管理操作符 new/delete 和函数 malloc()/free() 在堆上分配和释放内存会有一些额外的开销。 系统在接收到分配一定大小内存的请求时,首先查找内部维护的内存空闲块表&#xff0…

纯css制作常见的图形

1.正方形 <div class"square"></div> .square {width: 100px;height: 100px;background-color: #ffff00;} 效果&#xff1a; 2.长方形 <div class"rectangle"></div> .rectangle{width: 200px;height: 100px;background-color:…

用huggingface.Accelerate进行分布式训练

诸神缄默不语-个人CSDN博文目录 本文属于huggingface.transformers全部文档学习笔记博文的一部分。 全文链接&#xff1a;huggingface transformers包 文档学习笔记&#xff08;持续更新ing…&#xff09; 本部分网址&#xff1a;https://huggingface.co/docs/transformers/m…

Layui快速入门之第一节Layui的基本使用

目录 一&#xff1a;Layui的基本概念 二&#xff1a;Layui使用的基本步骤 1.在官网下载layui的基本文件&#xff0c;引入css和js文件 ①&#xff1a;普通方式引入 ②&#xff1a;第三方 CDN 方式引入 2.在script标签体中编写代码 3.测试 一&#xff1a;Layui的基本概念 …

Mac m1 安装rabbitmq+php-amqplib

rabbitmq 官方地址 https://www.rabbitmq.com mac 软件包 Downloading and Installing RabbitMQ — RabbitMQ 一.这里我选择 homebrew brew updatebrew install rabbitmq二.php代码 用composer 安装 10年软件开发经验,结交朋友! 分销商城系统开发,App商城开发 商务合作 s…

eclipse进入断点之后,一直卡死,线程一直在运行【记录一种情况】

问题描述: 一直卡死在某个断点处&#xff0c;取消断点也是卡死在这边的进程处。 解决方式&#xff1a; 将JDK的使用内存进行了修改 ① 打开eclipse&#xff0c;window->preference->Java->Installed JREs&#xff0c;选中使用的jdk然后点击右侧的edit&#xff0c;在…

打造基于终端命令行的IDE,Termux配置Vim C++开发环境

Termux配置Vim C开发环境&#xff0c;打造基于终端命令行的IDE 主要利用VimCoc插件&#xff0c;配置C的代码提示等功能。 Termux换源 打开termux&#xff0c;输入termux-change-repo 找到mirrors.tuna.tsinghua.edu.cn&#xff0c;清华源&#xff0c;空格选中&#xff0c;回…

LeetCode(力扣)40. 组合总和 IIPython

LeetCode40. 组合总和 II 题目链接代码 题目链接 https://leetcode.cn/problems/combination-sum-ii/ 代码 class Solution:def backtrackingz(self, candidates, target, result, total, path, startindex):if target total:result.append(path[:])return for i in range…

elasticsearch访问9200端口 提示需要登陆

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; elasticsearch访问9200端口 提示需要登陆 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 在E:\elasticsearch-8.9.1-windows-x86_64\elasticsearch-8.9.1\bin目录下输入命令 ela…

手写Spring:第5章-注入属性和依赖对象

文章目录 一、目标&#xff1a;注入属性和依赖对象二、设计&#xff1a;注入属性和依赖对象三、实现&#xff1a;注入属性和依赖对象3.0 引入依赖3.1 工程结构3.2 注入属性和依赖对象类图3.3 定义属性值和属性集合3.3.1 定义属性值3.3.2 定义属性集合 3.4 Bean定义补全3.5 Bean…

Flutter实用工具Indexer列表索引和Search搜索帮助。

1.列表索引 效果图&#xff1a; indexer.dart import package:json_annotation/json_annotation.dart;abstract class Indexer {///用于排序的字母JsonKey(includeFromJson: false, includeToJson: false)String? sortLetter;///用于排序的拼音JsonKey(includeFromJson: fal…