Day02_Vue.js與Webpack

阿新 • • 發佈：2020-07-27

Vue.js與Webpack

1 vue.js介紹

1、vue.js是什麼？

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
漸進式框架：Progressive，說明vue.js的輕量，是指一個前端專案可以使用vue.js一兩個特性也可以,整個專案也可以都用 vue.js。
自底向上逐層應用：作為漸進式框架要實現的目標就是方便專案增量開發。
參考：

https://cn.vuejs.org/v2/guide/

2、Vue.js與ECMAScript

Vue 不支援 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。什麼是ECMAScript?

ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會）在標準ECMA-262中定義的指令碼語言規範。這種語言在全球資訊網上應用廣泛，它往往被稱為JavaScript或JScript，但實際上後兩者是ECMA-262標準的實現和擴充套件。

ECMAScript（簡稱ES）是一種規範，我們平常所說的Js/Javascript是ECMAScript的實現，早期主要應用的是ES3，當前主流瀏覽器都支援ES5、ES6，ES8已於2017年釋出。

ES6：http://www.ecma-international.org/ecma-262/6.0/

ES7：http://www.ecma-international.org/ecma-262/7.0/

3、Vue.js的使用

1）在html頁面使用script引入vue.js的庫即可使用。
2）使用Npm管理依賴，使用webpack打包工具對vue.js應用打包。（大型應用推薦此方案。）

3）Vue-CLI腳手架

使用vue.js官方提供的CLI腳手架很方便去建立vue.js工程雛形。

4、vue.js有哪些功能？

1）宣告式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統。

比如：使用vue.js的插值表示式放在Dom的任意地方，插值表示式的值將被渲染在Dom中。

2）條件與迴圈

dom中可以使用vue.js提供的v-if、v-for等標籤，方便對資料進行判斷、迴圈。

3）雙向資料繫結

Vue 提供v-model 指令，它可以輕鬆實現Dom元素和資料物件之間雙向繫結，即修改Dom元素中的值自動修改繫結的資料物件，修改資料物件的值自動修改Dom元素中的值。

4）處理使用者輸入

為了讓使用者和你的應用進行互動，我們可以用方法v-on指令新增一個事件監聽器，通過它呼叫在 Vue 例項中定義的方法

5）元件化應用構建

vue.js可以定義一個一個的元件，在vue頁面中引用元件，這個功能非常適合構建大型應用。

2 vue.js基礎

2.1 MVVM模式

vue.js是一個MVVM的框架，理解MVVM有利於學習vue.js。

MVVM拆分解釋為：
- Model:負責資料儲存
- View:負責頁面展示
- View Model:負責業務邏輯處理（比如Ajax請求等），對資料進行加工後交給檢視展示
MVVM要解決的問題是將業務邏輯程式碼與檢視程式碼進行完全分離，使各自的職責更加清晰，後期程式碼維護更加簡單
Vue中的 MVVM

從上圖看出，VM(ViewModel)可以把view檢視和Model模型解耦合，VM的要做的工作就是vue.js所承擔的。

2.2 入門程式

本次測試我們在門戶目錄中建立一個html頁面進行測試，正式的頁面管理前端程式會單獨建立工程。

在門戶目錄中建立vuetest目錄，並且在目錄下建立vue_01.html檔案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入門程式</title>
    <script src="../js/vue/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{name}}
        <!‐‐ 在Vue接管區域中使用Vue的系統指令呈現資料 這些指令就相當於是MVVM中的View這個角色 ‐‐>
    </div>
</body>

<script>
    // 例項化Vue物件
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el:"#app", //表示當前vue物件接管app的div區域
        data:{
            name:"Java開發" // 相當於是MVVM中的Model這個角色
        }
    });
</script>
</html>

程式碼編寫步驟：

1、定義html，引入vue.js 
2、定義app div，此區域作為vue的接管區域 
3、定義vue例項，接管app區域
4、定義model（資料物件） 
5、VM完成在app中展示資料

2.3 1+1=2

實現效果：

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入門程式</title>
    <script src="../js/vue/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!‐‐{{name}}解決閃爍問題使用v‐text‐‐>
        計算器
       <input type="text"  v-model="num1"> +
        <input type="text" v-model="num2"> =
        <span v-text="result"></span>
        <button v-on:click="change">計算</button>
    </div>
