图文并茂——从零开始使用Webstorm创建vue.js项目
目录
1）安装node.js
2）创建node_global和node_cache文件夹
3）配置NODE_PATH环境变量
4）安装taobao镜像
5）安装webpack
6）全局安装vue脚手架vue-cli
7）使用Webstorm创建vue.js项目（默认项目，下面会介绍自定义创建项目）
8）使用vue-cli自定义创建项目
1）安装node.js
进入官网，下载推荐给大部分用户的版本，完成之后执行安装，选择安装目录之后一直next就行，不需要其他操作.
介于之后配置路径的易读性和方便读者对照，这里是笔者安装路径:H:DevelopeSoftNodeJsDown
安装好之后，运行cmd命令行，输入node -v来验证安装是否正确（出现版本号即正确），最新版本的安装，系统会自动配置系统环境变量，所以不需要用户自己手动配置node.js的环境变量
2）创建node_global和node_cache文件夹
在node.js安装路径下创建node_global和node_cache文件夹，创建之后运行下面两个命令
npm config set prefix “d:
odejs
ode_global”
npm config set cache “d:
odejs
ode_cache”
之后运行npm命令下载express
npm install express -g
成功之后可以在node_global/node_modules下看到多了一个express文件夹（这里因为笔者已经把后续步骤完成，所以多了cnpm文件夹）
3）配置NODE_PATH环境变量
路径为node.js安装路径node_global/node_modules，H:DevelopeSoftNodeJsDown
ode_global
ode_modules
为了验证以上步骤没有出错，在cmd命令行下面执行node，并输入require('express')命令执行，出现以下界面则成功，说明上述步骤没有错误
如有错误请检查环境变量是否配置正确，最后使用.exit退出该模式
4）安装taobao镜像
（类比maven的ali镜像作用，因为访问国外速度慢，使用镜像加速）
执行以下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm -v来验证
5）安装webpack
cnpm install webpack -g
cnpm install webpack-cli -g
使用webpack -v来验证
6）全局安装vue脚手架vue-cli
npm install -g vue-cli
使用vue -V验证（注意是大写的V）
7）使用Webstorm创建vue.js项目（默认项目，下面会介绍自定义创建项目）
如果遇见这种错误
/ fetchMetadata: sill resolveWithNewModule @vue/cli-ui@4.5.12 checking installable status
请不要慌张，这个就是因为没有走taobao镜像的原因，修改一下配置即可，如下：
npm config get registry（获取当前npm配置）
从截图我们可以看到，网址并不是之前下载安装的taobao镜像地址，所以需要我们修改设置
npm config set registry https://registry.npm.taobao.org
设置成功之后项目就能成功创建
等待项目创建完成
点击debug启动项目
访问地址之后出现以下页面即成功
8）使用vue-cli自定义创建项目
打开命令行工具输入vue create projectName
可能出现以下提示：
这个是因为当前vue-cli版本过低原因，根据提示安装最新的vue-cli，如果已经安装过了，需要先uninstall卸载，即上面截图第一个命令
命令行切换到想要创建的项目的路径下：
使用命令行vue create projectName 创建项目，接下来可以选择默认或者手动配置，手动配置可以根据自己需要的工具进行选择，下面举个例子：
（上下箭头进行选择，空格表示选中，enter确认，最下面的图的蓝色字体就是每个步骤选择的选项）
创建完成之后，切换到项目目录下，执行npm run serve启动项目
此时访问localhost:8080也会出现vue首页
如果想在webstorm启动，可以点击add configuration
name可以任意取，和项目名保持一致即可，点击apply并确认，然后点击界面的run或者debug也能正常启动项目了
