手把手教你创建并启动一个Vue3项目(Windows版)

一、Node安装

1、下载地址:Node.js — Run JavaScript Everywhere

2、安装Node,双击启动一直Next

3、验证安装Node是否成功,打开CMD命令窗口,输入node -v,显示版本就表示成功

 4、验证安装npm是否成功,npm是Node中自带的打包工具,输入npm -version,输出npm版本号即表示安装成功

二、切换镜像源

1、因为npm的资源默认采用国外的,国内执行对应的安装口令会比较慢,所以我们可以把npm资源切换到国内,这样安装框架的速度就会提升。这里我们切换到国内的淘宝镜像。

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

2、运行完成后并没有提示,但是可以运行查看口令,验证是否切换成功。

npm config get registry

3、如果淘宝镜像地址身份过期,可以试试下面原生镜像地址:

npm config set registry https://registry.npmmirror.com

4、有时候,旧版本的npm可能会因为证书过期而无法正常工作。您可以使用以下命令来更新npm 

npm install -g npm@latest 

三、安装手脚架工具CLI

1、安装Vue CLI,这里我用的是原生惊镜像地址:https://registry.npmmirror.com,淘宝镜像地址证书过期

npm install -g @vue/cli

2、 如果淘宝镜像地址身份过期,可以试试下面原生镜像地址:

npm config set registry https://registry.npmmirror.com

3、最后如上图显示,我们就完成我们VUE脚手架的安装了,我们在命令窗口用口令查看当前脚手架版本。 

vue -V

四、创建和启动一个Vue新项目 

1、在命令行窗口输入下面创建一个名称为my-vue-app的Vue新项目

vue create my-vue-app

2、这里可以用键盘上下箭头选择Vue3还是Vue2,这里我们选择Vue3,回车等待一会儿,如果成功就会显示如下

3、上图红色部分,表示在路径C:\Users\xulijun下成功创建了一个名称叫my-vue-app的vue3项目,我们可以输入下面命令启动这个vue3新项目

cd my-vue-app

npm run serve

4、上面截图显示我们已经成功启动了这个项目,我们可以通过下面两个地址进行访问这个项目,

其中下面这个地址的IP是Node给你创建的一个外网虚拟IP,按住Ctrl+鼠标左键直接点击即可访问

至此,我们就已经成功创建并启动了一个Vue3项目,后续我们可以安装VSCode打开这个项目尽情撸代码开发了,感谢你的阅读,我们下次再见。 

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

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

相关文章

Elasticseach RestClient Api

Elasticsearch RestclientApi基础用法 查询 索引库 初始化 添加依赖 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId> </dependency>创建链接 package com…

【QT】C++单冒号‘:’和双冒号‘::’的大白话讲解

在C编程中&#xff0c;双冒号 (::) 和单冒号 (:) 是 各自有不同的用途。 双冒号 :: 双冒号在C中被称为“作用域解析运算符”&#xff08;Scope Resolution Operator&#xff09;&#xff0c;主要用于以下几种情况&#xff1a; 全局作用域&#xff1a; int x 10;void foo() {…

【The design pattern of Attribute-Based Dynamic Routing Pattern (ADRP)】

In ASP.NET Core, routing is one of the core functionalities that maps HTTP requests to the corresponding controller actions. While “Route-Driven Design Pattern” is a coined name for a design pattern, we can construct a routing-centric design pattern base…

数据资产价值如何分析评估?

引言&#xff1a;当企业完成了数据治理&#xff0c;形成了数据资产&#xff0c;负责的部门数据中心对数据资产缺乏直观的展示方式&#xff0c;有多少数据资产&#xff0c;资产如何分布&#xff0c;领导两眼一抹黑&#xff1f;数据资产生产过程不透明&#xff0c;数据质量如何&a…

QCustomPlot使用手册目录

QCustomPlot之开始&#xff08;一&#xff09; QCustomPlot之个性化外观&#xff08;二&#xff09; QCustomPlot之柱状图&#xff08;三&#xff09; QCustomPlot之层和布局&#xff08;四&#xff09; QCustomPlot之轴矩形和轴&#xff08;五&#xff09; QCustomPlot之简单动…

发力采销,京东的“用户关系学”

作者 | 曾响铃 文 | 响铃说 40多岁打扮精致的城市女性&#xff0c;在西藏那曲的偏远农村&#xff0c;坐着藏民的摩托车&#xff0c;行驶在悬崖边的烂泥路上&#xff0c;只因为受顾客的“委托”&#xff0c;要寻找最原生态的藏区某款产品。 30多岁的憨厚中年男性&#xff0c;…

485通信协议

