在开篇介绍中，我大致列了5个章节，现在开始第一个vue的安装，特别是结合webstorm的使用。

我在第一次完成安装vue之后，打开webstorm创建vue项目，出现创建之后无反应，长时间等待无结果的情况，因此，这一篇中我将从安装vue开始，在webstorm打开，并创建项目运行起来结束。

我这里以Windows10为例，Mac后续酌情再补上~

Vue的安装

官方提供了cdn和npm安装两种方式，并且提到CLI脚手架。我个人是习惯是能用脚手架就是用脚手架，什么方便大型项目、了解作者思想……对我来说就是一个字，懒，有人家创建好的结构直接拿来用就是了。

具体CLI的介绍大家到官网自己看就可以了，地址在这里：https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，……致力于将 Vue 生态中的工具基础标准化。~ ~大家自己看就好了

安装nodejs

安装nodejs，下载地址：http://nodejs.cn/download/；具体安装过程就不写了。

安装完成在命令行里面查看下版本，命令如下：

//查看nodejs版本

node -v

//查看npm版本

npm -v 

这里推荐大家直接替换npm的镜像源，官方源的下载速度实在太慢，安装一个小module可能要等半天。

替换npm镜像源为淘宝镜像

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

//查看是否替换成功可以用

npm info express

前面说了，我比较懒，所以一次配置好，后面不出意外不会调整。所以临时配置的方式我就不写了。

或者，也可以使用cnpm也可以

npm install -g cnpm --registry=https://registry.npm.taobao.org

//安装的时候用

cnpm install [name]

安装webpack和vue脚手架vue-cli

webpack是什么？

简单说就是一个打包器，vue使用webpack就是为了使用模块化编写代码。官网在这里，想要深入研究的可以自行了解：https://www.webpackjs.com/

//安装webpack

npm install webpack -g

//安装vue

npm install vue -g

//安装vue-cli脚手架

npm install vue-cli -g

以上，安装vue完成。我们可以直接创建vue项目了，但是我习惯用IDE，所以选择webstorm，至于下载、安装大家自己来就可以，也不要问我要注册码(*￣▽￣*)/

在webstorm创建vue项目

这时候如果要直接使用webstorm创建vue项目，是有问题的。例如下面这种，打开webstorm，创建vue项目：

这样直接在webstorm中创建项目会出现下面这种等待框，一直等待，没有结果的。所以，不要这么傻等。

怎么办？还要安装Git，下载https://git-scm.com/downloads ，安装git之后，webstorm创建vue项目非常顺利。

或者也可以在webstorm--new project之后，在命令行中运行vue init webpack，在webstorm中构建，然后就是一路yes就可以（我使用的时这种，简单，速度快）。

运行npm run dev

在浏览器打开 http://localhost:8080查看，如下效果，表示webstorm创建vue成功了。

以上，vue安装以及在webstorm中安装项目已经完成。

下面是我遇到的几个问题，我选了3个需要注意的，如果后面再有其他问题，我会在本篇后面继续增加。

注意1：

使用上面vue init webpack构建项目之后，原webstorm创建vue的进度依然没停止，仍在继续（如下图所示），直接点击右上角的停止按钮结束就可以，或者不理睬它，继续让他构建，最终不会影响我们的项目。

注意2：

在vue init webpack构建时，在ESLint这一项可以 选择no，如果选择了yes，那么在编写代码时经常会出现莫名的错误（主要是各类空格不合规范，很烦人），可以从build--webpack.base.conf.js中将其关闭，如下：

注意3：

配置webstorm运行vue项目，通常来说按上面的方式安装完成之后，直接用webstorm运行是会提示edit，我们需要将其改为dev方式，如下：