IDEA中启动vue项目(已填一个坑)

本文详细介绍了如何使用IDEA和node.js从零开始启动一个Vue.js项目,包括环境配置、项目初始化、依赖安装及常见问题解决。

背景

今天需要启动前端项目,使用的是vue.js,开发工具IDEA

 

操作步骤如下:

1、安装node.js,上官网下载安装包https://nodejs.org/zh-cn/

下载好后,点击安装,全部默认选项就可以了,直到安装完成;配置node.js环境和cnpm安装(几行命令的事)可以参考https://cloud.tencent.com/developer/news/53093

2、安装好node.js后,打开IDEA,到项目目录下,输入vue init webpack dhy初始化一个项目,dhy是项目名称;

IDEA敲命令的地方在这里

3、初始化完成后,安装需要的依赖包,cnpm install(注意,一定要在package.json目录下);

4、我这里已经安装过了,所以都是√,如果是第一次,安装过程需要点时间;

5、一般在这里只需要执行npm run dev,就会成功了,如果这里出错了,报错信息如下

出现如上错误不要慌,打开package.json文件,找到scripts,可以看到这里没有dev

这里输入npm run serve即可运行项目了

### 如何在 IntelliJ IDEA 中配置和运行 Vue.js 前端项目 #### 创建 Vue.js 项目 为了启动并运行 Vue.js 项目,在 IntelliJ IDEA 中需先创建新的 Vue.js 工程。这可以通过选择 Node.js 类目下的 Vue.js 模板来实现[^1]。 ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app code . ``` 上述命令用于全局安装 Vue CLI 并创建名为 `my-vue-app` 的新项目,最后打开此文件夹于编辑器内。 #### 安装依赖库 Axios 对于前后端交互的需求,通常会引入 axios 库处理 HTTP 请求。确保已按照指导完成其安装过程: ```bash npm install axios ``` #### 配置 IDE 插件支持 有时即使成功创建了基于 VueCLI 构建的应用程序,但在 JetBrains 系列产品里可能无法正常识别某些特性或语法高亮显示出现问题。这是因为缺少必要的插件支持所致[^4]。此时应该前往设置页面搜索 "Vue.js" 关键词找到对应的官方扩展组件予以激活启用。 #### 启动开发服务器 当一切准备就绪后,便可以尝试执行如下指令开启本地调试环境: ```bash npm run serve ``` 该操作将会编译资源并将它们托管在一个临时 web server 上,默认监听地址为 http://localhost:8080 或者其他指定端口;与此同时控制台也会打印出具体访问路径供开发者测试验证效果。 #### 整合 Spring Boot 后端服务 考虑到实际应用场景往往涉及数据持久化存储及业务逻辑运算等功能模块,则有必要搭建一套稳定可靠的 Java 微服务体系作为支撑平台。借助于 Spring Initializr 可快速产出样板工程结构,并依照 RESTful API 设计原则对外暴露接口供前端调用获取所需信息[^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值