1、WebStorm软件安装

WebStorm是一款IDE工具和HBuilder类似，但是他可以支持使用DOS命令界面，并且可以支持更多的文件格式的提示哈，所以我们需要安 装这款IDE工具哦，好，我们去下载吧。

官网地址：https://www.jetbrains.com/webstorm/download/

现在WebStorm有30天试用，想破解的话要自己想招哈，以下是安装教程：

注意：安装路径中文件夹名不能携带中文以及不能携带空格

之后连续点击next即可安装成功

安装成功重启系统即可

重启后设置一下

直接设置成试用即可，30天学会Vue已经足够了

2、Node.js软件安装

Ide工具安装好之后，我们的VUE还需要很多的插件工具哦，所以这边

官网地址：https://nodejs.org/zh-cn/download/

所有版本：http://nodejs.org/dist/

查看安装环境：

Window + R键打开DOS界面，并输入cmd，点击确定

输入npm -version 回车（就可以看到安装版本是6.13.4）

输入node --version 回车（就可以看到node版本）

修改存放插件的路径：

注意：如果不修改的话，nodejs默认的软件和缓存的路径是c盘哦，你的c盘就去了，要知道下载在哪里吗？

我的电脑，右键，属性：

选择高级系统设置，弹框选择环境变量：

找到admin的系统变量，找到path，找到对应的变量值，这就是对应的下载位置哦

注意：npm和node命令都是nodejs的主要命令组成部分，这里的npm主要用来软件插件或组件，这里的node命令主要是用来执行xxx组 件用。

小结：也就是说WebStorm主要是IDE工具，高效开发使用，而nodeJS主要是组件创建和执行。

3、开始安装（我的第一个VUE脚手架项目，使用VUE官网推荐的方式哈）

安装vue-cli模块：

官网地址：https://cli.vuejs.org/zh/guide/installation.html

Window + R键打开运行界面，并输入cmd，点击确定。

输入命令：npm install -g @vue/cli

可以用：vue --version 命令，查看当前安装版本

注意：如果出现Unexpected token .. in JSON at position .... 那么执行：

解决手段1：

切换成淘宝的国内镜像：

npm config set registry https://registry.npm.taobao.org/

查看是否切换成功：

npm config get registry

强制清除npm缓存：

npm cache clean --force

再执行安装npm：

npm install -g npm

再次执行安装vue命令：

npm install -g @vue/cli

解决手段2：

删除根目录下package-lock.json文件，重新安装vue

解决手段3：

npm config rm proxy

npm config rm https-proxy

官网地址：https://cli.vuejs.org/zh/guide/cli-service.html

创建新的项目工程

选择Empty Project以及一个文件夹作为项目工程，点击create按钮

这样项目就创建好了

点击项目名右键-Open in Termainal

输入vue create hello-world （这里的命令：vue create 项目名称）

这里的default（babel，eslint）是默认的配置，如果是基本操作可以达到要求哦，如果是Manually select features则是自定义配置信 息，我们学习推荐使用这种配置哦。通过键盘上下选择，Enter选中。

接下来是选择需要添加的信息：通过键盘上下键选择，空格键 选中，a键全选，i键反选，回车确定。

Babel：就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言的插件。（必选）

TypeScript：TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。（不选）

Progressive Web App（PWA）Support：数据推送技术（手机使用屏幕插件，天气等的推送）支持工具。（不选）

Router：路由使用。（必选）

Vuex：一个专为 Vue.js 应用程序开发的状态管理模式。（必选）

CSS Pre-processors：对数据进行编译，转换成各个浏览器都能支持的css数据信息。（必选）

Linter / Formatter：必选。

Unit Testing：单选测试（不选）。

E2E Testing：测试（不选）。

是否使用历史模式（你的路由是否会改变呢？不会的话就不用这个模式哦），这里输入n即可。

选择CSS预处理的方式，也就是CSS样式的整理，选择stylus即可。

代码风格校验，选择ESLint + Prettier即可。

添加校验时间，默认即可，保存数据时校验。

保存自定义存放位置，默认即可。

确定保存之前的配置吗？输入y即可

保存的文件名，输入保存配置信息的名称。回车开始安装即可

需要等待一会才能创建好哟。

注意：下回如果还需要创建项目工程就可以通过保存好的配置进行创建了，如下图：

看到以下这张图说明创建成功了哈

注意：被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑 这个文 件。

测试运行：

点击项目名（hello-world）右键 - open in Termainal 打开dos界面，输入 npm run serve 命令

到这里就可以了，看到链接了吧，打开浏览器，走一个吧。

之后的章节我会讲解细节咯，小编篡写不易，希望大家点赞+收藏+关注我，查看我更多的Java教程。