使用webstorm搭建vue项目

首先安装好node.js,去官网下载   https://nodejs.org/en/

下载完成后,傻瓜式安装,一直下一步,选择路径就可以了

默认安装完node.js是会安装了npm的,可在安装路径下查看

 

检查node.js和npm是否安装成功,随便在什么地方打开cmd或者git-bash输入命令

查看node.js  

可以看到安装的版本为v10.15.3

查看npm的安装版本

可以看到对应的npm的版本为: 6.4.1

使用npm安装vue-cli

输入命令:

npm install vue-cli -g

如果出现报错:[email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

此时的解决方法为如下:

主要是弄清楚path和node——modules的关系 
我这边主要是要在安装的node目录下执行，执行命令npm config list 

找出图片中prefix的路径 
输入：

输入vue -V 系统会给出对应的提示。我就是这么解决的

完成后查看安装的vue版本:  特别需要注意后面的V需要大写的

此时基本环境都完成了,下面使用webstorm创建vue项目

步骤如下:

这里需要设置Node interpreter的路径,如下,选择你安装的node.js的启动node.exe

并且需要选择vue-cli or @vue/cli的位置,直接点击三角形选择图中的就可以了

project template我们选择的是webpack来构建的,就不需要更改了

设置好后点击下一步

此时正在创建,需要稍稍等一小会,完成之后直接点击下一步

填写项目名称

项目描述

 

项目作者:

Vue build选择下一步

安装vue-router,推荐选择yes,一般会用到的

Eslint一般选择no,除非你很熟悉它的语法,否则各种报错提示

单元测试,随便了

下一步

e2e test选择no 

首页npm,选择yes

完成之后的项目如下:

项目就创建成功了