在IDEA中创建vue hello-world项目全过程

更新时间：2025年09月26日 09:05:16 作者：fragrans

用户分享了在IDEA中搭建Vue HelloWorld项目的简要步骤：安装Node.js和npm,配置淘宝镜像加速,安装Vue插件,创建项目并指定名称,运行npm run serve启动服务,最终通过本地8080端口访问项目

1、本地电脑安装配置node、npm

D:\Project\vue\hello-world>node -v
v14.21.3

D:\Project\vue\hello-world>npm -v
6.14.18

D:\Project\vue\hello-world>

2、设置npm国内淘宝的景象

建议配置国内的景象，国外镜像下载依赖有时会失败

npm config set registry http://registry.npm.taobao.org/

3、在idea中安装Vue.js插件

网上搜索相关教程

4、创建vue.js项目

file->new project -> JavaScript -> Vue.js

5、指定项目名字

例如项目名字默认为untitled

Finish，之后会执行 vue create tntitled帮助我们创建好项目

项目创建好之后，会在idea下方出现以下提示信息

� Generating README.md...

� Successfully created project idea-create-hello-world-project.
� Get started with the following commands:

$ npm run serve

6、在Terminal中执行启动命令

npm run serve

7、在浏览器中访问 http://localhost:8080/

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue项目中ESLint配置超全指南(VScode)
ESLint是一个代码检查工具,用来检查你的代码是否符合指定的规范,下面这篇文章主要给大家介绍了关于Vue项目中ESLint配置(VScode)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
element 动态合并表格的步骤
这篇文章主要介绍了element 动态合并表格的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
Vue实现表格数据的增删改查的示例代码
Vue是一个用于构建用户界面的JavaScript框架,在Vue中可以通过使用Vue组件来实现对表格的增删改查操作,下面将介绍一些基础的Vue组件和技术来实现对表格的增删改查操作,需要的朋友可以参考下
2024-08-08
vue在IIS服务器部署后路由无法跳转
在IIS服务器上部署Vue项目时,可能会遇到路由无法正常跳转的问题,解决方法有两种,下面就来具体介绍一下解决方法,感兴趣的可以了解一下
2024-10-10
深入解析el-col-group强大且灵活的Element表格列组件
这篇文章主要为大家介绍了el-col-group强大且灵活的Element表格列组件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
vue2与vue3下如何访问使用public下的文件
这篇文章主要介绍了vue2与vue3下如何访问使用public下的文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。接下来通过本文给大家详解讲解vue.js轮播组件vue-awesome-swiper实现轮播图实例代码，需要的朋友参考下
2017-03-03
vue3中pinia的使用及持久化的实现
Pinia是一个基于Vue3的状态管理库,本文主要介绍了vue3中pinia的使用及持久化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-04-04
Vue element el-table-column中对日期进行格式化方式(全局过滤器)
这篇文章主要介绍了Vue element el-table-column中对日期进行格式化方式(全局过滤器)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖
本文主要介绍了在Vue3使用＜script lang=“ts“ setup＞语法糖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06