webStorm搭建vue-cli(不用cmd命令窗口建)

最新推荐文章于 2025-05-13 11:42:35 发布
最新推荐文章于 2025-05-13 11:42:35 发布
阅读量704 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： webStorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/water_java/article/details/103339061
本文详细介绍如何使用WebStorm创建Vue项目，无需通过命令行，适合初学者快速上手。文章提供步骤说明及项目结构参考。

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

我们用webStorm搭建vue项目可以有两种，一种是用cmd命令窗口建，可以参考我博文：https://mp.youkuaiyun.com/mdeditor/103264739
还有一种就是直接在webStorm创建,不用cmd命令窗口建

现在我就是用第二种方式
在建项目之前需要安装好git（当然node.js必要的环境，这里我就不说了，我博客里有）,可以参考我博文：https://mp.youkuaiyun.com/mdeditor/103277463
下面的是我的演示图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
启动测试我就不说了

项目结构可以参考第一条博文链接

使用vue-cli（2.9.6）构建一个vue的项目
qq_25354709的专栏
02-11 4885
一、全局安装vue-cli npm install vue-cli -g 初始化一个vue的项目 vue init webpack vue-book ? Project name vue-book ? Project description A Vue.js project ? Author xxx ? Vue build standalone ? Install vue-route...
vue2[初级]基于vue-cli 搭建项目
u011664286的博客
09-22 332
VUE 项目构建 WebStorm构建VUE项目
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
主要介绍了解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,需要的朋友可以参考下
使用webstorm搭建vue-cli项目
weixin_30839881的博客
08-11 731
前言 随着vue在前端不断的壮大起来，越来越多的前端工程师使用vue了，作为大型项目的开发，vue-cli是不二之选，所以这篇博客是为搭建vue-cli所写，想要搭建vue-cli项目就必须先有git,node.js,webpack, git地址：https://git-scm.com/ node.js地址：http://nodejs.cn/ 本章目标 使用websotm搭建v...
WebStorm创建Vue3和elementPlus项目
最新发布
2301_78807453的博客
05-13 322
5.在package.json下检查看到已经引入element-plus的依赖了。3.进入项目目录安装ElementPlus。在项目中引入Element Plus。
关于win10 WebStorm终端无法使用命令行问题
weixin_44273231的博客
08-13 4150
WebStorm点击Terminal终端，出现以下错误 Cannot open Local Terminal Failed to start [powershell.exe] in D:\download\WebStrom\WebstormProjects\LearnVuejs01 Error running process: CreateProcess failed. Code 2 解决方法 打开File -> Setting -> Tools ->Terminal 修改Applica
拿到别人的Vue项目怎么运行（不使用ideal）
weixin_45473044的博客
04-29 934
有版本号说明成功安装。
【Vue.js学习笔记】9：搭建Vue-CLI脚手架并创建Vue项目,在WebStorm中创建Vue项目
大桔骑士的学习笔记
12-26 1975
在第一篇的时候确实可以创建，这次跟着视频搭建一次，比较一下和上次的区别，更正一下上次的错误操作，加深理解。 搭建Vue-CLI脚手架 在Node.js的安装目录下，删除node_cache/和node_global下的所有内容，即让Node处于刚刚安装完成的状态，连cnpm也一起删掉了。 使用npm install --global vue-cli安装一下Vue脚手架，安装好后使用vue-V能看到...
从0搭建vue-cli4脚手架
10-15
Vue CLI 是 Vue.js 官方提供的一个用于快速搭建 Vue.js 应用的脚手架工具。Vue CLI 4 是该工具的最新稳定版本，它极大地简化了 Vue.js 项目的初始化和构建过程。本文将详细讲解如何从零开始搭建 Vue CLI 4 脚手架。 ...
Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境
无
07-07 2601
此笔记归纳整理webstorm搭建vue项目，仅作记录使用。
使用webstorm搭建vue项目
你一个人,就不想到别处看看? ---- 我怕一转身连你也不见了......
03-27 1367
首先安装好node.js,去官网下载 https://nodejs.org/en/ 下载完成后,傻瓜式安装,一直下一步,选择路径就可以了 默认安装完node.js是会安装了npm的,可在安装路径下查看 检查node.js和npm是否安装成功,随便在什么地方打开cmd或者git-bash输入命令 查看node.js 可以看到安装的版本为v10.15.3 查看np...
WebStorm配置启动Vue项目
热门推荐
redrose2100的博客
11-21 1万+
本文详细介绍了WebStorm如何配置Vue项目并在WebStorm中启动Vue项目
webstorm 不能识别vue-cil @路径的问题
小游
12-20 1787
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 新建一个webpack.config.js然后加入下面的内容 module.exports = { resolve: { alias: { "@": require("path").resolve(__dirname, "src") // change this to your folder path } } }; 然后我们到webstorm里面自己手动指定这个.
小白VUE安装时遇到的那些坑！vue不是内部命令，安装@vue/cli失败，找不到vue.cmd等等
weixin_44098615的博客
07-30 2757
对于我这种小白来说，安装个vue全局就绕了好几天。查阅API和不少vue全局安装的文档，各种尝试各种失败。使用webStorm创建vue项目时还是显示各种vue-cli的错误。终于这篇文章拯救了我，成功安装上了vue-cli，可以通过CLI来创建vue了！激动 链接附上： 我看的文章：https://www.jianshu.com/p/5ab787e9d6f5 我看的文章所引用的原文：https://blog.youkuaiyun.com/httguangtt/article/details/86539509 以下是我
webstorm开发工具-如何设置vue的npm项目启动快捷方式
Estrellayun_的博客
11-12 1603
本文介绍使用webstorm开发工具没有npm项目启动快捷方式的解决方法。
两种方式使用VueCli快速构建Vue项目
super1223的博客
07-09 927
vue cli脚手架使用 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 Vue Cli提供了以一种简单的方式来构建Vue项目，在Vue下，所有的配置，例如：loader，打包配置等，都不再需要手动安装管理。 自己使用webpack也可以搭建Vue项目，但是很多配置都需要手动安装和手写配置文件，相对来说，Vue-Cli大大简化了这个配置过程，使前端人员能够更加专注于功能页面的实现。 Vue cli的安装与常用指令 前置环境
Webstorm 搭建一个Vue项目
fububanzan_的博客
07-03 9593
在Webstorm上搭建一个Vue项目
【内网】WebStorm搭建Vue环境
一七
04-24 8050
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
WebStorm 创建一个Vue项目
web13765607643的博客
12-24 2359
这些技术和库之间协同工作以实现一个完整的Web应用程序，其中Vue.js用于构建前端界面，Axios用于处理HTTP请求，Node.js用于构建后端服务，CORS用于解决跨域问题，而Element UI提供了一套现成的Vue组件，用于构建用户界面。上述操作后会在安装目录中该路径下创建 node_modules 文件夹，如果该文件夹没有创建需手动创建。输入以下命令：路径为两个新建文件夹node_global 和 node_cache的路径。上述命令运行结果：两个路径下各生成一个_logs文件夹。
E:\newCode\静宝阁\jingbaoge_wx_web>npm run build > vue-manage-system@4.2.0 build E:\newCode\静宝阁\jingbaoge_wx_web > vue-cli-service build WARN "baseUrl" option in vue.config.js is deprecated now, please use "publicPath" instead. \ Building for production... ERROR Error: EBUSY: resource busy or locked, rmdir 'E:\newCode\静宝阁\jingbaoge_wx_web\dist' Error: EBUSY: resource busy or locked, rmdir 'E:\newCode\静宝阁\jingbaoge_wx_web\dist' npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-manage-system@4.2.0 build: `vue-cli-service build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-manage-system@4.2.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2025-03-08T07_25_34_351Z-debug.log 报错了
03-09
rmdir /s /q dist # CMD 命令 或 Remove-Item -Recurse -Force dist # PowerShell 命令 ``` #### 2. **清除残留进程** - **终止 Node 进程**： 1. 打开任务管理器（`Ctrl + Shift + Esc`） 2. 在"详细信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值