vue项目完整搭建与启动

vue项目完整搭建与启动

  • 一,安装node环境
  • 二,安装vue脚手架(vue-cli)
    • 1.cnpm(淘宝镜像安装)
    • 2.npm安装
    • 3.yarn安装
  • 三,创建vue项目
  • 四,cmd切换目录
    • 方式1
    • 方式2

一,安装node环境

1.下载地址:Node.js

2.查看是否安装成功
1-1.在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口
在这里插入图片描述
node -v查看,输出版本号安装成功
npm -v查看自带npm是否安装成功
(npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西)

二,安装vue脚手架(vue-cli)

1.cnpm(淘宝镜像安装)

我这边用的就是这个方法,主要会讲这个方法
1.输入:npm install -g cnpm –registry=https://registry.npm.taobao.org

淘宝镜像安装

2.这里特别需要注意的一点就是node和cnpm对应的版本号上面的方法安装的是最新的版本和我当前node的版本号并不对应,汇报如下错误:
安装错误代码判断

3.我这里node版本是v12.20.2,所以我这里要换成**@7.1.1**版本
输入: npm install -g cnpm@7.1.1 --registry=http://registry.npmmirror.com

cnpm安装成功

4.检查是否安装成功:cnpm -v
检查是否安装成功

5.全局安装vue-cli
npm install -g @vue/cli //国外下载
cnpm install -g @vue/cli //镜像源下载(需要安装cnpm)
yarn global add @vue/cli
安装vue-cli

6.检查安装是否成功
检查vue-cli安装是否成功

2.npm安装

3.yarn安装

三,创建vue项目

1.创建文件名 :vue create (‘文件名’)
创建vue项目

2.按照下面的提示敲回车,创建成功后如下:
项目创建成功

3.启动项目,一次输入前面的蓝色字体
在这里插入图片描述

4.启动成功,把上面网址输入到浏览器就可以看到如下页面
启动成功

四,cmd切换目录

方式1

1.打开文件到你要切换的目录位置
目录位置
2.在搜索栏直接输入cmd,Enter按回车键就可直接进入
在这里插入图片描述
3.如图:

在这里插入图片描述

方式2

在这里插入图片描述

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

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

相关文章

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我创建的投票列表实现

锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

GitLab clone 地址 不对

1丶问题描述 2丶解决方案 解决方案: 找到挂载到宿主机配置文件:gitlab.rb vi gitlab.rb 改成自己的ip 重启容器 docker restart gitlab 如果发现容器一直重启,可采用粗暴的方法,直接干掉当前容器,重新运行一个 …

SpringMVC-异常处理及常用组件

异常处理器 1.基于配置的异常处理 springmvc提供了一个处理控制器方法执行过程中所出现的异常的接口: HandlerExceptionResolver HandlerExceptionResolver接口的实现类有: DefaultHandlerExceptionResolver和SimpleMappingExceptionResolver springmvc提供了自定义的异常处…

Apache Doris (六十二): Spark Doris Connector - (2)-使用

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. 将编译jar包加入本地Maven仓库

全版本Windows RCE漏洞复现CVE-2023-36025

漏洞简介 CVE-2023-36025是微软于11月补丁日发布的安全更新中修复Windows SmartScreen安全功能绕过漏洞。攻击者可以通过诱导用户单击特制的URL来利用该漏洞,对目标系统进行攻击。成功利用该漏洞的攻击者能够绕过Windows Defender SmartScreen检查及其相关提示。该漏…

2024年【R2移动式压力容器充装】考试资料及R2移动式压力容器充装理论考试

题库来源:安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试资料根据新R2移动式压力容器充装考试大纲要求,安全生产模拟考试一点通将R2移动式压力容器充装模拟考试试题进行汇编,组成一套R2移动式压力容器充装全真模拟考试试题&a…

Node.js和npm

目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化…

02-python的基础语法-01python字面量/注释/数据类型/数据类型转换

