【超详细全过程】使用WebStorm创建一个Vue项目

开始之前

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

Node.js

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

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

npm

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

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

webpack

webpack是npm中的一个功能。

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

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

vue-cli

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

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

Node.js

下载

官方下载地址：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，如下图，如果出现相应的版本号，则说明安装成功。

其他工具

安装淘宝镜像（类似于阿里云的maven中央仓库镜像）

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

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

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

使用npm安装webpack

使用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，如下图，如果出现相应的版本号，则说明安装成功。

使用npm安装vue-cli

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

WebStorm

下载

第一步：打开官网，找到相应的工具，点击后跳转页面，点击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项目

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

Location：项目的存放位置；
Node：Node.js的exe文件目录；
Vue Cli：Vue-Cli的目录；
use the default project setup(babel,eslint)：在网络上面查询babel、eslint是js的一些模板，很多人在创建项目时并不选择这个，笔者目前也不知道为什么。勾选与否影响都不大。

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

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

解决问题的方法有两种，一种是使用3.0以上版本的Vue-Cli，第二种是手动创建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项目，会自动生成一系列文件，如下如所示：

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

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

第三步：下载依赖

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