如何运行vue项目(超详细图解)

news2025/2/25 17:57:18

📖本篇超级详细案例截图教学 如何运行别人的vue项目,图片点击可放大仔细看

一、查看node.js版本

Vue环境配置教程 :https://blog.csdn.net/m0_57545353/article/details/124366678

配置完成后分别在cmd中执行node -v查看是否安装成功,出现版本号就安装成功了

进入cmd命令行窗口,

输入node -v查看nodejs版本

输入npm -v查看npm版本

node -v
npm -v

如下图 如所示,即为安装成功:

在这里插入图片描述

二、运行别人的项目的前提准备

1、删除package-lock.json和node_modules 文件

package-lock.json记录了整个node_moudles文件夹的树状结构,还记录了模块的下载地址,但是它是基于项目作者的npm版本库生成的,若不删掉这个依赖文件,容易出现npm版本差异导致的报错。

在这里插入图片描述

2、进入项目的终端

1.首先,进入vue项目所在目录(如下图所示)

在这里插入图片描述

2.在当前路径框中输入【cmd】,回车

在这里插入图片描述

3、清除npm缓存

npm有缓存时,常常出现安装依赖不成功的现象,且一旦出现这个问题,报错信息很完善,但根据报错信息一项一项去解决,却死活解决不了,还找不出原因。控制台输入下面命令清除npm缓存,npm有缓存时,常常出现安装依赖不成功的现象

npm cache clean -force

4、重新安装依赖。

npm install

在这里插入图片描述

5、最后运行项目。

npm run serve

在这里插入图片描述
6、成功
在这里插入图片描述
7.浏览器输入地址:http://localhost:8080 ,出现界面

在这里插入图片描述

三、运行vue的三种方法

第一种方法:cmd下运行

(根据项目路径依次输入命令)

1、首先,进入vue项目所在目录(如下图所示)

在这里插入图片描述

2、在当前路径框中输入【cmd】,回车

在这里插入图片描述

3、在启动的命令行窗口输入【npm run serve】,回车
在这里插入图片描述

4、成功

在这里插入图片描述

第二种方法:IDEA开发工具打开

打开IDEA
在这里插入图片描述

File - open -选择源码文件夹下的文件夹(一定要记住)

在这里插入图片描述

在这里插入图片描述

这样就成功导入源码。

在IDEA中配置vue插件
点击File–>Settings–>Plugins–>搜索vue.js插件进行安装,下面的图中我已经安装好了。

在这里插入图片描述

🎩方法1(推荐使用):

1、给idea设置自启动便捷方式,方便启动项目
在idea中点击下图的地方,选择Edit Configurations
在这里插入图片描述

2、选择npm
在这里插入图片描述
3、根据项目而来有些事dev有些是serve ,这里选择serve,然后先Apply在Ok
在这里插入图片描述
4、点击,以后项目直接点击这个就可以运行

在这里插入图片描述
5、成功,如下图
在这里插入图片描述

🎩方法2:

1、点击view-Tool Windows-Terminal

在这里插入图片描述
2、输入npm run serve

在这里插入图片描述

3、出现地址
在这里插入图片描述

第三种方法:VSCode开发工具运行

vscode:安装教程:https://blog.csdn.net/MSDCP/article/details/127033151

1、打开vscode

在这里插入图片描述

2、打开前端代码文件
在这里插入图片描述
3、新建终端
在这里插入图片描述
4、输入npm run serve

在这里插入图片描述

5、成功

在这里插入图片描述

6、浏览器输入localhost:8080

在这里插入图片描述

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

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

相关文章

js常用的加密/解密方法

1.前言(老司机直接跳过) 为什么js需要加密 谈到加密,大多数人应用场景都在于后端接口的加密签名校验。这种一般都用于服务端与服务端之间的相互调用,避免第三方使用你的接口做违法违规的事情,这种加密校验比较安全,因为没有暴露在…

React中使用Redux (一) - 在React中直接使用Redux

React中使用Redux 开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。 尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描…

Vue3中Vuex的使用

Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。 例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我…

el-input无法输入的问题和表单验证失败问题

