Vue提高篇-模块打包工具webpack

1.准备

高效的开发离不开高效的打包工作，在学习webpack之前我们需要了解一些关于Node.js和NPM相关的知识，在此只会写出基本的用法，以应对接下来要写的重点-webpack。

Node.js官网：https://nodejs.org/en/

NPM中文网：https://www.npmjs.cn/

2.Node.js和NPM相关知识（此乃重点，需专学之，以通小理，贯通古今）

1.安装下载（window版本）

                     32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

                     64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

        2.安装步骤

                     步骤 1 : 双击安装包，如图1所示：

                     步骤 2 : 点击 Run(运行)，如图2所示：

                     步骤 3 : 勾选接受协议再点击 next（下一步）  ，如图3所示：

                     步骤 4 : 安装目录选取再点击 next（下一步），如图4所示：

                     步骤 5 : 选择安装模式 , 然后点击下一步 next（下一步），如图5所示：

                     步骤 6 :点击 Install（安装） ，然后并点击 next（下一步），如图6所示：

                     步骤7：等待安装完成，如图7，图8，图9所示：

                     步骤8：检验是否安装成功

                                  检验path中是否存在nodejs：开始=》运行=》输入"cmd" =》 输入命令"path"

                                  检验nodejs版本：开始=》运行=》输入"cmd" =》 输入命令"node --version"

                           

                           图1                                                                    图2                                                                           图3                   

                               

                           图4                                                                   图5                                                                      图6

                            

                          图7                                                                      图8                                                                       图9

         3.如图9所示，下载安装完node的同时NPM也被安装，接下来就要撸一撸NPM，开始：

                          1.npm可以理解成一个巨大无比的数据库，里面保存着好多好多的用于开发的包，只需下载就行；

                          2.安装一个包的语句：npm install "包的名称"，这里我得费几句话了：

                                            （1）安装位置是当前目录的 node_modules 文件夹里（没有这个文件夹，没关系，它会自己创建的）；

                                            （2）安装的版本原则是：package.json的版本为先，如果没有那就下载最新版本；

                                            （3）在node环境中中，可以通过 var bao = require('包名'); 来使用你下载的包呦；

                                            （4）如果想安装全局包，那语句就变了：npm install -g "包的名称"；

                          3.管理安装包，还是有所限定的有木有，那就要提到 package.json 了，具体包括：名称，版本，叙述等包相关信息；

3.webpack基础配置

1.本地创建一个文件夹，起名为 vuetest；

2.cmd进入dos系统，并进入刚刚创建的 vuetest文件夹，在此位置进行webpack的基础配置；

3.初始化配置：npm init ,有选的不用在意，回车到底，在 vuetest文件夹下会生成文件版本管理包：package.json;

4.本地安装webpack：npm install webpack --save-dev ,安装完成package 中就会出现webpack的字样了；

5.本地安装webpack-dev-server：npm install webpack-dev-server --save-dev ;这个用来提供启动服务器，接口代理等服务；

6.安装完成，查看package中是否存在 webpack webpack-dev-server；

4.vue组件在webpack中的书写

//一个简单的vue组件示例

5.官方vue脚手架:vue-cli安装