零基础如何使用IDEA启动前后端分离中的前端项目(Vue)?

一、在IDEA中配置vue插件

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

 二、搭建node.js环境

安装node.js 可以去官网下载:安装过程就很简单,直接下一步就行

 测试是否安装成功:要使用管理员方式打开命令行cmd

        安装完成之后,打开命令行工具,输入node -v如果出现版本号,则说明安装成功,npm包管理器是集成在node中的,所以,直接输入npm -v 就会显示npm版本信息

        node环境已经安装成功,由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以还需要安装npm的国内镜像----cnpm

三、安装cnpm(注意都是管理员方式运行)

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安装

 

四、安装vue-cli脚手架构建工具(注意都是管理员方式运行)

        在命令行中运行命令cnpm install -g vue-cli,然后等待安装完成,通过以上三步,我们的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

五、构建运行项目

        需要在命名行中,cd 到项目目录中去,然后需要输入命令:vue init webpack xxxx(这里命令的意思是初始化一个项目,项目名称是xxxx,其中webpack是构建工具,也就是整个项目时基于webpack的)

        运行命令初始化的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息,可以直接回车默认就可以了。

 

六、安装项目依赖资源

 

这里列出了项目需要安装的依赖资源

首先需要cd到项目目录中去,然后输入cnpm install 等待安装,安装中会出现警告信息,有的会出现栈溢出等错误,一般第一次安装没事,如果安装过的,可以卸载了在重新安装

 

 七、运行项目

运行命令npm run dev会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新,浏览器就能实时看到修改后的效果

 

我们也可以在IDEA中配置运行

 点击edit configurations配置,添加一个npm

 然后就可以在IDEA中运行了。

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

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

相关文章

[JDK8下的HashMap类应用及源码分析] 数据结构、哈希碰撞、链表变红黑树