</body>

<script>
    // 例項化Vue物件
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el:"#app", //表示當前vue物件接管app的div區域
        data:{
            name:"學成線上", // 相當於是MVVM中的Model這個角色
            num1: 0,
            num2: 0,
            result: 0,
            url: 'www.google.com'
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

本例子學習了：

1、v-model：
1)在表單控制元件或者元件上建立雙向繫結 2)v-model僅能在如下元素中使用：
input select textarea components（Vue中的元件）
2、解決插值表示式閃爍問題，使用v-text
v-text可以將一個變數的值渲染到指定的元素中,它可以解決插值表示式閃爍的問題
3、v-on繫結一個按鈕的單擊事件
1) 作用：
v‐bind可以將資料物件繫結在dom的任意屬性中。 v‐bind可以給dom物件繫結一個或多個特性，例如動態繫結style和class
2、舉例：
<img v‐bind:src="imageSrc">
<div v‐bind:style="{ fontSize: size + 'px' }"></div>
3、縮寫形式
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>

2.4 v-if和v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--        只顯示偶數行-->
        <li v-for="(item, index) in list" :key="index" v-if="index % 2 == 0">{{index}}--{{item}}</li>
        <li v-for="(value, key) in user">{{key}}‐{{value}}</li>
        <li v-for="(item, index) in userList" :key="index">
            <div v-if="item.user.username=='java'" style="background: chartreuse"><!‐‐名稱為java的加背景色‐‐>
                {{index}}‐{{item.user.username}}‐{{item.user.age}}
            </div>
            <div v-else="">
                {{index}}‐{{item.user.username}}‐{{item.user.age}}
            </div>
        </li>
    </div>
</body>

<script>
    // 例項化Vue物件
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el:"#app", //表示當前vue物件接管app的div區域
        data:{
            list:[1,2,3,4],
            user:{name:'java', age:10},
            userList:[
                {user:{username:'java', age:10}},
                {user:{username:'python', age: 11}}
            ]
        }
    });
</script>
</html>

3 webpack入門

使用vue.js開發大型應用需要使用webpack打包工具，本節研究webpack的使用方法。

3.1 webpack介紹

Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模組進行打包。

從圖中我們可以看出，Webpack 可以將js、css、png等多種靜態資源進行打包，使用webpack有什麼好處呢？

1、模組化開發

程式設計師在開發時可以分模組建立不同的js、 css等小檔案方便開發，最後使用webpack將這些小檔案打包成一個檔案，減少了http的請求次數。

webpack可以實現按需打包，為了避免出現打包檔案過大可以打包成多個檔案。

2、編譯typescript、ES6等高階js語法

隨著前端技術的強大，開發中可以使用javascript的很多高階版本，比如：typescript、ES6等，方便開發， webpack可以將打包檔案轉換成瀏覽器可識別的js語法。

3、CSS預編譯

webpack允許在開發中使用Sass 和 Less等原生CSS的擴充套件技術，通過sass-loader、less-loader將Sass 和 Less的語法編譯成瀏覽器可識別的css語法。

webpack的缺點：

1、配置有些繁瑣

2、文件不豐富

3.2 安裝webpack

3.2.1 安裝Node.js

webpack基於node.js執行，首先需要安裝node.js。

Node.js 是能夠在伺服器端執行 JavaScript 的開放原始碼、跨平臺 JavaScript 執行環境。

Node.js 由 Node.js Foundation（已與 JS Foundation 合併為 OpenJS Foundation）持有和維護，亦為 Linux 基金會的專案。Node.js採用Google開發的V8執行程式碼，使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高效能，可優化應用程式的傳輸量和規模。這些技術通常用於資料密集的即時應用程式。
Node.js大部分基本模組都用JavaScript語言編寫。在Node.js出現之前，JavaScript通常作為客戶端程式設計語言使用，以JavaScript寫出的程式常在使用者的瀏覽器上執行。Node.js的出現使JavaScript也能用於服務端程式設計。Node.js含有一系列內建模組，使得程式可以脫離Apache HTTP Server或IIS，作為獨立伺服器執行。

為什麼會有node.js？

