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.mfbz.cn/a/573298.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何批量跟踪京东物流信息

随着电商行业的快速发展,快递业务日益繁忙,无论是商家还是消费者,都需要一种高效、便捷的快递查询工具。快递批量查询高手软件应运而生,以其强大的功能和便捷的操作体验,赢得了广大电商、微商精英们的青睐。 快递批量…

通用计算平台与医用计算平台的差异

1.通用计算平台参考信息 《医疗器械软件注册审查指导原则(2022年修订版)(2022年第9号)》中关于“通用计算平台”有说参考《IMDRF/SaMD WG/N10 FINAL: 2013》 2.IMDRF/SaMD WG/N10 FINAL: 2013中关于通用计算平台的说明 3.通用计…

YOLOv8常见水果识别检测系统(yolov8模型,从图像、视频和摄像头三种路径识别检测)

1.效果视频(常见水果识别(yolov8模型,从图像、视频和摄像头三种路径识别检测)_哔哩哔哩_bilibili) 资源包含可视化的水果识别检测系统,可识别图片和视频当中出现的六类常见的水果,包括&#xf…

git lab 2.7版本修改密码命令

1.gitlab-rails console -e production Ruby: ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-linux] GitLab: 14.9.0-jh (51fb4a823f6) EE GitLab Shell: 13.24.0 PostgreSQL: 12.7 2根据用户名修改密码 user User.find_by(username: ‘username’) # 替换’use…

2024年航空航天与工业技术国际学术会议(IACAIT 2024)

2024年航空航天与工业技术国际学术会议(IACAIT 2024) 2024 International Conference on Aerospace and Industrial Technology 一、【会议简介】 2024年航空航天与工业技术国际学术会议,将汇集全球顶尖专家,探讨前沿技术。 这次会议主题为“航空航天与…

PMP®考试的形式、题型、考试内容和趋势

PMP考试形式: 国内的PMP考试是由中国国际人才交流基金会和PMI共同组织举办,统一采取的都是线下笔试。一年考4次,今年的考试安排在3月、6月、8月、11月。3月10日的PMP考试已结束,接下来是6月份的考试,考试时间预计在6月…

2024年了,还有必要搭建企业网站吗?

现在企业的营销手段五花八门。当下火爆的短视频直播平台展现出的裂变效应也取得不错的成绩,这不禁让很多企业舍弃做网站的念头,投入自媒体账号。那么,2024年了,还有必要搭建企业网站吗? 我们分两种企业来看&#xff1…

利用弹性云主机部署高效数据库系统

在当今云计算的时代,弹性云主机(EC2)为我们提供了前所未有的灵活性和可扩展性,使得在云端部署高效的数据库系统成为可能。本文将从选择适当的云服务配置、优化数据库设置、建立完备的数据备份与恢复策略,以及加强数据库…

LeetCode-219. 存在重复元素 II

题目描述 给你一个整数数组 nums 和一个整数 k &#xff0c;判断数组中是否存在两个 不同的索引 i 和 j &#xff0c;满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&…

springboot+vue学习用品商店商城系统java毕业设计ucozu

该系统利用java语言、MySQL数据库&#xff0c;springboot框架&#xff0c;结合目前流行的 B/S架构&#xff0c;将互动式学习用品网上商城平台的各个方面都集中到数据库中&#xff0c;以便于用户的需要。该系统在确保系统稳定的前提下&#xff0c;能够实现多功能模块的设计和应用…

天人、人间、二神之间的宗教战争

文本&#xff1a;创世记 2-3、马太福音 23-24、启示录 12-13  天人、地球人和两位神之间的宗教战争是什么样的&#xff1f;  属天的&#xff08;天体&#xff09;是神&#xff08;创世记6&#xff09;&#xff0c;属地的&#xff08;地上的人&#xff09;是肉身。有两个主要的…

学python的第十九天

网络通信和访问数据库 1.1 基本的网络知识 TCP/IP IP是低级的路由协议&#xff0c;它将数据拆分在许多小的数据包中&#xff0c;并通过网络将他们发送到某一特定地址&#xff0c;但无法保证所有包都抵达目的地&#xff0c;也不能保证包按顺序抵达 TCP&#xff08;传输控制协议…

【数据结构】哈希桶

目录 前言&#xff1a; 开散列&#xff08;哈希桶&#xff09; 开散列的概念 哈希桶的模拟实现 整体框架 查找 插入 删除 析构函数 前言&#xff1a; 闭散列线性探测缺点&#xff1a;一旦发生哈希冲突&#xff0c;所有的产生哈希冲突的数据连续存储在一块区域&#xff…

算法-栈操作

1047. 删除字符串中的所有相邻重复项 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string removeDuplicates(string s) {string stack;for(char& ch:s){if(stack.size()>0&&chstack.back()){stack.pop_back();}else{stack.push_back(ch);}…

2.搭建增长模型-福格行为模型

福格行为模型 Bmat B为行动 m是动机 a是能力 t是触发 mat三者是同时出现的 比如连续签到30天&#xff0c;才送1天会员&#xff0c;这明摆着欺负人&#xff0c;用户难有积极性 但是签到即可或者会员1天&#xff0c;连续30天送30天&#xff0c;这样用户每天都会积极的来签到&…

学习交流论坛-测试报告

&#x1f31f; 欢迎来到 我的博客&#xff01; &#x1f308; &#x1f4a1; 探索未知, 分享知识 !&#x1f4ab; 本文目录 1. 项目描述2. 测试计划2.1 功能测试2.1.1 测试环境2.1.2 编写测试用例2.1.3 部分手工功能测试 2.2 自动化测试2.2.1 注册页面2.2.2 登录页面2.2.3 博客…

链表(2) ---- 完整版

目录 一 . 前言二 . 头文件声明三 . 代码思绪1. 查找函数的实现2. 在指定位置之前插入3. 在指定位置之后插入4. 删除指定位置的结点5. 删除指定位置之后的结点6. 销毁链表 四 . 完整代码五 . 总结 正文开始 一 . 前言 补充说明&#xff1a; 1、链式机构在逻辑上是连续的&#…

【算法】前缀和

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、一维前缀和二、二维前缀和三、寻找数值的中心下标四、除自身以外数组的乘积五、和为k的子数组六、和…

【Github】sync fork后,意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后&#xff0c;意外关闭之前提交分支的pr申请 找回被关闭的pr请求分支中的文件 写在最前面原因解析提交pr&#xff0c;pr是什么&#xff1f;rebase 或者 merge 命令 找到分支中被删除的文件找到被关闭的提交请求pr方法1&#xff1a;在公共仓库被关闭的pr中…

LeetCode in Python 69. Sqrt(x) (x的平方根)

求x的平方根&#xff0c;第一想法可能是遍历0&#xff5e;x&#xff0c;求其平方&#xff0c;找到或且但其时间复杂度为O(n)&#xff0c;或是想到遍历0&#xff5e;M即可&#xff0c;其中M x // 2&#xff0c;将时间复杂度降至O()。本文利用二分思想&#xff0c;给出一种时间复…