用WebStorm来快速搭建Vue项目

一、前言

再用到vue的时候，我们要先了解点基础知识，本此教程是面向小白的。

二、Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

三、npm

npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

npm的初衷：JavaScript开发人员更容易分享和重用代码。
npm的使用场景：

• 允许用户获取第三方包并使用。

• 允许用户将自己编写的包或命令行程序进行发布分享。
  npm版本查询：npm -v

四、Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

五、安装配置前提

需要安装webstorm，node.js
注：

• webstorm本人已写教程，需要的去上个目录查找

• node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

1.下载安装包之后直接点击安装即可。测试安装成功的界面如下：

2.修改node.js默认的npm安装目录，因为强迫症的原因，一般的工具我都会放在D盘中。

一：打开CMD，查看配置

npm config ls

二：在其它物理盘建立文件夹如：D:\sw\develop\nodejs\npm

三：重新设置

npm config set prefix "D:\Java\nodejs\node_npm"
npm config set cache "D:\Java\nodejs\node_npm\cache"

四：测试

npm install express -g

-g意思是安装到全局目录下，即 D:\Java\nodejs\node_npm下面的node_modules

五：配置变量可能会有个坑(有些人会有，有些人没有)，需要的话：地址

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

安装命令：

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

验证命令：

cnpm -v

3.安装webpack

利用cnpm安装webpack

cnpm install webpack -g

利用cnpm安装webpack-cli

cnpm install webpack-cli -g

4.接下来就是\全局安装\**vue-cli****。时间略长

安装命令：

cnpm install --global vue-cli

验证命令:

vue -V 

安装完成如图所示：

5.下面开始使用WebStorm

重要的一点，想用WebStorm创建项目得安装git。 安装很简单，官网找到下载安装即可，否则可能出现安装不了的情况

创建后等待一下，创建成功后项目树中有package.json，我们右键点击后选择Show npm Scripts

然后双击点击跑起来

大功告成

全局卸载

卸载vue-cli

##全局安装
npm install vue-cli -g;
##全局卸载
npm uninstall vue-cli -g;

卸载webpack-cli

## 删除全局webpack-cli
npm uninstall -g webpack-cli
## 删除本地（局部）webpack-cli
npm uninstall webpack-cli
## 删除全局webpack
npm uninstall -g webpack
## 删除本地webpack
npm un webpack

卸载cnpm

npm uninstall cnpm -g