傳統意義上的 JavaScript 執行在瀏覽器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一個執行在服務端的框架，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務端的程式，這樣也就實現了用 javaScript去開發 Apache + PHP 以及 Java Servlet所開發的服務端功能，這樣做的好處就是前端和後端都採用 javascript，即開發一份js程式即可以執行在前端也可以執行的服務端，這樣比一個應用使用多種語言在開發效率上要高，不過node.js屬於新興產品，一些公司也在嘗試使用node.js完成一些業務領域，node.js基於V8引擎，基於事件驅動機制，在特定領域效能出色，比如用node.js實現訊息推送、狀態監控等的業務功能非常合適。

下邊我們去安裝Node.js：

1、下載對應你係統的Node.js版本:

https://nodejs.org/en/download/

推薦下載LTS版本，本教程安裝9.4.0。

2、選安裝目錄進行安裝

預設即可

安裝完成檢查PATH環境變數是否設定了node.js的路徑。

3、測試

在命令提示符下輸入命令

node -v

會顯示當前node的版本

3.2.2 安裝NPM

1、自動安裝NPM

npm全稱Node Package Manager，他是node包管理和分發的工具，使用NPM可以對應用的依賴進行管理，NPM 的功能和服務端專案構建工具maven差不多，我們通過npm 可以很方便地下載js庫，打包js檔案。 node.js已經集成了npm工具，在命令提示符輸入 npm -v 可檢視當前npm版本

2、設定包路徑

包路徑就是npm從遠端下載的js包所存放的路徑。

使用 npm config ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑）

為了方便對依賴包管理，我們將管理包的路徑設定在單獨的地方，本教程將安裝目錄設定在node.js的目錄下，建立npm_modules和 npm_cache，執行下邊的命令：

本教程安裝node.js在Developement/nodejs/nodejs下, 執行命令如下：

npm cofig set preﬁx "Development/nodejs/npm_modules"
npm config set cache "Development/nodejs/npm_cache"

3、安裝cnpm

npm預設會去國外的映象去下載js包，在開發中通常我們使用國內映象，這裡我們使用淘寶映象.

下邊我們來安裝cnpm：

有時我們使用npm下載資源會很慢，所以我們可以安裝一個cnmp(淘寶映象)來加快下載速度。

輸入命令，進行全域性安裝淘寶映象。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝後，我們可以使用以下命令來檢視cnpm的版本

cnpm -v

nrm ls 檢視映象已經指向taobao

使nrm use XXX切換映象

如果nrm沒有安裝則需要進行全域性安裝：cnpm install -g nrm

4、非連網環境安裝cnpm

從本小節第3步開始就需要連網下載npm包，如果你的環境不能連網在老師的資料檔案下有已經下載好的webpack 相關包，下邊是安裝方法。

1）配置環境變數

NODE_HOME = D:\Program Files\nodejs (node.js安裝目錄)

在PATH變數中新增：%NODE_HOME%;%NODE_HOME%\npm_modules;

2）找到npm包路徑

根據上邊的安裝說明npm包路徑被設定到了node.js安裝目錄下的npm_modules目錄。

可以使用npm conﬁg ls檢視。

拷貝課程資料中的 npm_modules.zip到node.js安裝目錄，並解壓npm_modules.zip覆蓋本目錄下的 npm_modules資料夾。

3）完成上邊步驟測試

cnpm -v

3.2.3 安裝webpack

1、連網安裝

webpack安裝分為本地安裝和全域性安裝：

本地安裝：僅將webpack安裝在當前專案的node_modules目錄中，僅對當前專案有效。

全域性安裝：將webpack安裝在本機，對所有專案有效，全域性安裝會鎖定一個webpack版本，該版本可能不適用某個專案。全域性安裝需要新增 -g 引數。

進入webpacktest測試目錄目錄，執行：

1）本地安裝：

只在我的專案中使用 webpack，需要進行本地安裝，因為專案和專案所用的webpack的版本不一樣。本地安裝就會將webpack的js包下載到專案下的npm_modeuls目錄下。

在門戶目錄下建立webpack測試目錄webpacktest01：

 cnpm install --save-dev webpack 或 npm install --save-dev webpack
 npm install --save-dev webpack-cli (4.0以後的版本需要安裝webpack-cli)

2）全域性安裝加-g，如下：

全域性安裝就將webpack的js包下載到npm的包路徑下。

