IDEA中Vue开发环境搭建

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.hqwc.cn/news/638134.html

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

相关文章

【论文笔记】RS-Mamba for Large Remote Sensing Image Dense Prediction(附Code)

论文作者提出了RS-Mamba(RSM)用于高分辨率遥感图像遥感的密集预测任务。RSM设计用于模拟具有线性复杂性的遥感图像的全局特征,使其能够有效地处理大型VHR图像。它采用全向选择性扫描模块,从多个方向对图像进行全局建模,从多个方向捕捉大的空间…

AJAX——ajax原理

1.XMLHttpRequest 定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJA…

Compose 布局

文章目录 Compose 布局ColumnColumn属性使用 RowRow属性使用 BoxBox属性使用 ConstraintLayoutLazyColumnLazyColumn属性使用使用多类型使用粘性标题回到顶部 LazyRowLazyRow属性使用 LazyVerticalGridLazyVerticalGrid属性使用 Compose 布局 Column Compose中的”垂直线性布…

Can‘t log out of macbook account 【macbook 账户无法退出】

参考: https://iboysoft.com/news/cant-sign-out-of-icloud-mac.html

【数据结构-树和二叉树-森林-哈夫曼树】

目录 1 树1.1 树的描述(基本术语) 2 二叉树(树的度最大为2)2.1 注意事项-五种基本形态2.2 二叉树的抽象数据类型定义 3 二叉树的性质3.1 两种特殊形式的二叉树-重点会计算3.2 题目练习: 4 二叉树的存储结构4.1 顺序存储…

【融合ChatGPT等AI模型】Python-GEE遥感云大数据分析、管理与可视化及多领域应用

随着航空、航天、近地空间遥感平台的持续发展,遥感技术近年来取得显著进步。遥感数据的空间、时间、光谱分辨率及数据量均大幅提升,呈现出大数据特征。这为相关研究带来了新机遇,但同时也带来巨大挑战。传统的工作站和服务器已无法满足大区域…

汇编语言(详解)

汇编语言安装指南 第一步:在github上下载汇编语言的安装包 网址:GitHub - HaiPenglai/bilibili_assembly: B站-汇编语言-pdf、代码、环境等资料B站-汇编语言-pdf、代码、环境等资料. Contribute to HaiPenglai/bilibili_assembly development by creat…

人工智能入门(一):基于Pytorch的手写数字识别模型

前言: 因为还在上学,时间不太够用,很多内容写到后面心有余力不足,未来有时间我会慢慢补充。人工智能的知识涉猎范围广又杂乱无章,啃书或上课学到的知识往往很早就过时了或者离实际的项目无关。所以,我很希…

【Redis】List 数据类型

文章目录 常用命令lpush & lpushxrpush & rpushxlrange & lpop & rpoplindex & linsertllen 阻塞版本的命令内部编码 列表类型是⽤来存储多个有序的字符串,⼀个列表最多可以存储 2^32 - 1 个元素,允许有重复的元素。 列表在两端都可…

YOLOv9改进策略 | Conv篇 | 利用YOLO-MS的MSBlock二次创新RepNCSPELAN4(全网独家创新)

一、本文介绍 本文给大家带来的改进机制是利用YOLO-MS提出的一种针对于实时目标检测的MSBlock模块(其其实不能算是Conv但是其应该是一整个模块),我们将其用于RepNCSPELAN中组合出一种新的结构,来替换我们网络中的模块可以达到一种轻量化的作用&#xff…

TVbox三端助手MAC+Windows+手机版带接口

Vbox这个目前大热的电视播放器,由于是空壳,于是接口成为非常核心的一环,很多网友制作的接口会进行加密,以防被人复制使用。 最近发现有人对此做了个专门解密的工具,解不解密的不重要的,分享迷倒是觉得这工…

Python 全栈安全(二)

原文:annas-archive.org/md5/712ab41a4ed6036d0e8214d788514d6b 译者:飞龙 协议:CC BY-NC-SA 4.0 第二部分:认证与授权 本书的第二部分是最具商业价值的部分。我这样说是因为它充满了大多数系统需要具备的实用工作流示例&#xf…