开始之前你需要了解一些知识。Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js一起，并成为前端三大主流框架。

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

Node.js就是一个容器，容器外是各种各样的浏览器，容器内是各种各样的js框架。就和Java中的JVM有异曲同工之妙。同时也听说Node.js还有编写后端的能力，这个笔者就没有涉猎了。

npm 是 Node.js 的包管理和分发工具。

如果我们需要导入别人的文件需要使用标签引入，如果导入的文件很多，就会不好管理，需要一个管理工具来进行宏观的管理。这就和Java中的Maven非常相似，npm的package.json就和Maven中的pom.xml一样。虽然二者理念相同，但是差距还是有的，可以类比，但是不能等同。

webpack是npm中的一个功能。

webpack是一个打包工具，可以帮你把你的项目（这里的项目其实就是指通过模块化开发的项目）打包为简洁版的浏览器可识别的静态资源。除此之外，webpack因为可以提高兼容性，可以将一些浏览器尚不支持的拓展语言（Scss，TypeScript等），进而减少由新特性带来的浏览器的兼容性问题。

有人说，webpack就是Java开发中的ant，但是现在ant已经很少用了，笔者没有用过，也不知道这样类比是否恰当，所以写在这里供大家参考。

生成Vue.js工程模板（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）。

其实Vue.js是不依赖于Node.js的，但是如果你要使用vue-cli，就需要安装Node.js，因为vue-cli所需要的webpack依赖于Node.js。如果非要拿Java中的内容来类比，那笔者认为就是springboot的快速开始spring-io/initializr。

官方下载地址：https://nodejs.org/en/download/

单机Windows installer即可自动下载，其他平台自行选择需要的版本。LTS是长期支持版本，Current是最新的版本，建议选择LTS。

Node.js 历史版本下载地址：https://nodejs.org/dist/

第一步：双击安装包，点击Next即可。

第二步：同意条款，点击Next即可。

第三步：设置安装位置，笔者习惯将这些开发工具安装在其他地方，但是这样会造成很多不必要的麻烦。所以笔者建议还是安装在默认位置，省心。点击Next即可。

第四步：一些配置，包括了PATH的设置，所以之后不用配置环境变量了。点击Next即可。

第五步：这里是安装一些python和c++插件，没什么用，笔者已经替大家尝试过了，不要打上对勾！！！点击Next即可。

第六步：之后点击Install，等待片刻，再点击Finish。就OK了

在cmd里面分别输入、node -v、npm-v，如下图，如果出现相应的版本号，则说明安装成功。

如果安装过程中卡在一个地方不动了，可能是因为网速不好。可以尝试一下更换镜像，方法如下。

在cmd中输入命令npm install -g cnpm --registry=https://registry.npm.taobao.org，安装完成之后输入cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

安装完成后，就可以使用cnpm代替npm执行。笔者在执行过程中都很快，所以没有使用到镜像。但是还是建议大家执行一下，如果在开发过程中遇到比较大的包，不使用国内镜像，就会导入非常长的时间。

使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如果你和笔者一样安装的是webpack 4.X以上的版本，就需要安装 webpack-cli 依赖。如下图直接输入y即可。

同样的你还可以直接输入npm install webpack webpack-cli -g安装。如果报错：Error: Cannot find module 'webpack-cli'，就执行npm install webpack-cli -g安装。

再次输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

在cmd中输入命令npm install --global vue-cli，安装完成之后输入vue -V（注意V大写），如下图，如果出现相应的版本号，则说明安装成功。

第一步：打开官网，找到相应的工具，点击后跳转页面，点击download进行下载 https://www.jetbrains.com/

第一步：下载完成后双击安装包，点击next

第二步：选择安装地点，这里笔者就默认装在固态硬盘，大家可以根据情况进行选择

第三步：如图勾选，点击Next

第四步：点击Install，等待即可

方法一：教育优惠

很简单，参考以下链接 https://blog.csdn.net/Java_zjj/article/details/84955552

方法二：这里分享大家一个网站，可以参考，2020年10月29号，亲测有效：

https://www.markerhub.com/tools/idea.html

这个破解工具是一个大神制作并分享的，并且承诺永久免费，只用于知识分享。如果大家发现有人用来牟利，希望可以进行举报。

选择Vue.js创建项目。其中：

如果你使用的是老版本的WebStorm，在下方还有一个project template。在那里直接选择webpack即可。如下图所示

但是笔者使用的WebStorm2020已经没有这个选项了。创建之后发现只是一个空包，如下图

解决问题的方法有两种，一种是使用3.0以上版本的Vue-Cli，第二种是手动创建Vue-Cli。

虽然使用3.0以上版本的Vue-Cli很方便，但是笔者所在的环境中大家还是使用2.9.6，这就让新的东西无法被兼容，所以没有办法，还是需要复杂陈旧的cmd命令行操作。

直接在终端操作也是可以的，但是有的时候会出现问题，大家可以到cmd指令你们再试试，方法都是一样的。这里就以cmd为例子，进行操作。

第一步：进入cmd界面，通过cd指令cd F:\WebStormProjects\first-demo进入项目根目录

第二步：使用vue init webpack初始化项目

期间还需要回答一些配置选择，这就和之前使用project template创建项目是一样的了。选择完成后，稍等片刻。（旧版本的project template的作用就是上面一系列的选择，那为什么webstorm 2020反而变得更不方便了？其实很简单，因为Vue-Cli3.0已经做到自动化了，这个后面会介绍）

通过vue-cli搭建一个vue项目，会自动生成一系列文件，如下如所示：

而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

第三步：下载依赖

如果安装后，webstorm的右下角会弹出如下所示弹窗，点击npm install即可。

其实这个按钮的内容就是执行指令npm install，效果是一样的。

第四步：运行

方法一：命令行运行

在Terminal中输入npm run dev即可。

当出现如图所示的你项目的地址url，就算是大功告成了。

点击本机地址链接，即可跳转页面。

出现经典的Vue界面即可。

方法二：npm图形化界面

方法三：脚本快捷键

右上角找到Edit Configuration

添加一个npm指令

其他的不用动，在Script中输入dev即可。之后如果想运行，就可以使用右上角的小三角。非常方便。

这是一种比较方便的方法，我觉得应该也是官方推荐的方法。这也是为什么WebStorm取消project template的意义。

第一步：创建项目是选择最新的Vue-Cli

第二步：等待片刻，会自动完成一系列配置

第三步：找到package.json 运行项目

不同的是这里不是dev，而是serve。

第四步：等待片刻，出现Vue即可。

npm安装教程 nodeJS安装和环境变量的配置 使用vue-cli（vue脚手架）快速搭建项目 使用VSCode创建第一个VUE项目 VUE学习目录汇总