WebStorm如何运行vue项目（新手教程）

最新推荐文章于 2025-03-20 18:46:32 发布
最新推荐文章于 2025-03-20 18:46:32 发布
阅读量2k 收藏 8
点赞数 9
文章标签： webstorm vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80224944/article/details/140307269
版权

1.在文件中找到打开

 2.找到vue项目的路径并打开，点击图中位置的编辑配置。

3.点击左上角+号找到npm

4.命令和脚本

（1）如果是运行vue项目,则脚本那一栏选择serve

（2）如果是打包vue项目,则脚本那一栏选择build

5.配置完成后,点击右上三角等待即可运行

6.下方控制台会有链接,点击即可查看你的vue项目了

AlgorithmAce
关注
使用 WebStorm 导入已有的 Vue 项目并运行的步骤与注意事项
cooldream2009的博客
09-08 2308
Vue.js 作为一款轻量级、渐进式的 JavaScript 框架，在前端开发中应用广泛。而 WebStorm 作为 JetBrains 家族的旗舰 IDE，提供了丰富的工具支持。本文将介绍如何使用 WebStorm 导入已有的 Vue 项目、运行步骤、注意事项、常见问题及解决方案，同时重点介绍如何管理 Vue 项目中 Node.js 与 npm 版本的对应关系。
用webstorm创建运行vue项目
前端视听
03-27 2753
准备工作，这些就不一一说明了，如果有不会的，可以去前面的教程里面看一看，找一找。 1：webstorm的安装： 2：node.js的安装 3：安装Git 4：vue-cli 1:初始化一个项目 打开cmd（右键管理员）或者git，进入D盘，输入创建命令，一路回车键 d: vue init webpack myprojectvue 2：创建完成之后 可以看到d盘默认的出现了项...
【前端】webstorm中运行一个前端项目
最新发布
成为你自己，做你想做的
03-20 506
准备项目文件夹。（可开源下载）前端文件夹中要放入环境配置文件。打开webstorm左上角打开项目确认此窗口打开。标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生口号成为你自己，做你想做的欢迎三连。
使用webstorm从零开始搭建Vue Demo
Finit的成长空间
05-30 2826
1 init
用webstrom运行VUE项目
CelineT的博客
03-17 1万+
webstrom安装破解，安装node，运行VUE项目
WebStorm运行vue项目
m0_71242735的博客
08-17 1545
1.安装webstorm 2. 需要安装node.js 环境，可以去官网下载3. 安装完需要查看 按win+r 输入cmd进入4. 输入命令node -v 和npm -v
使用WebStorm运行vue项目
weixin_30505225的博客
05-21 1997
在WebStorm中怎么打开一个已有的项目，这个不用多说，那么如何运行一个vue项目呢？ 1.点击下图中右上角的红框。 2.在出现的弹框中选中左上角“+”下的“npm”，如下图所示。 3.选中第二步的“npm”之后，会出现下图。 4.这里有3个地方需要更改，如下图所示。更改完成之后，依次点击右下角的“Apply”和“OK”。 其中，Name——自己随意取； ...
WebStorm配置启动Vue项目
redrose2100的博客
11-21 1万+
本文详细介绍了WebStorm如何配置Vue项目并在WebStorm中启动Vue项目
webstorm导入vue项目及其运行
palivce的博客
03-16 2559
------------------------------------------------------------可能遇见的问题-----------------------------------------------在安装好node.js以及配置好环境之后，我们需要使用npm相关命令进行项目的运行。2.重启webstorm，重新输入“npm install'命令。2.在输入框输入 “npm install”，进行插件下载。3.其次再输入“npm run dev”，实现项目运行。
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。...3. 搭建vue之前准备工
webstorm+vue初始化项目的方法
10-17
安装完成后，通过`npm run dev`或`cnpm run dev`命令来运行项目，这通常会启动一个本地开发服务器，并允许我们在浏览器中实时预览项目的运行效果。 最后，文章还提到了Vue项目目录结构及其作用，以便于开发者了解...
webstorm中vue语法的支持详解
01-21
今天开始折腾vue，我是用webstorm开发前端的，当使用vue-cli创建好一个项目后，使用webstorm打开简直不能入目啊，倒是没有啥错误提示，倒是一大堆的各种编辑器警告，无奈，还得去搞好IDE对vue的支持啊。 前提 vue的...
用webstorm搭建vue项目
热门推荐
weixin_40760196的博客
04-15 10万+
本文只针对新手。 首先要明白几个名词（概念）。 Node.js： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。  Node.js 的包管理器 npm，是全球最大的开源库生态系统。 npm：   npm全称为Node Package Manager，是一个基于No...
用WebStorm运行VUE项目
二哈喇子！
11-04 1859
VUE中的国际化用WebStorm点击可跳转
使用Webstorm快速启动Vue项目配置
祈澈菇凉
02-06 5876
说一说关于Webstorm的具体操作的问题，这些对于大多数的人来说是一件很简单的事情，但是对于入门小白来说却能卡一下，不要问我是怎么知道的，因为我也是从只懂电脑上shift键是用来切换中英文功能的纯小白一路走过来的。 1：打开一个新的项目，打开file 2：选择在现有的编辑器里面打开还是新开一个窗口 3：在Webstorm启...
Webstorm运行vue项目
qq_45412582的博客
08-04 4489
技术概述 使用Webstorm运行vue项目。在换组之后，新的小组使用的是vue框架，而我是后端选手，所以想看到项目的界面就必须要运行vue项目，而我对vue了解少之又少，所以我查阅了其他的博客，综合了一下，写出了这篇博客。（适用于前端小白） 技术详述 一、安装Webstorm和node.js Webstorm下载地址：webstorm下载 点击下载即可，安装时基本就是一直下一步。 Node.js下载地址：Node.js下载 根据自己的系统版本下载安装即可。 二、查看Node.js版本号 安装完Node.j
【应用】使用WebStorm运行vue项目
Dora_5537的博客
02-25 3万+
在WebStorm中怎么打开一个已有的项目，这个不用多说，那么如何运行一个vue项目呢？ 1.点击下图中右上角的红框。 2.在出现的弹框中选中左上角“+”下的“npm”，如下图所示。 3.选中第二步的“npm”之后，会出现下图。 4.这里有3个地方需要更改，如下图所示。更改完成之后，依次点击右下角的“Apply”和“OK”。 其中，Name——自己随意取； ...
使用webstorm创建vue3项目
08-19
使用WebStorm创建Vue3项目的步骤如下： 1. 首先，确保你已经安装好了WebStorm。你可以从官方网站上下载并安装最新版本的WebStorm。 2. 打开WebStorm并创建一个新的项目。你可以在菜单栏中选择"File"，然后选择"New Project"。 3. 在创建项目的对话框中，选择"Vue.js"作为项目类型，并选择"Vue 3"作为版本。然后点击"Next"。 4. 在下一个页面，选择项目的名称和位置。你可以选择自己喜欢的名称和存储位置。然后点击"Next"。 5. 在下一个页面，选择你想要使用的默认设置。你可以选择使用ESLint、TypeScript等。然后点击"Next"。 6. 接下来，WebStorm会自动安装Vue.js的依赖库和插件。等待安装完成。 7. 安装完成后，WebStorm会显示一个欢迎页面，其中包含Vue.js的一些基本信息和示例代码。 8. 现在，你可以开始在WebStorm中编写和开发Vue3项目了。你可以使用WebStorm的各种功能和工具来提高你的开发效率。 总结一下，使用WebStorm创建Vue3项目的步骤是：打开WebStorm -> 创建新项目 -> 选择Vue.js和Vue 3版本 -> 设置项目名称和位置 -> 选择默认设置 -> 等待安装完成 -> 开始开发。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [webstorm搭建vue项目（新手参考）](https://download.csdn.net/download/weixin_38716423/14888304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [WebStrom创建Vue3+Element-Plus项目](https://blog.csdn.net/weixin_45580378/article/details/126912660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值