用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目

最新推荐文章于 2025-06-08 10:30:00 发布
最新推荐文章于 2025-06-08 10:30:00 发布
阅读量1w 收藏 41
点赞数 9
CC 4.0 BY-SA版权
分类专栏： windows 网络编程 编程 Web开发 Node.js 文章标签： Vue IDEA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iw1210/article/details/90044778
本文详细介绍了如何使用 IntelliJ IDEA 从零开始搭建一个最简单的 Vue 项目，包括安装 Node.js，新建项目，安装 Vue 脚手架工具，初始化工程，以及运行工程的步骤。通过执行相关命令，最终在 localhost:8080 看到项目运行成功。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目

一、安装 Node.js

注：如果已经安装过 Node.js 当然就不需要安装啦。

下载地址：https://nodejs.org/en/download/。
下载完成后安装。
打开命令窗口执行下面两条命令查看是否安装成功：
E:\> node -v
v10.15.3
E:\> npm -v
6.4.1

二、搭建项目
1. 打开 IDEA，新建项目
File > New > Project... > Static Web > 填写项目名称和选择保存位置 > Finish


2.安装 Vue 脚手架工具
先说明下：安装好工具后，以后再创建新的 Vue 工程就不需要再安装啦，因为这是从零搭建，所以有必要逐步详述。
安装 npm 的淘宝镜像（下载速度比较快），打开 IDEA 的 Terminal 窗口：

顺序执行以下的命令：
E:\lab\demo> npm i -g cnpm --registry=https://r

最低0.47元/天 解锁文章

