Vue與Webpack安裝與使用

vue.js介紹

1、vue.js是什么？

?Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與[現(xiàn)代化的工具鏈]{.underline}以及各種[支持類庫]{.underline}結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

漸進式框架：Progressive，說明vue.js的輕量，是指一個前端項目可以使用vue.js一兩個特性也可以整個項目都用vue.js。

自底向上逐層應(yīng)用：作為漸進式框架要實現(xiàn)的目標就是方便項目增量開發(fā)。參考：[https://cn.vuejs.org/v2/guide/]{.underline}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。

2、Vue.js與ECMAScript

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

ECMAScript（簡稱ES）是一種規(guī)范，我們平常所說的Js/Javascript是ECMAScript的實現(xiàn)，早期主要應(yīng)用的ES3，當前主流瀏覽器都支持ES5、ES6，ES8已于2017年發(fā)布。

ES6：[http://www.ecma-international.org/ecma-262/6.0/]{.underline}

ES7：[http://www.ecma-international.org/ecma-262/7.0/]{.underline}

3、Vue.js的使用

在html頁面使用script引入vue.js的庫即可使用。

使用Npm管理依賴，使用webpack打包工具對vue.js應(yīng)用打包。大型應(yīng)用推薦此方案。

Vue-CLI腳手架

使用vue.js官方提供的CLI腳本架很方便去創(chuàng)建vue.js工程雛形。

4、vue.js有哪些功能？

聲明式渲染

?Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。

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

條件與循環(huán)

?dom中可以使用vue.js提供的v-if、v-for等標簽，方便對數(shù)據(jù)進行判斷、循環(huán)。

雙向數(shù)據(jù)綁定

?Vue 提供v-model 指令，它可以輕松實現(xiàn)Dom元素和數(shù)據(jù)對象之間雙向綁定，即修改Dom元素中的值自動修改綁定的數(shù)據(jù)對象，修改數(shù)據(jù)對象的值自動修改Dom元素中的值。

處理用戶輸入

?為了讓用戶和你的應(yīng)用進行交互，我們可以用方法

組件化應(yīng)用構(gòu)建

?指令添加一個事件監(jiān)聽器，通過它調(diào)用在 Vue 實例中定義的

?vue.js可以定義一個一個的組件，在vue頁面中引用組件，這個功能非常適合構(gòu)建大型應(yīng)用。

vue.js基礎(chǔ)

MVVM模式

vue.js是一個MVVM的框架，理解MVVM有利于學習vue.js。MVVM拆分解釋為：

Model:負責數(shù)據(jù)存儲

View:負責頁面展示

View Model:負責業(yè)務(wù)邏輯處理（比如Ajax請求等），對數(shù)據(jù)進行加工后交給視圖展示

MVVM要解決的問題是將業(yè)務(wù)邏輯代碼與視圖代碼進行完全分離，使各自的職責更加清晰，后期代碼維護更加簡單

用圖解的形式分析Ajax請求回來數(shù)據(jù)后直接操作Dom來達到視圖的更新的缺點，以及使用MVVM模式是如何來解決這個缺點的

Vue中的 MVVM

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

入門程序

本次測試我們在門戶目錄中創(chuàng)建一個html頁面進行測試，正式的頁面管理前端程序會單獨創(chuàng)建工程。在門戶目錄中創(chuàng)建vuetest目錄，并且在目錄下創(chuàng)建vue_01.html文件

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0uwJfZQv-1574066802967)(media/image5.jpeg)]

代碼編寫步驟：

1、定義html，引入vue.js

2、定義app div，此區(qū)域作為vue的接管區(qū)域3、定義vue實例，接管app區(qū)域。

4、定義model（數(shù)據(jù)對象）

5、VM完成在app中展示數(shù)據(jù)

1. 1+1=2

實現(xiàn)效果：

代碼如下：

 
 




 
 
 +
 =
 
 ‐‐>
 
 ‐‐>
 計算
 

本例子學習了：

一、v-model：

1.在表單控件或者組件上創(chuàng)建雙向綁定，2.v-model僅能在如下元素中使用：

2.解決插值表達式閃爍問題，使用v-text

v-text可以將一個變量的值渲染到指定的元素中,它可以解決插值表達式閃爍的問題

2.v-on綁定一個按鈕的單擊事件

3.v-bind

1、作用：
v‐bind可以將數(shù)據(jù)對象綁定在dom的任意屬性中。
v‐bind可以給dom對象綁定一個或多個特性，例如動態(tài)綁定style和class

2、舉例：



3、縮寫形式

2. v-if和v-for

 
 
 



 

 
 
{{index}}‐{{item}}
 

 
{{key}}‐{{value}}

 

 

 {{index}}‐{{item.user.uname}}‐{{item.user.age}}
 

 

 {{index}}‐{{item.user.uname}}‐{{item.user.age}}
 

 

 

webpack介紹

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

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

模塊化開發(fā)

?程序員在開發(fā)時可以分模塊創(chuàng)建不同的js、 css等小文件方便開發(fā)，最后使用webpack將這些小文件打包成一個文件，減少了http的請求次數(shù)。

webpack可以實現(xiàn)按需打包，為了避免出現(xiàn)打包文件過大可以打包成多個文件。

編譯typescript、ES6等高級js語法

隨著前端技術(shù)的強大，開發(fā)中可以使用javascript的很多高級版本，比如：typescript、ES6等，方便開發(fā)，

webpack可以將打包文件轉(zhuǎn)換成瀏覽器可識別的js語法。

CSS預(yù)編譯

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

webpack的缺點：

配置有些繁瑣

文檔不豐富

安裝webpack

安裝Node.js

webpack基于node.js運行，首先需要安裝node.js。

為什么會有node.js？

?傳統(tǒng)意義上的 JavaScript 運行在瀏覽器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一個運行在服務(wù)端的框架，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務(wù)端的程序，這樣也就實現(xiàn)了用javaScript去開發(fā) Apache + PHP 以及 Java Servlet所開發(fā)的服務(wù)端功能，這樣做的好處就是前端和后端都采用 javascript，即開發(fā)一份js程序即可以運行在前端也可以運行的服務(wù)端，這樣比一個應(yīng)用使用多種語言在開發(fā)效率上要高，不過node.js屬于新興產(chǎn)品，一些公司也在嘗試使用node.js完成一些業(yè)務(wù)領(lǐng)域，node.js基于V8引擎，基于 事件驅(qū)動機制，在特定領(lǐng)域性能出色，比如用node.js實現(xiàn)消息推送、狀態(tài)監(jiān)控等的業(yè)務(wù)功能非常合適。

下邊我們?nèi)グ惭bNode.js：

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

