vue(vue-cli+vue-router)+babel+webpack项目搭建入门（一）开发环境搭建

vue(vue-cli+vue-router)+babel+webpack项目搭建入门<一>

本系列文章将介绍基于vue+webpack的前端项目的构建过程。文章分为四章内容，第一章介绍开发环境的部署，第二章介绍项目的构建，第三章以一个登陆-主界面的纯前端项目为示例进行实战开发，第四章介绍项目打包部署以及部署上线时可能遇到的问题。本系列文章主要介绍项目构建的流程，旨在为不了解现代前端项目开发过程的读者提供一个流程介绍，不会在一些细节上深究讲解，因此本文适合初学者使用阅读。
本系列文章中使用的配套示例代码请在示例代码下载地址进行下载。本文的实战项目可在项目在线地址进行浏览观看。
在编写本系列文章时，各框架插件版本号如下：

• nodejs v10.4.1;
• npm v6.1.0;
• vue v2.5.2;
• vue-cli v2.9.6;
• vue-router v3.0.1;
• vuex v3.1.0;
• babel v6.5.2;
• babel-polyfill v6.23.0;
• webpack v3.6.0;

框架介绍及安装部署

在构建项目之前，我们先需要部署好本地开发环境。对于已经参与过类似项目开发的读者，也许你们已经拥有了相关的开发环境，那可以直接跳过第一章，从第二章搭建项目开始阅读。

NodeJS语言环境

NodeJs是一个让JavaScript运行在服务端（PC本地）的开发平台，为了能够构建以JavaScript为语言支撑的前端单页项目架构（本文所用的框架插件均基于NodeJS），我们首先需要在我们的开发环境搭建NodeJS语言环境。
NodeJS的安装非常简单，进入NodeJS官网，选择下载项中的LTS版本（Long Term Support，即稳定版本）。

接下去，就像安装普通软件一样，双击下载到的安装包，跟随图形界面的提示一步步操作即可安装完成NodeJs语言环境。