IDEA中Vue开发环境搭建

news2024/12/23 7:21:17

1.    IDEA安装Vue.js
文件=>设置=>插件=>搜索Vue.js并安装。

2.    安装Node.js
官网地址:https://nodejs.org
安装包下载地址:https://nodejs.org/en/download
下载并安装,安装时,勾选添加系统变量选项。

# 如果正确安装了Node.js和npm,会看到它们的版本号。
node -v
npm -v

安装完npm后可以修改仓库镜像源地址:

查看当前npm仓库镜像地址:npm config get registry

修改仓库镜像地址为淘宝镜像:

npm config set registry https://registry.npm.taobao.org/

3.    安装webpack
# 在全局环境下安装webpack。
npm install webpack -g    # -g表示全局安装

npm webpack -v         # 查看安装webpack的版本号

4.    安装vue脚手架(vue-cli)
npm install -g @vue/cli

vue –version        # 查看安装的版本号

5.    安装项目依赖资源
找到项目根目录中的package.json文件,这里列出了项目所依赖的所有资源与版本号,右键该文件,打开于终端,输入npm install 命令安装所有依赖;
(如果报错了就是node环境有问题,查百度重新搭环境)
 


 
之后可以发现Vue项目下出现了node_modules目录。

6.    运行项目
npm run dev

 
7.    IDEA配置运行按钮
(1)    idea右上角点击“Add Configurations”。
 
(2)    点击左上角的“+”,选择“npm”。
 


(3)    右侧“Scripts”处输入“dev”,其它idea已经默认选好。点击OK保存。
 
(4)    此时右上角已经有运行按钮,以后打开idea之后直接点击该按钮即可直接运行vue项目。
 

8.    IDEA打包Vue项目
(1)    找到package.json文件,打开于终端;
 
(2)    输入npm run build 进行打包;
 
(3)    出现 Build complete 提示说明打包完成,可在 dist目录 下找到打包后的文件;
 
(4)    出现Missing script: "build" 错误;

解决方法:

命令中的构建脚本名称,需要和package.json文件中的构建脚本名称一致,命令改为以下命令即可:

npm run build:prod

参考:https://blog.csdn.net/pleaseprintf/article/details/131886337

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

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

相关文章

Spring AI Summary

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl Spring AI is a project that aims to streamline the development of AI applications by providing abstractions and reusable components that can be easily integrate…

Jmeter-非GUI模式下运行jmeter脚本-适用于服务器上持续集成测试

背景 大部分Jmeter脚本都是部署在Linux上运行,利用Jenkins做接口自动化,定时巡检任务。 执行命令 1.进入jmeter的目录,bin文件夹 cd C:\path\to\jmeter\bin2.运行脚本文件 jmeter -n -t D:\{脚本文件目录}\xxx.jmx -l D:\{脚本文件目录}…

Java代码基础算法练习-逆序输出-2024.04.22

