前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

一、软件及命令：

（1）下载node.js 最新的LTS 版本，下载 msi格式的（直接点击安装即可）。

（2）命令1：npm install cnpm -g

命令2：cnpm install webpack -g

命令3：cnpm install vue-cli -g

二、安装过程（熟练者可以直接跳过安装过程，直接使用上述命令安装即可）

1、安装 node,首先去官网下载LTS（Long Term Support）长期支持版本，网址 https://nodejs.org/zh-cn/

下载完成后直接点击下一步安装即可，安装完毕后使用 进入 Dos ,使用 node -v 查看安装是否成功，看到版本号就证明已经安装成功,如下图。

2、全局安装淘宝镜像 cnmp （国内服务器下载快）  -g （代表全局安装）

执行命令 npm install cnpm -g，等待安装完毕，如下图

npm install cnpm -g

3、全局安装webpack （一种打包工具）

执行命令  cnpm install webpack -g ，等待安装完毕，如下图

cnpm install webpack -g

4、 全局安装 vue-cli （vue 项目开发的工具，脚手架，一种别人搭好的架子，我们直接在上面开发我们的项目，打包发布就行了）

执行命令，cnpm install vue-cli -g，等待安装完毕，如下图

cnpm install vue-cli -g

至此，vue+webpack 的开发环境已经安装完毕。

5、还是做一个 demo 吧，万一有初学者看到这个帖子，也算给别人一个指点吧。

首先选择一个你要存放项目文件的目录，进入目录，在文件系统的地址栏输入cmd，点击回车。如下

（1）

（2）

（3）

（4）执行如下命令，创建项目,项目名称为 vue-demo （自定义的，随你喜欢）

vue init webpack vue-demo，等待安装完毕（快慢取决于你的网速，一般1-2分钟可以完毕），过程中会输入一些配置，也是随你喜欢的。如下图

图1安装前的配置， 图2 安装完成

至此脚手架工具已经把我们的项目初始化完毕，接下来我们来启动项目。

（ 5）首先进入 项目目录，执行命令     cd vue-demo（你的项目名字）  如下图

（6）运行 cnpm install （这个命令是以后你创建任何的 vue-cli+webpack 项目首先要执行的）命令 安装项目依赖，如下图

（7） 执行cnpm run dev 运行项目，运行成功的截图如下。

（8） 浏览器 输入 http://localhost:8080  查看效果。此项目是 脚手架项目的示例，以后会持续更新 vue 项目开发的其他知识。