小白，带你入门webpack创建vue项目

        本篇教程将介绍如何使用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目录