01.webstorm创建vue脚手架(vue-cli)项目

最新推荐文章于 2023-07-03 01:51:03 发布
最新推荐文章于 2023-07-03 01:51:03 发布
阅读量944 收藏 7
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58362898/article/details/119827958
版权
本文介绍了如何在WebStorm中通过Vue CLI创建一个新项目。步骤包括：创建空项目，打开控制台，输入`vue init webpack 项目名`初始化项目，切换到项目目录并运行`npm run dev`启动项目。项目结构中，`views`存放业务组件，`components`用于存储公共组件。
摘要由CSDN通过智能技术生成

webstorm创建vue脚手架(vue-cli)项目

首先在创建一个空项目

在这里插入图片描述

然后点开webstorm中的控制台

在这里插入图片描述

输入

vue init webpack 项目名

之后回车

在这里插入图片描述

切换到刚刚创建的项目目录下

cd hello

在这里插入图片描述

npm run dev

启动项目

在这里插入图片描述

启动成功

在这里插入图片描述

创建views文件夹，该文件夹中存放业务组件

components用来存放公共的组件

在这里插入图片描述

00后小菜鸟
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用webstorm搭建vue项目
蟹蟹肉的博客
03-15 375
前提条件： 已下载安装好webstorm 、node.js、git 开始搭建vue项目： 1、安装淘宝镜像（类似于阿里云的maven中央仓库镜像） 安装命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 验证命令：cnpm -v 2、安装webpack 利用cnpm安装webpack命令...
Vue.cli(Vue手脚架)创建Vue项目
qq_45881714的博客
05-30 593
超级详细的vue项目的创建
使用webstorm搭建vue-cli项目
weixin_30839881的博客
08-11 677
前言 随着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搭建vue项目
blues的博客
04-20 796
本文只针对新手。 首先要明白几个名词（概念）。 Node.js： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 npm： npm全称为Node Package Manager，是一个基于N...
webstorm建立vue-cli脚手架的傻瓜式教程
10-14
主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue(二十三)webstorm创建vue-cli脚手架项目
Good Luck
05-28 1138
1.创建项目 大约五到十分钟后，项目创建完毕。 2.启动项目（1.可以使用命令式：即如下图；2.可视化启动：webstorm右上角的启动按钮和蜘蛛按钮都可以启动） 3.启动可视化UI Ctr+C关闭项目（如果是可视化启动，点击红色方块停止即可） 黑窗口执行命令： vue ui 4.安装插件（示例：vuex、vue-router） 这时候可以看到、后台报错了： 这个是因为eslint语法检查导致的，eslint语法只允许kebab-ca...
使用webstorm来创建并且运行vue项目详细教程
热门推荐
祈澈菇凉
02-04 1万+
准备工作，这些就不一一说明了，如果有不会的，可以去前面的教程里面看一看，找一找。 1：webstorm的安装： 2：node.js的安装 3：安装Git 4：vue-cli 1:初始化一个项目 打开cmd（右键管理员）或者git，进入D盘，输入创建命令，一路回车键 d: vue init webpack myprojectvue ...
Webstorm 搭建一个Vue项目
fububanzan_的博客
07-03 8316
在Webstorm上搭建一个Vue项目
搭建vue脚手架(vue-cli)，创建vue-webpack项目
weixin_42756155的博客
07-21 932
<初学vue，做个简单的学习记录> 一、 对于vue.js来说，如果你想要快速开始，那么只需要直接到官网下载vue.js并引用<script>标签，vue就会被注册成一个全局变量。 下载地址：vue官网 https://cn.vuejs.org/v2/guide/installation.html 或者使用CDN方法： <script src="http...
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。 webstorm官网 自己选择要安装的路径 然后就是一路next 2. 安装完成之后，通过校园邮箱申请免费资格 申请网址 点击APPLY NOW开始申请 然后需要填写一些信息，学历，毕业日期 以及校园邮箱等等，如实填写即可 然后一系列操作之后， 你的账号就有了一年的免费使用资格，比网上去找什么激活码要好得多。一年到期之后还可以继续申请，直到毕业，爽不爽。 3. 搭建vue之前准备工
webstorm搭建vue环境以及通过webpack模板搭建项目流程
08-19
webstorm搭建vue环境以及通过webpack模板搭建项目流程
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
01-19
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？ 解决方法 webstorm保存的时候会先保存...
【Vue】使用Vue脚手架(vue-cli)构建Vue3项目
早睡早起长头发的博客
08-17 1959
一、利用cmd和vscode创建 二、利用cmd和webstorm创建
nodejs服务器及安装vue脚手架--vue-cli
weixin_52725665的博客
04-17 425
写好的vue工程—把我们的工程部署到该服务器上。注意:不要安装到中文目录下或者空格的目录下。创建标准的 vue 工程。
【内网】WebStorm搭建Vue环境
一七
04-24 6666
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
【Vue.js学习笔记】9：搭建Vue-CLI脚手架并创建Vue项目,在WebStorm中创建Vue项目
LauZyHou的笔记
12-26 1910
在第一篇的时候确实可以创建，这次跟着视频搭建一次，比较一下和上次的区别，更正一下上次的错误操作，加深理解。 搭建Vue-CLI脚手架 在Node.js的安装目录下，删除node_cache/和node_global下的所有内容，即让Node处于刚刚安装完成的状态，连cnpm也一起删掉了。 使用npm install --global vue-cli安装一下Vue脚手架，安装好后使用vue-V能看到...
webstorm建立vue-cli脚手架傻瓜式详解
hello world的博客
09-21 3670
webstorm 文件 -> new -> project 1、尽量不要勾选 Use the default project setup (babel, eslint) 默认建立的项目好多的配置不全，后期再装很麻烦。 2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会看见一些选项，你要集成什么就选就
用webstorm2020.01&vuecli3搭建vue项目
qq_39220748的博客
06-28 2451
本文只针对第一次搭建vue项目新手 首先你要准备一个Node.js Node.js： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 npm： npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Mav
使用webstorm创建vue项目
最新发布
08-22
使用WebStorm创建Vue项目的步骤如下： 1. 打开终端，并运行以下命令安装Vue脚手架：npm install vue-cli -g 2. 然后在终端中切换到你想要创建Vue项目的文件夹，并运行以下命令：vue init webpack myproject1 （其中myproject1是你的项目名称） 3. 按照提示输入相关内容，比如项目名称、描述等。 4. 完成以上步骤后，Vue项目将被创建在指定的文件夹中。 另外，如果你希望在WebStorm中快速启动Vue项目，可以进行以下配置： 1. 打开WebStorm，点击顶部菜单栏的"File"，然后选择"Open"。 2. 在文件浏览器中选择你创建的Vue项目文件夹，点击"Open"按钮导入项目。 3. 导入项目后，WebStorm会自动检测到该项目的相关配置文件，并设置好Vue开发环境。 4. 接下来，你可以在WebStorm中编辑和修改Vue项目的代码。 5. 若要运行项目并调出控制台，可以使用WebStorm的内置功能，在顶部菜单栏中选择"Run"，然后选择"Run"或者按下快捷键"Ctrl + Shift + R"。 通过以上步骤，你就可以在WebStorm中创建和运行Vue项目了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [用webstorm创建vue项目](https://blog.csdn.net/u014274590/article/details/84849474)[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* [使用webstorm来创建并且运行vue项目详细教程](https://blog.csdn.net/qq_36538012/article/details/88054170)[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、付费专栏及课程。

余额充值