文章目录 STM32-20-4851. 485总线2. 485相关HAL库驱动3. 485配置步骤4. 代码实现 STM32-20-485 1. 485总线 串口、UART、TTL、RS232、RS422、RS485关系&#xff1a; 关系与区别&#xff1a; 特性串口UARTTTLRS232RS422RS485定义数据传输接口硬件设备电平标准通信标准通信标准…

安享智慧理财金融测试项目

1. 项目介绍 安享智慧理财金融系统是基于 Java 语言开发&#xff0c;集 PC 端、APP 端、WAP 端为一体的 P2P&#xff08;个人对个人&#xff09;的借贷系统&#xff0c;提供了完整的借款和投资功能。 web用户端 说明&#xff1a;PC 网站&#xff0c;供借款人和投资人使用功能…

疯狂买买买!你的支付环境真的安全吗?

在日常生活中&#xff0c;移动电话为我们带来了更多的方便。然而&#xff0c;我们在享受手机支付的便捷之余&#xff0c;也应充分认识到风险&#xff0c;增强防范意识&#xff0c;慧眼识诈。 小亿提醒&#xff1a;大家在购物之余&#xff0c;务必要注意手机支付的安全性&#…

2021 hnust 湖科大 C语言课程设计报告+代码+流程图源文件+指导书

2021 hnust 湖科大 C语言课程设计报告代码流程图源文件指导书 目录 报告 下载链接 https://pan.baidu.com/s/14NFsDbT3iS-a-_7l0N5Ulg?pwd1111

系统架构——Spring Framework

目录 &#xff08;1&#xff09;基本介绍 &#xff08;2&#xff09;基本发展历史 &#xff08;3&#xff09;了解和学习 Spring 4.x 系列的系统架构 1、第一个模块&#xff1a;做核心容器&#xff08;Core Contaner&#xff09; 2、第二个模块&#xff1a;AOP与Aspects(这…

Flink 反压

反压 Flink反压是一个在实时计算应用中常见的问题&#xff0c;特别是在流式计算场景中。以下是对Flink反压的详细解释&#xff1a; 一、反压释义 反压&#xff08;backpressure&#xff09;意味着数据管道中某个节点成为瓶颈&#xff0c;其处理速率跟不上上游发送数据的速率…

Chrome插件开发入门:手把手教你创建第一个扩展

问题背景 最近&#xff0c;客户发布了一个新的任务 —— 开发一个Chrome插件。之前没有这方面的开发经验&#xff0c;准备想学习一下这块的内容&#xff0c;我发现网上的大多数视频都是几年前的&#xff0c;开发版本都是基于MV2&#xff0c;当前谷歌已经开始使用MV3&#xff0…

【区块链】以太坊白皮书深度解读:构建智能合约的分布式平台

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 以太坊白皮书深度解读&#xff1a;构建智能合约的分布式平台引言1. 以太坊的诞生…

vue3 的 watch 不能监视 toRef 的值

* 情况一let props withDefaults(defineProps<{ list: Array<any> }>(), {list: () > [],})const list toRef(props.list)watch(list.value, (newVal, oldVal) >{console.log(newVal, newVal) })-------------------------------------------------------…

Nuxt快速学习开发---Nuxt3视图Views

Views Nuxt提供了几个组件层来实现应用程序的用户界面 默认情况下&#xff0c;Nuxt 会将app.vue文件视为入口点并为应用程序的每个路由呈现其内容 应用程序.vue <template> <div> <h1>Welcome to the homepage</h1> </div> </template> …

【杂记-浅谈Sequence Number/序列号】

文章目录 一、Sequence Number序列号概述二、Sequence Number序列号作用三、Sequence Number的工作原理及重要性 一、Sequence Number序列号概述 Sequence Number&#xff0c;即序列号&#xff0c;是计算机网络中TCP/IP协议的一个重要概念&#xff0c;主要用于保证数据传输的可…

油猴hook+内存爆破

hook方式 说明&#xff1a;来回翻页发现只有请求体的token需要逆向&#xff0c;而这个请求体是在params里&#xff0c;拼接到url里&#xff0c;可以直接用油猴hook url里的关键字token。 正常步骤 hook代码 // UserScript // name hookparams // namespace htt…

【C语言】扫雷游戏

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

springBoot多数据源使用、配置

又参加了一个新的项目&#xff0c;虽然是去年做的项目&#xff0c;拿来复用改造&#xff0c;但是也学到了很多。这个项目会用到其他项目的数据&#xff0c;如果调用他们的接口取数据&#xff0c;我还是觉得太麻烦了。打算直接配置多数据源。 然后去另一个数据库系统中取出数据…