手把手教你创建并启动一个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打开这个项目尽情撸代码开发了,感谢你的阅读,我们下次再见。 

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

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

相关文章

数据库大作业——音乐平台数据库管理系统

W...Y的主页😊 代码仓库分享💕 《数据库系统》课程设计 :流行音乐管理平台数据库系统(本数据库大作业使用软件sql server、dreamweaver、power designer) 目录 系统需求设计 数据库概念结构设计 实体分析 属性分…

Go源码--sync库(3):sync.Pool(2)

回收 回收其实就是将 pool.local 置为空 可以让垃圾回收器回收 我们来看下 源码 func init() {// 将 poolCleanup 注册到 gc开始前的准备工作处理器中在 STW时执行runtime_registerPoolCleanup(poolCleanup) }这里注册了清理程序到GC前准备工作 也就是发生GC前需要执行这段代…

【吊打面试官系列-Mysql面试题】Myql 中的事务回滚机制概述 ?

大家好,我是锋哥。今天分享关于 【Myql 中的事务回滚机制概述 ?】面试题,希望对大家有帮助; Myql 中的事务回滚机制概述 ? 事务是用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个不可分割的工作单位…

flutter 打包 exe

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

数据库 | 试卷五试卷六试卷七

1. 主码不相同!相同的话就不能唯一标识非主属性了 2.从关系规范化理论的角度讲,一个只满足 1NF 的关系可能存在的四方面问题 是: 数据冗余度大,插入异常,修改异常,删除异常 3.数据模型的三大要素是什么&…

Electron+vite+vuetify项目搭建

最近想用Electron来进行跨平台的桌面应用开发。同时想用vuetify作为组件,于是想搭建一个这样的开发环境。其中踩了不少坑,总是会出现各种的编译错误和问题,依赖的各种问题,搞了好久最终环境终于弄好可正常开发了。这里分享下快速搭…

关于接口多态,何时使用接口名创建对象?何时使用子类创建对象?

接口创建对象只能创建他的实现类,所以会出现两种创建方式: 1、接口 对象名 new 类名 2、子类对象 对象名 new 类名 举个例子,swimming是一个接口,flog是他的一个实现类,重写了swimming的eat()方法 子类对象 对象名…

【QT】信号与槽

目录 概述 Q_OBJECT 自定义信号 自定义槽 带参数的信号和槽 信号与槽断开 定义槽函数时,使用lambda表达式 概述 所谓的信号槽,要解决的问题,就是响应用户的操作,这是QT与其他GUI开发框架比较不同的地方。其他的GUI开发框…

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

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

收银系统源码-千呼新零售2.0【线下促销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统,包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体,线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货等连锁店使用。 详细介绍请查看下…

百元内平价蓝牙耳机推荐,四款高热度平价耳机推荐!

在追求高品质音乐体验的同时,我们也不得不考虑预算的限制,不过市面上有不少百元内平价蓝牙耳机,它们在保证音质和舒适度的同时,也兼顾了价格的亲民性,身蓝牙耳机测评的达人,经手过不少的百元蓝牙耳机&#…

用android如何实现计算机计算功能

一.新建一个项目 步骤&#xff1a; 1.新建项目 2.选择 二.用户界面构建 找到项目的res的下面layout里面的activity.xml文件进行约束布局界面构建。 activity.xml代码如下&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.c…

http缓存及http2配置

http缓存及http2配置极大提高了网页加载得速度 1.1 nginx安装 首先是需要安装nginx 去官网下载windows版本的安装包 nginx 命令 nginx start //启动 nginx -s stop nginx -s reload // 重新运行 tasklist /fi "imagename eq nginx.exe" //进程 把打包好的文件copy…

关于Panabit在资产平台中类型划分问题

现场同事问了一个问题&#xff1a;Panabit能不能当做CentOS接入&#xff1f; 我第一反应是&#xff1a;Panabit是个什么鬼&#xff1f;为啥要混编接入&#xff1f;后期维护都是事啊。所以&#xff0c;我就想回答&#xff1a;不能&#xff01; 但是&#xff0c;最好要给出一个…

stable diffusion 局部重绘 reference-only api 接口调试

webUI api payload 插件生成的接口参数不准确&#xff0c;reference-only 的image不是对象&#xff0c;就是不同字符串字段&#xff0c;直接传&#xff0c;不是套image。 综上&#xff0c;那个插件参数不确定&#xff0c;应直接看插件的源码&#xff0c;看它接受什么参数 错误…

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局、工具栏带中文提示 1.在vue.config.js 文件中添加 一下内容2.下载安装插件3.在Editor组件中引入插件4.使用Editor组件&#xff08;特别注意要的加 v-if &#xff09;5.bug 之 imageResize的 img的style丢失1.先创建一…

第九届信也科技杯全球AI算法大赛——语音深度鉴伪识别参赛A榜 0.968961分

遗憾没有进复赛&#xff0c;只是第41名。先贴个A榜的成绩。A榜的前三十名晋级&#xff0c;个个都是99分的大佬&#xff0c;但是B榜的成绩就有点低了&#xff0c;应该是数据不同源的问题&#xff0c;第一名0.78分。官网链接&#xff1a;语音深度鉴伪识别 官方baselin:https://g…

企业设备管理现状与解决方案

在当今企业运营中&#xff0c;设备管理作为保障生产稳定、提升效率的重要环节&#xff0c;其复杂性和挑战性日益凸显。无论是生产车间、石油化工、物业小区&#xff0c;还是消防器材、建筑施工等领域&#xff0c;都面临着设备故障频发、维修流程繁琐等共性问题。 为了帮助企业…

一个简单、快速用于训练和微调中等规模GPT模型的开源项目

大家好&#xff0c;今天给大家分享的是一个简单、快速用于训练和微调中等规模GPT模型的开源项目&#xff0c;该项目旨在拓宽深度学习领域的应用&#xff0c;特别是为深度学习的入门者提供便利。 Nano GPT是一个基于PyTorch的开源项目&#xff0c;由前特斯拉AI负责人Andrej Ka…