任务描述: 输入10个数字(数字取值范围:0~1000),然后逆序输出。 任务要求: 代码示例: package April_2024;import java.util.Scanner;/*** 输入10个数字(限定在0~1000范围内&#x…

Rust基本数据类型-切片

一、切片是什么,怎么用 1、切片是什么 切片并不是 Rust 独有的概念,在 Go 语言中就非常流行,它允许你引用集合中部分连续的元素序列,而不是引用整个集合。 对于字符串而言,切片就是对 String 类型中某一部分的引用&…

FFmpeg开发笔记(二十一)Windows环境给FFmpeg集成AVS3解码器

AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准。AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制订工作,参考软件的测试表明,AVS3基准…

webpack-babel2

浏览器的兼容性问题 浏览器的兼容性问题不知包括随屏幕大小而变化,还包括针对浏览器支持的特性(如css特性,js特性) 做处理。 目前市场上有很多浏览器:Chrome,Safari,IE,Edge等,要根据它们的市场占有率来决…

将城市名称替换成简写

图片左边是城市全称,右边是城市简写。 现在有一句话“this is Republic of Korea,that is United States of America”,要将其中的城市全称替换成城市简写。 #"Republic of Korea"替换成 South Korea s"this is Republic of Korea,that …

三、Flask模型基础

ORM 创建模型 # exts.py:插件管理 # 扩展的第三方插件 # 1.导入第三方插件 from flask_sqlalchemy import SQLAlchemy # ORM插件 from flask_migrate import Migrate # 2. 初始化 db SQLAlchemy() # ORM migrate Migrate() # 数据迁移 # 3. 和app对象绑定 def…

生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证,打造物联网实时数据生态

近月,深圳钛铂数据有限公司(以下简称钛铂数据)自主研发的实时数据平台(Tapdata Live Data Platform)与北京涛思数据科技有限公司(以下简称涛思数据)自主研发的大数据平台 TDengine,已…

SpringBoot集成Sleuth

引入Maven依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-sleuth</artifactId></dependency> 配置yml文件 bootstrap.yml文件增加如下配置 注&#xff1a;这个配置不是必须要&#…

WordPress SQLite Docker 镜像封装细节

为了让大家用的放心&#xff0c;同时解答 GitHub 社区中的疑问。这篇文章聊聊上一篇文章的 Docker 容器封装细节。 写在前面 在前一篇文章《WordPress 告别 MySQL&#xff1a;Docker SQLite WordPress》中&#xff0c;如果你跟着文章实践&#xff0c;大概三分钟就能够启动一个…

(三)组合特征与特征变换 学习简要笔记 #机器学习特征工程 #CDA学习打卡

目录 一. 统计及组合特征 1&#xff09;统计特征 2&#xff09;业务特征 3&#xff09;组合特征 &#xff08;a&#xff09;简单组合特征 &#xff08;b&#xff09;模型特征组合 二. 特征变换 1&#xff09;对数变换&#xff08;Logarithmic Transformation&#xff0…

KingbaseES存储过程的用法

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 存储过程是一种强大的数据库编程工具&#xff0c;可以帮助开发人员实现复杂的业务逻辑和数据操作&#xff0c;用于提高数据库的性能、安全性和可维护性。 存储过程一般是将业务逻辑和数据操作封装起来&#xff0c;以便…

深度学习之图像分割从入门到精通——基于unet++实现细胞分割

模型 import torch from torch import nn__all__ [UNet, NestedUNet]class VGGBlock(nn.Module):def __init__(self, in_channels, middle_channels, out_channels):super().__init__()self.relu nn.ReLU(inplaceTrue)self.conv1 nn.Conv2d(in_channels, middle_channels, …

Redis底层数据结构之SDS

目录 一、概述二、SDS结构三、为什么使用SDS 下一篇 redis底层数据结构之ziplist 一、概述 Redis 中的 SDS&#xff08;Simple Dynamic String&#xff0c;简单动态字符串&#xff09;是 Redis 用于存储字符串值的底层实现&#xff0c;是对 C 语言传统字符串&#xff08;以 nu…

如何使用 Node.js 发送电子邮件全解和相关工具推荐

大多数Web应用程序都需要发送电子邮件。它可能用于注册、密码重置、状态报告&#xff0c;甚至是完整的市场营销活动&#xff0c;如新闻和促销。本教程解释了如何在Node.js中发送电子邮件&#xff0c;但其概念和挑战适用于您正在使用的任何系统。 你会在 npm 上找到大量与电子邮…

深度图转点云

一、理论分析 二、其他分析 1、相机内参 相机内参主要是四个参数fx,fy,u0,v0。要明白相机内参就是相机内部参数&#xff0c;是参考像素坐标系而言&#xff0c;有了这个前提&#xff0c;这四个参数也就很好理解了。 &#xff08;1&#xff09;首先&#xff0c;。其中F是相机的…

内存管理下及模板初阶

嗨喽&#xff0c;今天阿鑫给大家带来内存管理下以及模板初阶的博客&#xff0c;下面让我们开始今天的学习吧&#xff01; 内存管理下及模板初阶 new和delete的实现原理定位new表达式(placement-new)常见面试题泛型编程函数模板类模板 1. new和delete的实现原理 1.1 内置类型…

上位机工作感想-从C#到Qt的转变-1

0.前言 接触Qt开发也有一年多的时间了&#xff0c;还记得去年初从杭州回合肥时&#xff0c;刚来公司面临的几个问题&#xff1a; 1.C#转上位机的迷茫2.新公司管理模式的差异3.试用期的各种紧急任务。 当时也是加班加点学习C和Qt的基础知识&#xff0c;做了两个考核项目后&am…

Hadoop——Yarn 生产环境核心参数

1. ResourceManager 相关参数&#xff1a; yarn.resourcemanager.hostname&#xff1a;ResourceManager 的主机名。yarn.resourcemanager.webapp.address&#xff1a;ResourceManager 的 Web 应用程序地址。yarn.resourcemanager.scheduler.address&#xff1a;ResourceManage…