1.準備

高效的開發離不開高效的打包工作，在學習webpack之前我們需要了解一些關於Node.js和NPM相關的知識，在此只會寫出基本的用法，以應對接下來要寫的重點-webpack。

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

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

2.Node.js和NPM相關知識（此乃重點，需專學之，以通小理，貫通古今）

1.安裝下載（window版本）

                     32 位安裝包下載地址 : 

                     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元件示例
<template>                         //自動封裝的標籤，無需再封裝
    <div> 你好，{{name}} </div>    //元件的dom結構
</template>

<script>
    export default{          //ES6語法，匯出這個元件的意思
        data:function(){     //元件內的data要寫在回撥函式中，原因是：元件會建立多個例項，避免共享資料
            name:"yjs"
        }
    }
</script>

<style scoped>            //scoped的作用是避免此css樣式會影響其他元件或元素
    div{
        color:red;
    }
</style>

5.官方vue腳手架:vue-cli安裝