1.el-input无法输入的问题原因1、el-input组件没有绑定双向响应式数据(v-model)解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。原因2、组件嵌套太深还是该组件是一个坑(…

【node】升级 Node 版本教程

文章目录Window 系统Mac 或 Linux系统Window 系统 window系统升级node只能到node官网下载window安装包来覆盖之前的node。node 安装教程附下载地址:https://blog.csdn.net/qq_45677671/article/details/114535955因为 n 模块是不支持window系统: PS C:…

el-table表格动态合并行、合并行列及详解

📝 个人简介 ⭐ 个人主页:我是段段🙋‍ 🍊 博客领域:编程基础、前端💻 🍅 写作风格:干货!干货!都是干货! 🍑 精选专栏:Vue…

解决Vuex刷新页面数据丢失的问题

一:数据丢失的原因 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例&#…

Nuxt3项目搭建(Nuxt3+element-plus+scss详细步骤)

小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置(可选),scss的安装(可选&…

HTML的基本标签及属性

HTML1. 标题与段落标签2. 文本修饰标签3. 图片标签4. 链接标签5. 无序、有序列表与定义列表6. 表格、表单标签7. div与span标签1. 标题与段落标签 (1) 标题标签是一对双标签&#xff1a;<h1></h1>&#xff0c;<h2></h2>&#xff0c;<h3></h3&…

Layui表格可编辑 可动态新增一行 删除当前行

Layui 表格 可编辑&#xff1a;点击表格实现可编辑 cols: [[ //表头 {type: numbers, title: ID, width: 80, align: "center", sort: true} , {field: project, title: 项目, minWidth: 80, align: "center", edit: text} ]] 在表头的对象中增加 edit: …

前端必学的CSS3波浪效果演示

目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言 随着前端技术的不断发展与进步&#xff0c;界面交互的样式要求和美感也越来越高&#xff0c;很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开…

vue路由配置

1、路由的使用 一、安装路由 npm i vue-router 二、配置路由 在根目录下创建文件夹router&#xff0c;在router文件夹下创建index.js文件&#xff0c;如下图所示 在index.js文件中写入如下代码&#xff0c;实现创建一个路由器 import VueRouter from "vue-router&qu…

Object.defineproperty方法(详解)

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性&#xff0c;或者修改一个已经存在的属性 Object.defineproperty可以接收三个参数 Object.defineproperty(obj, prop, desc) obj : 第一个参数就是要在哪个对象身上添加或者修改属性 prop : 第二个参数就是…

HTML网站导航栏的制作

一、导航条的制作 &#xff08;1&#xff09;代码图 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…

photo-sphere-viewer中文文档

photo-sphere-viewer中文文档安装插件Configuration 配置项Standard options 常规配置container (required)adapter 适配器panorama (required)plugins 插件caption 标题size 全景图宽度高度markers 标注navbar 导航栏minFovmaxFovdefaultZoomLvlfisheyedefaultLongdefaultLatl…

vue+element-ui前端使用print-js实现打印,可自定义样式(横纵向,缩放比,字体大小,背景色)

vueelement-ui前端使用print-js实现打印下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向&#xff08;IE不生效&#xff09;设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数print-js官网链接: https:/…

vue 3 项目实战一(绘制登录界面)

目录 一、概述 二、创建vue项目 三、需求分析 四、构建组件 五、vue组件之间的通信 一、概述 本文记录了项目实现的详细步骤以及原理&#xff0c;十分适合初学vue的萌新练手&#xff0c;也是阶段性学习的一个总结&#xff0c;可能会有些啰嗦&#xff0c;勿怪~。 先从登录…

PostMan——安装使用教程(图文详解)

为了验证接口能否被正常访问&#xff0c;我们常常需要使用测试工具&#xff0c;来对数据接口进行检测。 好处&#xff1a;接口测试工具能让我们在不写任何代码的情况下&#xff0c;对接口进行调用和调试。 下载并安装PostMan 首先&#xff0c;下载并安装PostMan&#xff0c;请…

若依管理系统RuoYi-Vue(前后端分离版)项目启动教程

RuoYi-Vue 是一个 Java EE 企业级快速开发平台&#xff0c;基于经典技术组合&#xff08;Spring Boot、Spring Security、MyBatis、Jwt、Vue&#xff09;&#xff0c;内置模块如&#xff1a;部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在…

【Vue】Axios详解

文章目录1 Axios简介1.1 什么是Axios?1.2 Axios的特性2 Axios的使用2.1 Axios的安装2.2 Axios的创建2.2.1 Proxy配置代理2.2.1.1 核心代码2.2.1.2 代码解释2.2.1.3 多个跨域2.2.2 Axios的二次封装2.2.2.1 为什么要二次封装2.2.2.2 Axios实例化2.2.2.2.1 引入2.2.2.2.2 创建axi…