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 318
5.在package.json下检查看到已经引入element-plus的依赖了。3.进入项目目录安装ElementPlus。在项目中引入Element Plus。
关于win10 WebStorm终端无法使用命令行问题
weixin_44273231的博客
08-13 4148
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 933
有版本号说明成功安装。
【Vue.js学习笔记】9：搭建Vue-CLI脚手架并创建Vue项目,在WebStorm中创建Vue项目
大桔骑士的学习笔记
12-26 1973
在第一篇的时候确实可以创建，这次跟着视频搭建一次，比较一下和上次的区别，更正一下上次的错误操作，加深理解。 搭建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 以下是我
如何创建 vue-cli 项目
weixin_62897746的博客
09-24 3148
官网直接下载并安装node，安装过程很简单一路下一步就行，安装完成后打开命令行（window+r,输入cmd），输入node-v 如下图出现版本号则成功。打开命令行输入：npm install vue-cli -g，安装完成后输入 vue-V（这里的‘V’是大写），如下图如果出现对应的版本号则安装成功。通过上面两步，我们需要的环境和工具都准备好了，接下来就使用vue-cli来创建项目。以上就是安装vue-cli的全过程，后续会持续发布新文章，敬请关注。
[NodeJs实战][Vue实战]vue自定义一个bat启动器,不用每次输命令了
学生董格
02-16 1254
写一个.bat文件,用记事本打开 @echo on npm start hotfix pause 按照你定义的startdev也行 出现如图所示的,就代表成功了
使用webstorm创建vue项目时vuecli不执行，提示git不是内部或外部命令
qq_39298211的博客
07-29 4125
创建项目时 点击下一步时报错：“‘git’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。” 原因：在安装git时勾选时，选择了“使用git自带的命令行工具”，所以导致git命令在其他终端无效！ 解决办法： 1.重新安装，将上图选项选为第二个。 2.比较麻烦，但是不用重新安装。 1）找到你电脑上的git安装中bin的路径，我的安装时是直接下一步的，所以我的位置是：如：D...
webstorm建立vue-cli脚手架傻瓜式详解
hello world的博客
09-21 3834
webstorm 文件 -> new -> project 1、尽量不要勾选 Use the default project setup (babel, eslint) 默认建立的项目好多的配置不全，后期再装很麻烦。 2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会看见一些选项，你要集成什么就选就
用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...
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、付费专栏及课程。

余额充值