我在苦苦坚持的时候，WebStorm 已经悄悄的“真香”起来
前言
最近接了一个活儿，是用 WebStorm 开发一个基于 VUE 的网站，但是我真的是几乎没接触过 VUE 相关的项目实践，更别说用 WebStorm 在实际中的应用，之前只是听朋友说多好用，但是，因为现有工具不影响工作效率，所以也就没有更换过，这次，没办法，我也不知道脑子咋的了，就接了这个活，学吧，正常的安装没啥问题，但是期间遇到了一些问题
今天把遇到的问题以及解决方案进行整理和总结，希望对大家有所帮助
下载环境
下载并安装 webstorm 了以后将项目从 git 上检出发现不能跑，后查询了相关资料发现由于 VUE 项目的运行依赖于 Node.js 环境，所以需要先下载 Node.js 相关环境
1、下载 Node.js 并安装
首先上 Node.js 官网找到了本机操作系统对应的 Node.js 版本进行了安装包的下载。官网：nodejs.org/en/download/
经过搜索资料，使用 VUE 或者配置 Node.js 还需要用到 npm–一个基于 Node.js 的包管理器,简介如下：
npm 全称为 Node Package Manager，是一个基于 Node.js 的包管理器，也是整个 Node.js 社区最流行、支持的第三方模块最多的包管理器(类似于 java 中的 Maven)。
npm 的初衷：JavaScript 开发人员更容易分享和重用代码。
npm 的使用场景：
允许用户获取第三方包并使用。
允许用户将自己编写的包或命令行程序进行发布分享。
但是目前官网的 Node.js 版本自带 npm，所以不需单独下载。npm 下载或者安装的步骤不再赘述。安装 nodeJs 的过程按照安装包的指引完成，安装完成之后可以输入以下指令查询 npm 版本。
配置 nodejs 的全局路径以及缓存路径
在 nodejs 安装路径下，新建 node_global 和 node_cache 两个文件夹
打开 cmd 命令提示符，输入指令如下：
设置环境变量
设置系统环境变量
创建系统环境变量 NODE_PATH 如下：
编辑系统环境变量 Path，加入路径 D:\nodeJs
设置用户环境变量
将用户环境变量的 Path 加入如下内容(看的其他资料没有加完整，所以后面出现了一些坑，在此贴出配置完整的)
保存生效
安装一个 module 测试一下上述环境变量是否配置成功，以安装 express 模块为例
在 cmd 里运行如下指令
P.S.:若加-g 则安装到配置好的 node_modules 文件夹中，如果不加-g 则安装到当前路径如果有名为 node_modules 的文件夹，则安装入其中，如果没有则自动生成一个该名的文件夹安装入其中。
安装成功。
2、安装淘宝镜像（类似于阿里云的 maven 中央仓库的镜像）
安装命令：
安装成功（我以为成功了，其实没成功）
验证命令：
运行该命令的时候出现了问题，问题截图如下：
然后核对他人博客上的安装成功后物理文件的路径，发现我没有安装成功
再一次运行安装淘宝镜像的指令，发现它报了两个 WARN，我准备从这两个 WARN 解决问题。
具体报错如下：
我去搜了第一个 WARN，人家建议我切换一下数据源试一试我顺着人家操作，操作了一遍，过程很顺利(第一个指令用于切换数据源，第二个指令用来判断是否切换成功)
重新 install 一下试一试，它给我 update 了。。但是还是没有验证成功
我重新按照管理员权限打开一下 cmd 试一试
还是出现该问题，其他经验帖引导，执行了策略更改，在此做出尝试：
3、安装 webPack
WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。
4、安装 Vue
检测上述操作是否安装成功
在检验 webpack 是否安装成功的时候出现了问题，大概意思是它提示 webpack-cli 不存在，让我安装问题如下：
我输入 yes 安装之后又不能成功安装
它找不到这个 module
改用全局安装指令试一试（后面加-g）显示成功
这次检验 webpack 成功了
检验完其他环境之后直接检验 Vue
成功。
使用 WebStorm 创建 Vue
打开 webStorm,选 create New Project->Vue.js
注：项目名不能带大写字母。。我截的那个图没有创建成功
为了以后 webStorm 能找到我的 nodeJs 我还是把环境变量配全
在 Path 中加入 node_global,nodejs,node_modules 路径
重启 webStorm，它会自动寻找了。其他资料告诉我蓝色所指是 vue.js 的包的地址，装好了就会自动寻找无需修改
之后控制台会拉取一些东西，需要等。有点慢慢慢慢慢
然后就好啦
它会自动运行，成功后输出访问路径
点击访问路径之后出现欢迎页
创建 Vue 项目成功
开发这么久，技术在不断提升，开发软件用的相当的多，但是技术种类的更新下，好的开发软件也跟雨后春笋一样，不断的冒出来，虽然现有的开发软件也能正常的工作，但是，新的软件也是“真香”，很多地方都进行了改进，用户体验相当好，像 idea 以及今天的 webstorm，都是用过之后，觉得真的好用
好啦，关注我，一个脑回路清奇的秃头程序员，文章首发公众号：Java 架构师联盟，每日更新技术好文
版权声明: 本文为 InfoQ 作者【小Q】的原创文章。
原文链接:【http://xie.infoq.cn/article/9af2303962cb1797ff1fd3d2a】。
本文遵守【CC BY-NC-ND】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2020.06.30 加入
小Q 公众号：Java架构师联盟 作者多年从事一线互联网Java开发的学习历程技术汇总，旨在为大家提供一个清晰详细的学习教程，侧重点更倾向编写Java核心内容。如果能为您提供帮助，请给予支持(关注、点赞、分享)！
评论