本篇教程将介绍如何使用webpack创建一个简易vue项目。首先，我们要知道webpack是什么？概括的讲，webpack是目前比较流行的一款模块化打包工具，帮助开发人员整合前端资源。打一个比喻，用webpack创建项目就像在厨房用各种厨具做菜，本来洗菜、切菜、调味、整理厨具都需要自己亲力亲为，但是有了webpack，这些通通帮我们自动化搞定。我们只需要关注这些菜本身，然后告诉webpack这个大工具怎么做，webpack会自动帮我们烹饪。 关于webpack的详细信息我们将会在以后的文章中介绍，这里我们先学会用工具制作出我们需要的项目。
有webpack这个工具，我们需要什么？工具运行需要通电、需要配套的设施环境。webpack所需的辅助是nodeJs。为什么用nodeJs？因为用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodeJs的时候同时安装的。（npm能很好地和诸如 webpack 或 Browserify 等模块打包器配合使用）。
总结：
npm : nodeJs中的包管理器
webpack:整合所有前端需要的静态资源，对资源进行打包，合并等
vue-cli :用户生成的Vue工程的脚手架。
一、安装nodeJs
在官网https://nodejs.org/en/上选择与系统匹配的版本下载并安装node，安装过程是一路驰骋下一步就ok了。
安装完毕，进入nodeJs的安装目录观察一下，如下图所示：
打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现对应的版本号，说明ok了。输入 npm -v 命令，可以显示npm的版本信息。
二、安装淘宝镜像库
输入如下cmd命令安装npm淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org（如果访问外网比较慢，以后再用到npm的地方可以直接用cnpm来代替 ）。或者可以用 npm 命令指定下载源：npm config set registry http://registry.cnpmjs.org。
检查镜像命令是否正常 npm config get registry
三、安装vue-cli
npm install -g vue-cli / cnpm i -g vue-cli (-g ：代表全局安装)
安装完毕，使用vue -V（V要大写）命令查看vue的版本。
注意：vue-cli工具内置了webpack 模板，在package.json的依赖中可以看到webpack。不推荐全局安装 webpack。这样项目中的 webpack 会锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
四、利用vue-cli初始化vue项目
用cmd命令进入到想要安装项目的目录，输入vue init webpack projname（projname：项目名称）。以我本地项目为例介绍，我的所有项目空间目录为：E:\workspace_idea。
Project name :项目名称 ，若不需要更改直接回车。注意不能使用大写。
Project description:项目描述，直接回车：默认为A Vue.js project。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，这里需要安装，所以选择Y。
Use ESLint to lint your code? 是否用ESLint来限制代码错误和风格。如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否安装单元测试工具Karma+Mocha，不需要，输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。输入n。
执行完毕后，如果最后一个选择no,我们需要使用cmd命令进入项目：cd projname(项目名)，然后
然后输入cnpm install，给项目下载依赖包。下载成功后，在package.json文件中，可以看到刚刚输入的项目信息。
五、运行项目
至此，我们在项目的控制台，输入npm run dev命令，运行项目。在浏览器输入项目地址：就可以访问项目了。
六、项目目录
├── README.md 项目的说明文档，markdown 格式
├── index.html 入口页面，可以添加一些mete、浏览器图标等代码
├── build 构建脚本目录
├── build.js 生产环境构建脚本
├── utils.js 构建相关工具方法
├── webpack.base.conf.js wabpack基础配置
├── webpack.dev.conf.js wabpack开发环境配置
└── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置，包括端口号等，初学者可以使用默认设置
├── dev.env.js 开发环境变量
├── index.js 项目配置文件
├── prod.env.js 生产环境变量
└── test.env.js 测试环境变量
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
├── main.js 入口js文件
├── app.vue 根组件，可以直接将组件写在这里，不用components目录，一般我们不这样做
├── components 组件目录
├── assets 资源目录，放置一些如logo等的资源，这里的资源会被wabpack构建
├── routes 前端路由
└── index.js
├── store 应用级数据（state）
└── index.js
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e），如不需要进行单元测试和e2e测试，可删除文件
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
