用webstorm搭建vue项目(亲测,绝对实用)

前提:已安装webstorm,这里主要讲搭建,webstorm的下载就不在这里说了。

1、了解一下基本知识
1.1、Node.js:

Node.js 是一个基于
Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

Node.js 的包管理器 npm,是全球最大的开源库生态系统。

nodejs版本查询:node -v

1.2、npm:
npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

npm的初衷:JavaScript开发人员更容易分享和重用代码。

npm的使用场景:
允许用户获取第三方包并使用。
允许用户将自己编写的包或命令行程序进行发布分享。

npm版本查询:npm -v

1.3、Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

2、下载Node.js(自带npm)
打开官网下载链接:https://nodejs.org/en/download/

3、在nodejs安装路径下,新建node_global和node_cache两个文件夹,如下图:
在这里插入图片描述
4、设置nodejs prefix(全局)和cache(缓存)路径
win+R,输入cmd

设置缓存文件夹
npm config set cache “D:\vueProject\nodejs\node_cache”

设置全局模块存放路径
npm config set prefix “D:\vueProject\nodejs\node_global”

5、设置环境变量
5.1、系统变量
在这里插入图片描述
path:
在这里插入图片描述
5.2、用户变量
在这里插入图片描述
6、测试
在这里插入图片描述

7、安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

验证命令:cnpm -v

8、安装webpack

命令行语句为cnpm install webpack -g

9、安装Vue
cnpm install vue -g

10、安装vue命令行工具,即vue-cli 脚手架
cnpm install vue-cli -g

11、检测是否安装成功
在这里插入图片描述
11.1、如果webpack -v 出现

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
不用管 直接回车 然后执行
此命令npm install webpack-cli -g

11.2、vue -V(大写)

12、下载安装git(webStorm创建Vue需要用的,不然会报错)
官网:https://git-scm.com/
三方:https://pc.qq.com/detail/13/detail_22693.html
没办法,我下载时,官网不知道咋回事就是下不了,三方也还行啦。

13、使用webstorm创建vue

打开webStorm (我用是版本是2019.1)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
OK,使用webstorm搭建vue项目到此就结束啦~~~

  • 36
    点赞
  • 260
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
使用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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值