您當前位置:寧波在線網 > 微商 > 正文
更多

Vue與Webpack安裝與使用

2020-03-28 07:30:48 來源: 閱讀:-

Vue與Webpack安裝與使用vue.js介紹1、vue.js是什么??Vue (讀音 /vju?/,類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。

Vue與Webpack安裝與使用

vue.js介紹

1、vue.js是什么?

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

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

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

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

2、Vue.js與ECMAScript

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

ECMAScript(簡稱ES)是一種規范,我們平常所說的Js/Javascript是ECMAScript的實現,早期主要應用的ES3,當前主流瀏覽器都支持ES5、ES6,ES8已于2017年發布。

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腳本架很方便去創建vue.js工程雛形。

4、vue.js有哪些功能?

聲明式渲染

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

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

條件與循環

?dom中可以使用vue.js提供的v-if、v-for等標簽,方便對數據進行判斷、循環。

雙向數據綁定

?Vue 提供v-model 指令,它可以輕松實現Dom元素和數據對象之間雙向綁定,即修改Dom元素中的值自動修改綁定的數據對象,修改數據對象的值自動修改Dom元素中的值。

處理用戶輸入

?為了讓用戶和你的應用進行交互,我們可以用方法

組件化應用構建

?指令添加一個事件監聽器,通過它調用在 Vue 實例中定義的

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

vue.js基礎

MVVM模式

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

Model:負責數據存儲

View:負責頁面展示

View Model:負責業務邏輯處理(比如Ajax請求等),對數據進行加工后交給視圖展示

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

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

Vue中的 MVVM

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

入門程序

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

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

代碼編寫步驟:

1、定義html,引入vue.js

2、定義app div,此區域作為vue的接管區域3、定義vue實例,接管app區域。

4、定義model(數據對象)

5、VM完成在app中展示數據

1. 1+1=2

實現效果:

代碼如下:

<!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接管區域中使用Vue的系統指令呈現數據這些指令就相當于是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區域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.在表單控件或者組件上創建雙向綁定,2.v-model僅能在如下元素中使用:

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

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

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

3.v-bind

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. 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>
<!‐‐只顯示偶數行‐‐>
<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等多種靜態資源 進行打包,使用webpack有什么好處呢?

模塊化開發

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

webpack可以實現按需打包,為了避免出現打包文件過大可以打包成多個文件。

編譯typescript、ES6等高級js語法

隨著前端技術的強大,開發中可以使用javascript的很多高級版本,比如:typescript、ES6等,方便開發,

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

CSS預編譯

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

webpack的缺點:

配置有些繁瑣

文檔不豐富

安裝webpack

安裝Node.js

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

為什么會有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:

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

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

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

測試

在命令提示符下輸入命令

會顯示當前node的版本

安裝NPM

1.自動安裝NPM

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

2.設置npm,淘寶鏡像

npm默認會去國外的鏡像去下載js包,在開發中通常我們使用國內鏡像,這里我們使用淘寶鏡像

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

?如果安裝成功,出現如下界面

啟動

啟動文件:

進入 webpacktest02目錄,執行npm run dev

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

雙擊 dev。

注意:dev就是在package.json中配置的webpack dev server命令。發現啟動成功自動打開瀏覽器。

修改src中的任意文件內容,自動加載并刷新瀏覽器。

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

推薦閱讀:蘋果7好還是8好

相關閱讀 read

相關圖庫hot

熱點排行

精彩圖文

下什么app可以赚钱的软件哪个好 山东十一选五推荐软件 内蒙古快3走势跨度 今日上证指数多少点 时时彩软件之家 有没有好股票推荐 北京pk赛车稳赚投注 吉林快三单双预测技巧 河南快三开奖现场直播 大智慧股票分析软件 大乐透玩法说明及中奖