系列文章目录 [Java基础] StringBuffer 和 StringBuilder 类应用及源码分析 [Java基础] 数组应用及源码分析 [Java基础] String,分析内存地址,源码 [JDK8环境下的HashMap类应用及源码分析] 第一篇 空构造函数初始化 [JDK8环境下的HashMap类应用及源码分…

Java基础 数据结构一【栈、队列】

什么是数据结构 数据结构是计算机科学中的一个重要概念,用于组织和存储数据以便有效地进行访问、操作和管理。它涉及了如何在计算机内存中组织数据,以便于在不同操作中进行查找、插入、删除等操作 数据结构可以看作是一种数据的组织方式,不…

React + Next.js 搭建项目(配有对比介绍一起食用)

文章标题 01 Next.js 是什么02 Next.js 搭建工具 create-next-app03 create-react-app 与 create-next-app 的区别04 快速构建 Next.js 项目05 App Router 与 Pages Router 的区别 01 Next.js 是什么 Next.js 是一个 React 框架,它允许你使用 React 框架建立超强的…

Python(Web时代)—— Django数据库(多表)

两表联查 常见的两表关系: 一对多:ForeignKey 举例:一个学生对应多个地址 一般通过外键实现 需要在“多”的那个模型中使用ForeignKey 使用on_delete指定级联删除策略: CASCADE:当父表数据删除时,相对…

前端工程化

一、前端发展阶段概述 1、混沌期 整个江湖中只有一个传奇,就是”程序员” 这种模式下对人员的综合要求高,开发者既要会数据库开发(SQL)、又要会服务器端开发(Java、C#、Php),还要会基本的前端…

使用 Netty 实现群聊功能的步骤和注意事项

文章目录 前言声明功能说明实现步骤WebSocket 服务启动Channel 初始化HTTP 请求处理HTTP 页面内容WebSocket 请求处理 效果展示总结 前言 通过之前的文章介绍,我们可以深刻认识到Netty在网络编程领域的卓越表现和强大实力。这篇文章将介绍如何利用 Netty 框架开发一…

<C++> STL_list

1.list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向 其前一个元素和后一个元素。list与…

ELK日志收集系统

目录 一、概述 二、组件 一、logstash 一、工作过程 二、INPUT 三、FILETER 四、OUTPUTS 二、elasticsearch 三、kibana 三、架构类型 一、ELK 二、ELKK 三、ELFK 四、ELFKK 五、EFK 四、配置ELK日志收集系统集群实验的步骤文档 五、配置ELK日志收集系统集群 …

【JAVA基础】数据类型,逻辑控制

❤️ Author: 老九 ☕️ 个人博客:老九的CSDN博客 🙏 个人名言:不可控之事 乐观面对 😍 系列专栏: 文章目录 数据类型整型变量 int长整型变量 long单精度浮点数 float双精度浮点数 double字符类型 char字节…

C#_特性反射详解

特性是什么? 为程序元素额外添加声明信息的一种方式。 字面理解:相当于把额外信息写在干胶标签上,然后将其贴在程序集上。 反射是什么? 反射是一种能力,运行时获取程序集中的元数据。 字面理解:程序运行…

oracle 启停操作

1. 监听端口启停 # 根据实际情况 切换至oracle用户 su - oracle# 状态查看 lsnrctl stat# 启动1521端口监听 lsnrctl start# 关闭1521监听 lsnrctl stop 2. 数据库服务启停 # 立即关闭服务 shutdown immediate# 启动服务 startup

QT登陆注册界面练习

一、界面展示 二、主要功能界面代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QMainWindow(parent), ui(new Ui::Widget) {ui->setupUi(this);this->setFixedSize(540,410); //设置固定尺寸th…

linux下安装Mycat

1 官网下载mycat 官方网站: 上海云业网络科技有限公司http://www.mycat.org.cn/ github地址: MyCATApache GitHubMyCATApache has 34 repositories available. Follow their code on GitHub.https://github.com/MyCATApache 2 Mycat安装 1 把MyCat…

【Java】基础入门 (十六)--- 异常

1.异常 1.1 异常概述 异常是指程序在运行过程中出现的非正常的情况,如用户输入错误、除数为零、文件不存在、数组下标越界等。由于异常情况再程序运行过程中是难以避免的,一个良好的应用程序除了满足基本功能要求外,还应具备预见并处理可能发…

Linux服务器安装部署MongoDB数据库 – 【无公网IP远程连接】

文章目录 前言1.配置Mongodb源2.安装MongoDB数据库3.局域网连接测试4.安装cpolar内网穿透5.配置公网访问地址6.公网远程连接7.固定连接公网地址8.使用固定公网地址连接 前言 MongoDB是一个基于分布式文件存储的数据库。由 C 语言编写,旨在为 WEB 应用提供可扩展的高…

LeetCode-160. 相交链表

这是一道真的非常巧妙的题,题解思路如下: 如果让他们尾端队齐,那么从后面遍历就会很快找到第一个相交的点。但是逆序很麻烦。 于是有一个巧妙的思路诞生了,如果让短的先走完自己的再走长的,长的走完走短的,…

lib61850 学习笔记一 (概念)

IEC61850 定义60多种服务满足变电站通信需求。支持在线获取数据模型,也支持IED水平通信(GOOSE报文) 术语定义 间隔 bay: 变电站由据应公共功能紧密连接的子部分组成。 例如 介于进线或者 出线 和母线之间的断路器;二条母线之间…

mq与mqtt的关系

文章目录 mqtt 与 mq的区别mqtt 与 mq的详细区别传统消息队列RocketMQ和微消息队列MQTT对比:MQ与RPC的区别 mqtt 与 mq的区别 mqtt:一种通信协议,规范 MQ:一种通信通道(方式),也叫消息队列 MQ…

深入解析SNMP协议及其在网络设备管理中的应用

SNMP(Simple Network Management Protocol,简单网络管理协议)作为一种用于网络设备管理的协议,在实现网络设备的监控、配置和故障排除方面发挥着重要的作用。本文将深入解析SNMP协议的工作原理、重要概念和功能,并探讨…

uniapp实现:点击拨打电话,弹出电话号码列表,可以选择其中一个进行拨打

一、实现效果: 二、代码实现: 在uni-app中,使用uni.showActionSheet方法实现点击拨打电话的功能,并弹出相关的电话列表供用户选择。 当用户选择了其中一个电话后,会触发success回调函数,并通过res.tapInde…