Vue與Webpack安裝與使用

vue.js介紹

1、vue.js是什么？

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

漸進(jìn)式框架：Progressive，說(shuō)明vue.js的輕量，是指一個(gè)前端項(xiàng)目可以使用vue.js一兩個(gè)特性也可以整個(gè)項(xiàng)目都用vue.js。

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

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

2、Vue.js與ECMAScript

Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無(wú)法模擬的 ECMAScript 5 特性。什么是ECMAScript?

ECMAScript（簡(jiǎn)稱ES）是一種規(guī)范，我們平常所說(shuō)的Js/Javascript是ECMAScript的實(shí)現(xiàn)，早期主要應(yīng)用的ES3，當(dāng)前主流瀏覽器都支持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頁(yè)面使用script引入vue.js的庫(kù)即可使用。

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

Vue-CLI腳手架

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

4、vue.js有哪些功能？

聲明式渲染

?Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。

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

條件與循環(huán)

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

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

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

處理用戶輸入

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

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

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

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

vue.js基礎(chǔ)

MVVM模式

vue.js是一個(gè)MVVM的框架，理解MVVM有利于學(xué)習(xí)vue.js。MVVM拆分解釋為：

Model:負(fù)責(zé)數(shù)據(jù)存儲(chǔ)

View:負(fù)責(zé)頁(yè)面展示

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

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

用圖解的形式分析Ajax請(qǐng)求回來(lái)數(shù)據(jù)后直接操作Dom來(lái)達(dá)到視圖的更新的缺點(diǎn)，以及使用MVVM模式是如何來(lái)解決這個(gè)缺點(diǎn)的

Vue中的 MVVM

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

入門程序

本次測(cè)試我們?cè)陂T戶目錄中創(chuàng)建一個(gè)html頁(yè)面進(jìn)行測(cè)試，正式的頁(yè)面管理前端程序會(huì)單獨(dú)創(chuàng)建工程。在門戶目錄中創(chuàng)建vuetest目錄，并且在目錄下創(chuàng)建vue_01.html文件

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

代碼編寫步驟：

1、定義html，引入vue.js

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

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

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

1. 1+1=2

實(shí)現(xiàn)效果：

代碼如下：

 
 




 
 
 +
 =
 
 ‐‐>
 
 ‐‐>
 計(jì)算
 

本例子學(xué)習(xí)了：

一、v-model：

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

2.解決插值表達(dá)式閃爍問(wèn)題，使用v-text

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

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

3.v-bind

1、作用：
v‐bind可以將數(shù)據(jù)對(duì)象綁定在dom的任意屬性中。
v‐bind可以給dom對(duì)象綁定一個(gè)或多個(gè)特性，例如動(dòng)態(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 是一個(gè)前端資源的打包工具，它可以將js、image、css等資源當(dāng)成一個(gè)模塊進(jìn)行打包。

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

模塊化開發(fā)

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

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

編譯typescript、ES6等高級(jí)js語(yǔ)法

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

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

CSS預(yù)編譯

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

webpack的缺點(diǎn)：

配置有些繁瑣

文檔不豐富

安裝webpack

安裝Node.js

webpack基于node.js運(yùn)行，首先需要安裝node.js。

為什么會(huì)有node.js？

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

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

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

選安裝目錄進(jìn)行安裝默認(rèn)即可

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

測(cè)試

在命令提示符下輸入命令

會(huì)顯示當(dāng)前node的版本

安裝NPM

1.自動(dòng)安裝NPM

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

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

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

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

1.配置后可通過(guò)下面方式來(lái)驗(yàn)證是否成功

2.npm config get registry

或

npm info express

安裝webpack

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

?項(xiàng)目獨(dú)立安裝： npm install --save-dev webpack

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

啟動(dòng)

啟動(dòng)文件：

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

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

雙擊 dev。

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

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

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