WebStorm创建第一个vue项目

最近几天最折腾vue的项目  ！  刚开始懵懵懂懂   后来搞清楚了  就出个教程吧！ 很基础啊  

先你得下载node.js (Windows)  

安装node.js     安装路径我默认安装在C盘   

• 安装node

随便贴几张图    都是下一步下一步的操作！ 

 

安装成功！

 

我们可以检测一下是否安装成功  以及版本！

打开cmd    输入node -v

ok   没有什么问题 ！

• 配置全局安装路径和缓存

现在配置全局模块的安装路径到node-global文件夹，npm缓存到npm-cache文件夹

默认是会在C盘  我们给它换成其他盘

我是在D:\Nodejs目录下创建了node_cache和node_global文件夹

打开一个cmd 窗口    输入命令

npm config set prefix "D:\Nodejs\node_global"

npm config set cache "D:\Nodejs\node_cache"

设置好了  我们去配置环境变量！

 

• 配置node的环境变量

在系统变量里新增NODE_PATH 值为刚刚设置node_global路径  加一级node_modules目录（会自动创建）下载的全局东西会放这里面！

在用户变量的Path  点击编辑！

改成我们刚刚配置的node_global路径！

 

• 下载安装Vue相关的全局配置

 

安装cnpm

我们来安装一下cnpm

主要是为了cnpm 替代 npm

访问外网比较慢，我们使用淘宝的镜像 https://npm.taobao.org/

打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org

这里用的是Git Bash（相信大家都装好了Git）

回车之后，我就可以可以快乐的用 cnpm 替代 npm（npm安装node就会有的）（-g 是安装在全局文件夹中！也就是在我们的node_global目录下）

 

我们现在用cnpm 安装vue-cli 

输入命令 cnpm install -g vue-cli

ok（其实已经差不多了  但是我们得安装一个webpack   得会就知道为什么了！先安装！）

 

安装webpack

输入命令 cnpm install -g webpack

（这图有点长  没截完！） 安装成功！

 

• 使用WebStorm创建Vue项目！

一切大功告成！打开我们的WebStorm右键新建一个项目!

Next  

（不报错就直接跳过）如果创建会报错

创建时还是报错：

Error: Can not install ‘ij-rpc-client': npm ERR! Unexpected end of JSON input…

解决：cmd下全局安装 ij-rpc-client包：npm install ij-rpc-client -g

（重启一下webstorm）然后创建，输入项目名称，一步步配置就ok了

输入项目名称！

项目描述

项目的作者

选择运行和编译

是否安装官方路由  （按照自己的实际情况来）

是否使用ESLint管理代码  ，ESLint是个管理代码风格的工具 统一代码风格  在多人协作的项目都会用到！

新手就不用了

单元测试和e2e测试 根据个人爱好

 

创建好后  项目结构就是这样了！（其他东西我都屏蔽了！）

左侧栏有个npm 双击dev

输入localhost:8080就可以访问到了啦！