手把手教你创建并启动一个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可能会因为证书过期而无法正常工作。您可以使用以下命令来更新npm 

npm install -g npm@latest

三、安装脚手架工具CLI

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

npm install -g @vue/cli 

 2、如果淘宝镜像地址身份过期,可以试试下面命令清除缓存 

npm cache clean --force

然后再试试这两个镜像地址,再重新操作上面的安装脚手架命令,这里我选择https://registry.npmmirror.com

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

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

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打开这个项目尽情撸代码开发了,感谢你的阅读,我们下次再见。 

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

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

相关文章

sqlite3指令操作-linux

1.查看当前数据库位置 2.查看当前数据库文件下有哪些表 3.显示 某表创建时的SQL语句 4.打开、关闭显示列标题; 5.列对齐显示 6.列以‘,’分隔显示 .separator 7.查询表信息 8.插入消息 9.删除某一行内容 10.修改某行某列内容 11.修改表名字 alter tab…

开发者黑板报#65

第65期 AI 谷歌Gemini 终于,GPT-4独霸时代终结了! 过去一个月里,四款大模型横空出世,在各项关键基准测试中与GPT-4相匹敌,甚至更胜一筹。 谷歌Gemini 1.5突破100万个tokens,是GPT-4的近8倍&#xff0c…

办公楼导航系统:设计要点、功能实现与效益评估

随着现代办公楼的日益复杂化和规模化,如何高效、便捷地在楼宇内部进行定位和导航,已成为众多企业和员工关注的焦点。维小帮办公楼定位导航系统通过精准的定位和智能的导航功能,能够显著提升办公环境的智能化水平和办公效率。 一、维小帮办公…

嵌入式实验---实验一 通用GPIO实验

一、实验目的 1、掌握STM32F103 GPIO程序设计流程; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、通过按键实现:按键按下,LED点亮;按键释放,LED熄灭。 三、实验设备和器材 电脑、Keil uVision5软件、Proteus…

Top10在线音频剪辑软件,你了解几款?(免费分享)

多年来,随着音乐制作人和音频工程师的需求不断增长,音频剪辑软件领域经历了巨大的发展。最新的音频剪辑软件提供了从基本录制到最终发布所需的一切功能。其中一些软件专为播客设计,一些软件是免费的,并且一些软件提供了出色的音效…

【Win】双系统新体验:Hyper-V上macOS安装攻略

在虚拟化的世界里,Hyper-V是探索不同操作系统的一扇大门。尽管macOS并不是Hyper-V官方支持的来宾操作系统,但这并未阻挡技术探索者的脚步。他们通过不懈努力,开辟出了一条条通往macOS的非官方路径。这些路径或许曲折,却为那些渴望…

Z世代职场价值观的重塑:从“班味”心态到个人成长的追求

近日,社交平台Soul APP联合上海市精神卫生中心(俗称“宛平南路600号”)发布《2024年Z世代职场心理健康报告》(下称“报告”),发现今天的年轻人正以其独特的价值观和行为模式,重新定义成功与成就…

机器学习_SVM支持向量机

引入:在面对线性可分时,即用一条直线就可以区分数据的时候,需要将直线放在距离数据点距离最大化的位置,这个过程需要寻找最大间隔,即为最优化问题。当数据点不能用一根直线区分——线性不可分,就需要用核函…

瑞数信息入选IDC《中国WAAP厂商技术能力评估,2024》

5星满分:WAF、Bot流量管理、行业应用等评估维度 日前,全球领先的IT市场研究和咨询公司IDC发布《中国WAAP厂商技术能力评估,2024》。报告聚焦WAAP能力,通过对中国市场中主要WAAP产品提供商的技术评估以及对大量最终用户的客观访谈…

SpringBoot配置第三方专业缓存技术Ehcache

Ehcache缓存技术 我们刚才是用Springboot提供的默认缓存技术 我们用的是simple 是一个内存级的缓存 我们接下来要使用专业的缓存技术了 Ehcache 是一个流行的开源 Java 分布式缓存,由 Terracotta 公司开发和维护。它提供了一个快速、可扩展、易于集成的内存缓存…

【LeetCode最详尽解答】11-盛最多水的容器 Container-With-Most-Water

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家! 链接: 11-盛最多水的容器 直觉 这个问题可以通过可视化图表来理解和解决。 通过图形化这个…

防止员工离职导致数据泄露,员工离职后把文件带出公司

中科数安的电脑文件资料透明加密防泄密系统确实能够在一定程度上防止员工离职导致的数据泄露。以下是具体的分析: www.weaem.com 访问控制与权限管理:系统实施了严格的权限管理制度,对核心文件和数据资源进行细致的访问权限划分。这意味着&am…

从零开始! Jupyter Notebook的安装教程

🚀 从零开始! Jupyter Notebook的安装教程 摘要 📄 Jupyter Notebook 是一个广受欢迎的开源工具,特别适合数据科学和机器学习的开发者使用。本文将详细介绍从零开始安装 Jupyter Notebook 的步骤,包括各种操作系统的安装方法&am…

大屏适配方案汇总

1. 适配方案1:rem font-size 我们都知道,在 css 中 1rem 等于 html 根元素设定的 font-size 的 px 值,通过动态的修改html 根元素的 font-size 大小就能动态的改变 rem 的大小,从而实现适配。 原理 动态设置 HTML 根字体大小将…

产品交付能力提升的探索与分享

在当前激励的市场竞争环境下,对项目交付的成本和毛利要求越来越高。如何能快速高效地完成项目交付已然成为我们矢志追求的目标。抛开人为因素对项目交付效率的影响,产品本身的交付能力才是关键。因此,在设计新产品时需要考虑其便捷交付性&…

Linux下调试代码——gdb的使用

1. 文件准备: 测试代码: Makefile文件: 执行结果: 此时,我们的结果是存在问题的,即最终结果少了100。现在我们用gdb来调试它。 我们发现我们还没有安装gdb,这里安装一下。 2. 环境准备&#…

Inno Setup 打包java程序

Inno Setup工具打包java程序(包括mysql) 一:准备安装工具(点击即下载) 1.innosetup 2.battoexe 二:需要打包的内容放同一个文件夹 三.使用battoexe将.bat文件转变为.exe文件 转后的.exe放在同个文件夹 四.使用innosetup进行…

flutter 打包 exe

采用官方的MSIX打包 原文链接 https://blog.csdn.net/weixin_44786530/article/details/135308360 第一步:安装依赖 在项目根目录,执行命令: flutter pub add --dev msix 等待安装完成,就好了 第二步:打包编译 当m…

富唯智能复合机器人

复合机器人&产品概述 富唯智能复合机器人集协作机器人、移动机器人和视觉引导技术于一体,搭载ICD系列核心控制器,一体化控制整个复合机器人系统,并且可以对接产线系统,搭配我司自研的2D/3D视觉平台,能够轻松实现工…

Gobject tutorial 七

The GObject base class GObject是一个fundamental classed instantiatable type,它的功能如下: 内存管理构建/销毁实例set/get属性方法信号 /*** GObjectClass:* g_type_class: the parent class* constructor: the constructor function is called by g_object…