手把手教你创建并启动一个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…

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

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

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

作者 | 曾响铃 文 | 响铃说 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. 以太坊的诞生…

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

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

油猴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;我还是觉得太麻烦了。打算直接配置多数据源。 然后去另一个数据库系统中取出数据…

深信服科技:2023网络钓鱼趋势分析报告

随着互联网的快速发展和广泛应用&#xff0c;网络钓鱼活动带来的安全隐患愈演愈烈。因应威胁发展&#xff0c;我 们编撰了此份分析报告&#xff0c;旨在全面了解其发展态势&#xff0c;并提醒相关部门、企业和公众加强防范。 在本报告中&#xff0c;我们将详细梳理网络钓鱼的近…

IBM,开始构建以量子为中心的超级计算机

6月6日&#xff0c;IBM与Pasqal宣布了一项重大合作!IBM和Pasqal打算合作开发一种以量子为中心的超级计算的通用方法并促进化学和材料科学的应用研究。IBM和Pasqal将与高性能计算领域的领先机构合作&#xff0c;为以量子为中心的超级计算奠定基础——将量子计算与先进的经典计算…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第44课-骨骼动画

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第44课-骨骼动画 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎&…

开放式耳机哪个牌子好?2024五大闭眼入开放式耳机推荐!

想要购买开放式耳机&#xff0c;但面对很多品牌和型号&#xff0c;是否感到无从下手&#xff1f;别担心&#xff0c;作为耳机发烧友和测评专家&#xff0c;我为大家带来了几款热门开放式耳机的横向对比。从各个方面进行详细对比&#xff0c;还有我自己觉得还不错的五款开放式耳…

微型导轨的摩擦系数分析!

微型导轨的摩擦力主要包括滑动摩擦力和滚动摩擦力&#xff0c;摩擦系数是一个关键参数&#xff0c;它决定了滑块在导轨上运动时所受到的摩擦力大小&#xff0c;摩擦系数越低&#xff0c;系统的运动效率和精度就越高&#xff0c;而微型导轨的摩擦系数是受多个因素影响的。 微型导…