選安裝目錄進行安裝默認即可

安裝完成檢查PATH環(huán)境變量是否設(shè)置了node.js的路徑。

測試

在命令提示符下輸入命令

會顯示當前node的版本

安裝NPM

1.自動安裝NPM

?npm全稱Node Package Manager，他是node包管理和分發(fā)的工具，使用NPM可以對應(yīng)用的依賴進行管理，NPM的功能和服務(wù)端項目構(gòu)建工具maven差不多，我們通過npm 可以很方便地下載js庫，打包js文件。node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本

2.設(shè)置npm，淘寶鏡像

npm默認會去國外的鏡像去下載js包，在開發(fā)中通常我們使用國內(nèi)鏡像，這里我們使用淘寶鏡像

npm config set registry https://registry.npm.taobao.org

1.配置后可通過下面方式來驗證是否成功

2.npm config get registry

或

npm info express

安裝webpack

?全局安裝webpack： npm install webpack -g

?項目獨立安裝： npm install --save-dev webpack

?如果安裝成功，出現(xiàn)如下界面

啟動

啟動文件：

進入 webpacktest02目錄，執(zhí)行npm run dev

使用webstorm，右鍵package.json文件，選擇"Show npm Scripts"

雙擊 dev。

注意：dev就是在package.json中配置的webpack dev server命令。發(fā)現(xiàn)啟動成功自動打開瀏覽器。

修改src中的任意文件內(nèi)容，自動加載并刷新瀏覽器。

原文鏈接：https://blog.csdn.net/ZhouXianBiao/article/details/103126237