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

相关推荐
用户298698530146 分钟前
Java 创建 CSV 文件的三种实用方法:从零构建、数组写入与 Excel 转换
java·后端·excel
Cry丶13 分钟前
一次 FTP 上传引发 504 Gateway Timeout 的排查复盘
java·nginx·ftp·openresty·被动模式·504 gateway·生产问题排查
码农进化录18 分钟前
Java 程序员的 AI 进化论 | AI 辅助 CI/CD,让 AI 帮你做代码审查和部署决策
java·spring boot·openai
zyplayer-doc20 分钟前
企业文档的进化:网盘和在线文档的下一个升级方向—知识库系统
java·大数据·数据库·人工智能·ocr
吃饱了得干活24 分钟前
从零设计一个高并发点赞系统:缓存+MQ异步持久化实战
java·架构
奇牙coding30 分钟前
gpt-5.6-luna 调用报 400 bad_request 怎么办?同样的 messages 在 gpt-5.5 没问题——两处校验差异和修复写法
java·windows·gpt·ai
凤山老林1 小时前
从“无法创建本地线程“异常说起:深度解析线程栈与JVM线程优化指南
java·开发语言·jvm
聚美智数1 小时前
常见疾病查询-疾病症状—疾病介绍-疾病大全-疾病治疗查询API接口介绍
android·java·数据库
慧都小妮子1 小时前
Aspose.Words for JasperReports v26.6 发布,底层Java大升级
java·pdf·报表工具·aspose.words·文档转换·报表导出·jasperreports
白宇横流学长1 小时前
基于SSM医院电子病历管理系统的设计与实现
java