npm install webpack -g 或 cnpm install webpack -g

3）安裝webpack指定的版本：

本教程使用webpack3.6.0，安裝webpack3.6.0：

進入webpacktest測試目錄，執行：cnpm install --save-dev [email protected]

全域性安裝：npm install [email protected] -g或 cnpm install [email protected] -g

2、非連網安裝

參考上邊 “非連網環境安裝cnpm”描述，將課程資料中的 npm_modules.zip到node.js安裝目錄，並解壓 npm_modules.zip覆蓋本目錄下的npm_modules資料夾。

說明：已執行 “非連網環境安裝cnpm”下的操作不用重複執行。

測試：

在cmd狀態輸入webpack，檢視是否成功。

3.3 入門程式

通過本入門程式體會webpack打包的過程及模組化開發的思想。

3.3.1 需求分析

通過入門程式實現對js檔案的打包，體會webpack是如何對應用進行模組化管理。

對上邊1+1=2的例子使用webpack進行模組化管理

3.3.2 定義模組

建立webpacktest01目錄，將vue.min.js及vue_02.html拷貝到目錄下。

1、定義model01.js

在webpacktest01目錄下建立model01.js

將本程式使用的加法運算的js方法抽取到一個js檔案，此檔案就是一個模組

// 定義add函式
function  add(x, y) {
    return Number.parseInt(x) + Number.parseInt(y)
}

// function add2(x, y) { // return x + y+1 // }

// 匯出add方法
module.exports.addition = add;
// module.exports ={add,add2};//如果有多個方法這樣匯出

2、定義main.js
在webpacktest01目錄下建立main.js，main.js是本程式的js主檔案，包括如下內容：

1、在此檔案中會引用model01.js模組

2、引用vue.min.js（它也一個模組）

3、將html頁面中構建vue例項的程式碼放在main.js中

main.js的程式碼如下

var {addition} = require('./model01')
var Vue = require('./vue.min');
var VM = new Vue({
    el:"#app", // 表示當前vue物件接管app的div區域
    data:{
        name:"學成線上", // 表示當前vue物件接管app的div區域
        num1: 0,
        num2: 0,
        result: 0,
        url: 'www.google.com'
    },
    methods:{
        change:function () {
            //這裡使用了匯入的model01.js檔案中的add方法
            this.result = addition(this.num1, this.num2)
        }
    }
});

3.3.3 打包測試

上邊將mode01.js模組及main.js主檔案編寫完成，下邊使用webpack對這些js檔案進行打包

1、進入程式目錄，執行webpack main.js build.js ，這段指令表示將main.js打包輸出為 build.js檔案執行完成，觀察程式目錄是否出現build.js

2、在html中引用build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入門程式</title>
</head>
<body>
    <div id="app">
        <!‐‐{{name}}解決閃爍問題使用v‐text‐‐>
        計算器
       <input type="text"  v-model="num1"> +
        <input type="text" v-model="num2"> =
        <span v-text="result"></span>
        <button v-on:click="change">計算</button>
    </div>
</body>

<script src="build.js"/>

<script>
    // 例項化Vue物件
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el:"#app", //表示當前vue物件接管app的div區域
        data:{
            name:"學成線上", // 相當於是MVVM中的Model這個角色
            num1: 0,
            num2: 0,
            result: 0,
            url: 'www.google.com'
        },
        methods:{
            change:function () {
                this.result = addition(this.num1, this.num2)
            }
        }
    });
</script>
</html>

3、測試總結

測試功能：
1）輸入任意加數，其和會自動計算
2）點選“計算”會呼叫model01.js中的add方法

總結：

webpack可以將js分模組開發，開發完成對各模組程式碼打包成一個統一的檔案。

前端模組開發的思想和服務端模組開發的思想是一致的，有利於多人協助開發。

3.4 webpack-dev-server

webpack-dev-server開發伺服器，它的功能可以實現熱載入並且自動重新整理瀏覽器。

建立一個新的程式目錄，這裡我們建立webpacktest02目錄，將webpack入門程式的程式碼拷貝進來，並在目錄下建立src目錄、dist目錄。

將main.js和model01.js拷貝到src目錄。

3.4.1安裝配置

1、安裝webpack-dev-server