200万优质内容无限畅学
Idea创建vue项目
Jeremy486的博客
01-17 3668
点击locoal就可以跳转了。
vue项目Intellij IDEA上前端打包
12-16 1万+
Intellij IDEA搭建vue-cli项目，VUE前后端分离项目的打包、发布，vue项目开发环境搭建
基于Idea从零搭建一个最简单的vue项目
专注编程和人工智能！
09-10 767
https://www.jianshu.com/p/9c1d4f8ed068
IDEA创建vue项目【超详细的环境配置到项目创建】
最新发布
m0_74397009的博客
06-08 2861
本文详细介绍了Node.js安装配置全过程及Vue项目创建指南：从下载稳定版Node.js安装包、设置权限和缓存目录，到配置环境变量和验证安装；讲解了npm/yarn包管理工具的使用，包括国内镜像源配置；最后演示了在IDEA中创建Vue3项目的完整流程。文章特别强调了对新手友好的操作细节，如文件夹权限设置、镜像源切换技巧等，并提供了常见问题的解决思路，帮助开发者快速搭建前端开发环境。
简单的vue项目
weixin_45330738的博客
10-20 1628
HellowWorld.vue组件 <template> <div class="hello"> <el-menu :default-active="'2-1'" class="el-menu-demo" > <el-col> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index='2'> <template slot="ti..
创建简单的Vue项目
m0_47370714的博客
05-30 325
(recommended) (Use arrow keys)：选择使用 npm 来给项目注入依赖，还是使用 yarn 给项目注入依赖，我选择第一个。5） Install vue-router：是否使用vue项目官方配套的路由 vue-router，y：安装，n：不安装，根据需要选择，我选的y。1.进入项目所在目录，在路径处输入cmd打开命令行，使用 npm run dev 命令运行项目，运行成功后会返回地址。4）Vue build：项目构造，使用上下键选择，默认第一个，回车。
【IntelliJ IDEA Vue项目设置】：高效高亮显示与智能提示搭建指南
本文详细阐述了使用IntelliJ IDEA进行Vue项目的开发环境搭建和配置过程。首先介绍了如何创建和初始化Vue项目，并集成了开发工具。然后，文章重点讲解了如何优化代码的高亮显示和智能提示功能，解决了开发中常见的...
intellij idea运行vue
03-21
- 使用命令行工具 `vue-cli` 初始化一个新的 Vue.js 项目。 - 或者直接克隆已有的 Git 仓库至本地，并将其作为现有资源导入到 IntelliJ IDEA 中[^4]。 #### 3. 配置 Node.js 和 npm/yarn 支持 确保全局环境中安装有...
idea 命令vue项目搭建
03-31
### 使用 IntelliJ IDEA 和命令行搭建 Vue.js 项目 #### 准备工作 为了成功搭建 Vue.js 项目，需要先完成以下准备工作： - 安装并配置好 Node.js 和 npm 环境[^4]。 - 下载并安装最新版本的 IntelliJ IDEA，并确保...
简单搭建vue项目
tcwjy2021的博客
08-07 505
输入：npm install element-plus --save 安装element-plus。src目录下创建router、util、api、views文件夹。输入：npm install vue-router 配置路由。输入： npm install axios 安装axios。输入： npm create vite@latest。输入项目名称，选择vue和JavaScript。运行测试：输入 npm run dev。Crtrl加~打开终端。终端Ctrl+c退出。
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)
Bulut0907
07-22 9675
因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。
超级简单快速搭建一个vue项目
汪敏的博客
05-27 1671
这里写自定义目录标题超级简单快速搭建一个vue项目 超级简单快速搭建一个vue项目 作为一名测试人员，前端的基础知识学习点也是必须要了解的 本文主要介绍如何快速搭建一个vue项目 安装node.js-之前的文章里已经讲过如何安装了，这里就不再写了、 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方也可以直接用cnpm来代替。 搭建vue项目环境 全局安装vue-cli 　npm
Vue 项目创建（史上最简单易懂）
weixin_48276055的博客
02-02 651
1.在创建项目之前需要使用到node.js ，官方网站
vue.js最简单的例子
qq_30908729的博客
04-02 501
vue.js最简单的例子，只需复制以下代码，新建一个html页面，用浏览器打开即可。 源码：http://www.yayihouse.com/yayishuwu/chapter/1120
Vue项目demo汇总
热门推荐
前端视听
09-09 1万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能力都能够有所进步。 1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.
【Vue】简易博客项目跟做
九圣残炎的编程博客
11-08 1642
1.使用vue create快速搭建vue项目2.使用VC Code打开新生成的项目修改文件，内容修改如下。
如何创建一个简单的vue项目
xiaoliu_poet的博客
04-22 2068
首先找到想要创建项目的地方(存放项目的地方)，比如在桌面新建一个文件夹，点击进去，然后再新建文件夹里输入命令cmd后回车进入命令指示符(也就是常说的小黑框)，如图所示 在命令窗口输入vue create 项目名，系统会自动生成一个项目，但还是需要我们去做一些简单的配置，如图主要有三个选项，前两个会自动给生成vue2，vue3版本的项目，因为有时我们安装使用element-ui组件会报错，所以我们选择第3个，自己进行配置所想要的(键盘上↑下↓箭头可以控制，选择好回车进入) 然后进入配.
Spring Boot + Vue3 全栈入门：从零搭建一个CRUD系统
04-28
### Spring Boot 和 Vue3 全栈 CRUD 系统入门教程 #### 1. 技术栈介绍 Spring Boot 是一个基于 Java 的开源框架，旨在简化企业级应用程序的开发和部署。它通过自动配置功能减少了繁琐的手动设置工作[^1]。Vue.js 则是一个轻量级、渐进式的 JavaScript 前端框架，而 Vue3 是其最新版本，在性能和可维护性方面都有显著提升[^2]。 #### 2. 开发环境准备 为了顺利搭建全栈 CRUD 应用程序，需确保安装以下工具： - JDK (建议使用 OpenJDK 或 Oracle JDK 版本 8 及以上) - Maven 或 Gradle 构建工具 - Node.js 和 npm/yarn 包管理器 - IDE（推荐 IntelliJ IDEA 或 VS Code） #### 3. 后端部分：Spring Boot 实现 RESTful API 以下是创建基本 Spring Boot 项目的步骤： ##### 创建 Spring Boot 项目 可以通过 [Spring Initializr](https://start.spring.io/) 自动生成基础项目结构。选择依赖项如下： - Spring Web - Spring Data JPA - H2 Database（或其他数据库） - Lombok（可选，用于减少样板代码） ##### 配置 `application.properties` 文件 ```properties spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.Driver spring.datasource.username=sa spring.datasource.password=password spring.jpa.database-platform=org.hibernate.dialect.H2Dialect spring.h2.console.enabled=true ``` ##### 定义实体类 假设我们要实现一个简单的用户管理系统，则可以定义如下实体类： ```java package com.example.demo.entity; import lombok.Data; import javax.persistence.*; @Entity @Data public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; } ``` ##### 编写 Repository 接口 利用 Spring Data JPA 提供的功能，我们只需继承 JpaRepository 即可完成数据访问层的编写。 ```java package com.example.demo.repository; import com.example.demo.entity.User; import org.springframework.data.jpa.repository.JpaRepository; public interface UserRepository extends JpaRepository<User, Long> {} ``` ##### 控制器设计 提供标准的增删改查接口。 ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserService userService; @GetMapping("") public List<User> getAllUsers() { ... } @PostMapping("") public ResponseEntity<?> createUser(@RequestBody User user) { ... } @PutMapping("/{id}") public ResponseEntity<?> updateUser(@PathVariable Long id, @RequestBody User userDetails) { ... } @DeleteMapping("/{id}") public Map<String, Boolean> deleteUser(@PathVariable Long id) { ... } } ``` #### 4. 前端部分：Vue3 实现交互页面 下面展示如何使用 Vue CLI 初始化项目以及组件化开发流程。 ##### 使用 Vue CLI 创建新项目 运行命令初始化一个新的 Vue3 工程： ```bash vue create vue-springboot-crud-app --default cd vue-springboot-crud-app npm install axios vuex@next pinia # 添加必要的库支持 HTTP 请求状态管理和响应式变量存储等功能模块 ``` ##### 设计表格显示逻辑 引入 Element Plus UI 组件库来美化界面布局效果更佳。 ```html <template> <el-table :data="tableData"> <!-- 表格列 --> </el-table> </template> <script setup lang="ts"> // 导入所需方法与实例对象 const tableData = ref([]); onMounted(() => fetchAllRecords()); async function fetchAllRecords(){ const res = await axios.get('http://localhost:8080/users'); console.log(res); tableData.value=res.data; } </script> ``` #### 5. 整合前后端服务 最后一步就是让两者协同运作起来啦！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值