java开发——idea下运行vue工程

时间:2024-04-08 10:21:11

以下教程将从头完成idea开发工具运行vue项目的全过程

一、准备工作:

1.1 idea下载安装:https://blog.csdn.net/qq_15903671/article/details/81739295

1.2 node.js下载安装:https://blog.csdn.net/qq_15903671/article/details/82052035

1.3 npm 下载安装:https://blog.csdn.net/qq_15903671/article/details/82052251 

二、使用idea加载现有vue项目运行

2.1 idea下创建一个空的web项目

java开发——idea下运行vue工程

java开发——idea下运行vue工程

输入Project name后点击finish

java开发——idea下运行vue工程

idea下方有Terminal类似cmd命令行,输入node -v 和 npm -v 检查一下是否完成node.js的安装

2.2 安装vue工程需要的其他组件

修改npm的registry属性,因为默认的registry地址真的很慢,网上也有建议下载cnpm的,不过vue里有描述,使用cnpm会出现莫名其妙的bug

java开发——idea下运行vue工程

修改npm的proxy属性,公司办公网路可能需要代理才能从互联网上采集资源

java开发——idea下运行vue工程

安装vue-cli:  npm i -g vue-cli

java开发——idea下运行vue工程

如果在运行npm i -g vue-cli时报错  ERR EPERM 的话,尝试清除缓存之后再安装vue-cli

清除缓存指令  npm cache clean --force 

vue-cli安装完成后使用 vue -V 指令查看一下版本,验证一下vue-cli是否安装完成

java开发——idea下运行vue工程

2.3 初始化项目脚手架

java开发——idea下运行vue工程

建好项目之后cd 到项目根目录

执行 vue intall 指令!!!  这个指令可能会报错,比如chromeDriver镜像下载不到,需要手工从淘宝的镜像里现在一下

java开发——idea下运行vue工程

处理按成后再次运行vue install  成功

java开发——idea下运行vue工程

2.4 运行vue项目看看效果

npm run dev

java开发——idea下运行vue工程

java开发——idea下运行vue工程

三、idea下运行vue项目

点击Add Configuration...配置一个npm的Templete

java开发——idea下运行vue工程

package.json 到项目里找到对应文件,Command 选择run,scripts选则dev

java开发——idea下运行vue工程

就可以直接在idea下运行vue项目了。