使用 webpack-dev-server需要安裝webpack、 webpack-dev-server和 html-webpack-plugin三個包。

cnpm install [email protected] [email protected] [email protected] --save-dev

安裝完成，會發現程式目錄出現一個package.json檔案，此檔案中記錄了程式的依賴。

沒有聯網的拷貝提供的node_modules.zip到webpacktest02目錄下，解壓到node_modules目錄下。

2、配置webpack-dev-server

在package.json中配置script

"scripts": { 
  "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008" 
}

--inline：自動重新整理

--hot：熱載入

--port：指定埠

--open：自動在預設瀏覽器開啟

--host：可以指定伺服器的 ip，不指定則為127.0.0.1，如果對外發布則填寫公網ip地址

{
  "scripts": {
    "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

devDependencies：開發人員在開發過程中所需要的依賴。
scripts：可執行的命令

3.4.2 配置webpack.conﬁg.js

在webpacktest02目錄下建立 webpack.conﬁg.js， webpack.conﬁg.js是webpack的配置檔案。在此檔案中可以配置應用的入口檔案、輸出配置、外掛等，其中要實現熱載入自動重新整理功能需要配置html-webpack-plugin外掛。

html-webpack-plugin的作用是根據html模板在記憶體生成html檔案，它的工作原理是根據模板檔案在記憶體中生成一個index.html檔案。

1、配置模板檔案

將原來的vue_01.html作為模板檔案，為了和記憶體中的index.html檔名區別，注意將vue_01.html中的script標籤去掉，內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js入門程式</title>
</head>
<body>
    <div id="app">
        <!‐‐{{name}}解決閃爍問題使用v‐text‐‐>
        計算器
       <input type="text"  v-model="num1"> +
        <input type="text" v-model="num2"> =
        <span v-text="result"></span>
        <button v-on:click="change">計算</button>
    </div>
</body>

<script>
    // 例項化Vue物件
    //vm :叫做MVVM中的 View Model
    var VM = new Vue({
        el:"#app", //表示當前vue物件接管app的div區域
        data:{
            name:"學成線上", // 相當於是MVVM中的Model這個角色
            num1: 0,
            num2: 0,
            result: 0,
            url: 'www.google.com'
        },
        methods:{
            change:function () {
                this.result = addition(this.num1, this.num2)
            }
        }
    });
</script>
</html>

2 、配置 html-webpack-plugin

在webpack.conﬁg.js中配置html-webpack-plugin外掛

3.4.3 啟動

啟動檔案：

1、進入 webpacktest02目錄，執行npm run dev

2、使用webstorm，右鍵package.json檔案，選擇“Show npm Scripts”

雙擊 dev。

注：dev就是在package.json中配置的webpack dev server命令

發現啟動成功自動開啟瀏覽器。

修改src中的任意檔案內容，重新整理瀏覽器可以觀察到自動載入。

3.4.4 debug除錯

使用了webpack之後就不能採用傳統js的除錯方法在chrome中打斷點。

webpack將多個原始檔打包成一個檔案，並且檔案的內容產生了很大的變化，webpack提供devtool進行除錯， devtool是基於sourcemap的方式，在除錯時會生成一個map檔案，其內容記錄生成檔案和原始檔的內容對映，即生成檔案中的哪個位置對應原始檔中的哪個位置，有了sourcemap就可以在除錯時看到原始碼。

配置如下：

1、在webpack.conﬁg.js中配置：

devtool: 'eval‐source‐map'

webpack.conﬁg.js部分內容如下：
2、在js中跟蹤程式碼的位置上新增debugger

例如：

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js', // 指定打包的入口檔案
    output:{
        path : __dirname+'/dist', // __dirname表示webpack.config.js所在目錄的絕對路徑
        filename: 'build.js' //輸出檔案
    },
    devtool: 'eval-source-map',
		......

在add方法中新增debugger

// 定義add函式
function add(x, y) {
  debugger
  return Number.parseInt(x) + Number.parseInt(y)
}

啟動應用，重新整理頁面跟蹤程式碼：

點選“計算” 即進入debugger程式碼位置，此時可以使用chrome進行除錯了。

注：必須開啟瀏覽器的程式碼除錯介面才會進入debug。safari瀏覽器也可以使用debug，其他的瀏覽器沒試過。