設為首頁
加入收藏
手機
Vue與Webpack安裝與使用
vue.js介紹
1、vue.js是什么？
?Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與[現(xiàn)代化的工具鏈]{.underline}以及各種[支持類庫]{.underline}結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。
漸進式框架：Progressive，說明vue.js的輕量，是指一個前端項目可以使用vue.js一兩個特性也可以整個項目都用vue.js。
自底向上逐層應用：作為漸進式框架要實現(xiàn)的目標就是方便項目增量開發(fā)。參考：[https://cn.vuejs.org/v2/guide/]{.underline}
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
2、Vue.js與ECMAScript
Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。什么是ECMAScript?
ECMAScript（簡稱ES）是一種規(guī)范，我們平常所說的Js/Javascript是ECMAScript的實現(xiàn)，早期主要應用的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應用打包。大型應用推薦此方案。
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元素中的值。
處理用戶輸入
?為了讓用戶和你的應用進行交互，我們可以用方法
組件化應用構建
?指令添加一個事件監(jiān)聽器，通過它調(diào)用在 Vue 實例中定義的
?vue.js可以定義一個一個的組件，在vue頁面中引用組件，這個功能非常適合構建大型應用。
vue.js基礎
MVVM模式
vue.js是一個MVVM的框架，理解MVVM有利于學習vue.js。MVVM拆分解釋為：
Model:負責數(shù)據(jù)存儲
View:負責頁面展示
View Model:負責業(yè)務邏輯處理（比如Ajax請求等），對數(shù)據(jù)進行加工后交給視圖展示
MVVM要解決的問題是將業(yè)務邏輯代碼與視圖代碼進行完全分離，使各自的職責更加清晰，后期代碼維護更加簡單
用圖解的形式分析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文件
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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)效果：
代碼如下：
<!DOCTYPE html>
<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title>vue.js入門程序</title>
</head>
<body>
<div id="app">
<!‐‐{{name}}解決閃爍問題使用v‐text‐‐>
<a v‐bind:href="url"><span v‐text="name"></span></a>
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
<span v‐text="result"></span>
<!‐‐ <span v‐text="Number.parseInt(num1)+Number.parseInt(num2)"></span>‐‐>
<!‐‐{{num1+num2}}‐‐>
<!‐‐<input type="text" v‐model="result">‐‐>
<button v‐on:click="change">計算</button>
<!‐‐ 在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色 ‐‐>
</div>
</body>
<script src="/js/vue/vue.min.js"></script>
<script>
// 實例化Vue對象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
el:"#app",//表示當前vue對象接管app的div區(qū)域data:{
name:'黑馬程序員',// 相當于是MVVM中的Model這個角色
num1:0, num2:0, result:0,
url:'http://www.itcast.cn'
},
methods:{
change:function(){
this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2) alert(this.result)
}
}
});
</script>
</html>
本例子學習了：
一、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、舉例：
<img v‐bind:src="imageSrc">
<div v‐bind:style="{ fontSize: size + 'px' }"></div>
3、縮寫形式
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
2. 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">
<ul>
<!‐‐只顯示偶數(shù)行‐‐>
<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="item.user.uname">
<div v‐if="item.user.uname=='heima'" style="background: chartreuse"><!‐‐名稱為heima的加背景色‐‐>
{{index}}‐{{item.user.uname}}‐{{item.user.age}}
</div>
<div v‐else="">
{{index}}‐{{item.user.uname}}‐{{item.user.age}}
</div>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app', data:{
list:[1,2,3,4,4],
user:{uname:'itcast',age:10}, userlist:[
{ user:{uname:'itcast',age:10}},
{ user:{uname:'heima',age:11}}
]
}
});
</script>
</html>
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語法
隨著前端技術的強大，開發(fā)中可以使用javascript的很多高級版本，比如：typescript、ES6等，方便開發(fā)，
webpack可以將打包文件轉換成瀏覽器可識別的js語法。
CSS預編譯
webpack允許在開發(fā)中使用Sass 和 Less等原生CSS的擴展技術，通過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 是一個運行在服務端的框架，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務端的程序，這樣也就實現(xiàn)了用javaScript去開發(fā) Apache + PHP 以及 Java Servlet所開發(fā)的服務端功能，這樣做的好處就是前端和后端都采用 javascript，即開發(fā)一份js程序即可以運行在前端也可以運行的服務端，這樣比一個應用使用多種語言在開發(fā)效率上要高，不過node.js屬于新興產(chǎn)品，一些公司也在嘗試使用node.js完成一些業(yè)務領域，node.js基于V8引擎，基于 事件驅(qū)動機制，在特定領域性能出色，比如用node.js實現(xiàn)消息推送、狀態(tài)監(jiān)控等的業(yè)務功能非常合適。
下邊我們?nèi)グ惭bNode.js：
推薦下載LTS版本，本教程安裝9.4.0。
選安裝目錄進行安裝默認即可
安裝完成檢查PATH環(huán)境變量是否設置了node.js的路徑。
測試
在命令提示符下輸入命令
會顯示當前node的版本
安裝NPM
1.自動安裝NPM
?npm全稱Node Package Manager，他是node包管理和分發(fā)的工具，使用NPM可以對應用的依賴進行管理，NPM的功能和服務端項目構建工具maven差不多，我們通過npm 可以很方便地下載js庫，打包js文件。node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本
2.設置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
推薦閱讀：華為手機哪款值得購買
（正文已結束）