字面量 在代码中,被写下来的固定的值,被称为字面量。 python中哪些值是可以被写出来的呢?又该如何写呢? 字符串:又称文本,是由任意数量的字符如中文,英文,各类符号,数字组成。 这…

ES-极客学习第二部分ES 入门

基本概念 索引、文档、节点、分片和API json 文档 文档的元数据 需要通过Kibana导入Sample Data的电商数据。具体参考“2.2节-Kibana的安装与界面快速浏览” 索引 kibana 管理ES索引 在系统中找到kibana配置文件(我这里是etc/kibana/kibana.yml) vim /…

esp32UART串口外设(Arduino)

通用异步接收器/发送器 (UART) 介绍 通用异步接收器/发送器 (UART) 是一种硬件功能,它使用广泛采用的异步串行通信接口(如 RS232、RS422 和 RS485)处理通信(即时序要求和数据成帧&…

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…

用html和css实现一个加载页面【究极简单】

要创建一个简单的加载页面&#xff0c;你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例&#xff1a; HTML 文件 (index.html): <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…

JavaScript中解锁Map和Set的力量

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 ES6带来了Map和Set两个新的数据结构 - 它们分别用于存放键值对和唯一值。Map和Set提供了更…

深入浅出Go语言:匿名函数的原理和实践案例

深入浅出Go语言&#xff1a;匿名函数的原理和实践案例 引言匿名函数的基础实际应用案例一实际应用案例二性能考虑最佳实践与常见错误结语 引言 在Go语言的世界里&#xff0c;有一个功能强大且灵活的编程元素值得每位开发者深入了解——匿名函数。作为Go语言核心特性之一&#…

AI论文润色平台一览,让你的论文更加流畅易懂!

之前其实比较犹豫&#xff0c;是否应该整理一篇关于可辅助论文写作的在线平台的文章。因为论文这个事情&#xff0c;更重要的是要有个人的思考&#xff0c;要亲自动手写&#xff0c;这涉及到诚信的问题。然而&#xff0c;通过AI直接生成的论文可能很难通过查重和AI检测&#xf…

计算机二级WPS Office考试须知、如何备考、备考建议

本文从计算机二级考试须知、如何备考、备考建议以及考试的注意事项等方面进行讲述&#xff0c;认认真真看&#xff0c;对你受益匪浅。 一、计算机二级考试须知 2021年3月27日至29日将举办第60次全国计算机等级考试&#xff08;NCRE&#xff09;&#xff0c;从今年起&#xff0…

40-特殊运算符delete,new,.getDate,.setDate,运算符优先级

1.delete删除. 数组 // 可以删除数组元素&#xff0c;可以删除对象键值对// 删除数组的值&#xff0c;数组长度保持不变// 删掉的值变成emptyvar arr [1,2,3,4,5];delete arr[0];console.log(arr); 对象 var obj {"a":"aa","b":"bb&quo…

什么是云安全?如何保护云资源

云计算允许组织通过互联网按需向其客户、合作伙伴或员工提供关键业务应用程序、服务和资源。换句话说&#xff0c;不再需要物理维护资源。每当您通过 Internet 从计算机访问文件或服务时&#xff0c;您都是在访问云。 迁移到云可以帮助企业增强安全性、简化运营并降低成本。企…

理解接雨水算法

一、IDEA注释显示图片 在做题时&#xff0c;需要对照这图片&#xff0c;才能更好的梳理思路。 首先&#xff0c;注释里添加<img/>标签 之后&#xff0c;将鼠标光标放置在需要以阅读模式预览注释的地方&#xff0c;然后按快捷键CtrlAltQ即可 二、接雨水算法 先看接雨水…

【Spring实战】27 统一异常处理最佳实践

文章目录 1. 自定义异常2. 统一异常处理3. 配置4. 应用5. 启动类6. 启动服务7. 验证8. 优点总结 在 Spring 项目中&#xff0c;有效的异常处理是确保应用程序稳定性和用户体验的关键因素之一。通过实现统一异常处理&#xff0c;我们能够更好的管理和响应应用程序中的各种异常情…