Vue與Webpack安裝與使用

首頁>技術>小白沖沖沖沖2019-11-21 01:50

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}

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

實現效果：

程式碼如下：

一、v-model：

1.在表單控制元件或者元件上建立雙向繫結，2.v-model僅能在如下元素中使用：

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

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

3.v-bind

1、作用：v‐bind可以將資料物件繫結在dom的任意屬性中。v‐bind可以給dom物件繫結一個或多個特性，例如動態繫結style和class2、舉例：&lt;img v‐bind:src=&#34;imagesrc&#34;&gt;&lt;div v‐bind:style=&#34;{ fontSize: size + &#39;px&#39; }&#34;&gt;&lt;/div&gt;3、縮寫形式&lt;img :src=&#34;imagesrc&#34;&gt;&lt;div :style=&#34;{ fontSize: size + &#39;px&#39; }&#34;&gt;&lt;/div&gt;

2. v-if和v-for

&lt;!DOCTYPE html&gt;&lt;html lang=&#34;en&#34;&gt;&lt;head&gt; &lt;meta charset=&#34;UTF‐8&#34;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src=&#34;/js/vue/vue.min.js&#34;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&#34;app&#34;&gt; &lt;ul&gt; &lt;!‐‐只顯示偶數行‐‐&gt; &lt;li v‐for=&#34;(item,index) in list&#34; :key=&#34;index&#34; v‐if=&#34;index % 2==0&#34;&gt;{{index}}‐{{item}} &lt;/li&gt; &lt;li v‐for =&#34;(value,key) in user&#34;&gt;{{key}}‐{{value}}&lt;/li&gt; &lt;li v‐for=&#34;(item,index) in userlist&#34; :key=&#34;item.user.uname&#34;&gt; &lt;div v‐if=&#34;item.user.uname==&#39;heima&#39;&#34; style=&#34;background: chartreuse&#34;&gt;&lt;!‐‐名稱為heima的加背景色‐‐&gt; {{index}}‐{{item.user.uname}}‐{{item.user.age}} &lt;/div&gt; &lt;div v‐else=&#34;&#34;&gt; {{index}}‐{{item.user.uname}}‐{{item.user.age}} &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;script&gt; new Vue({ el:&#39;#app&#39;, data:{ list:[1,2,3,4,4], user:{uname:&#39;itcast&#39;,age:10}, userlist:[ { user:{uname:&#39;itcast&#39;,age:10}}, { user:{uname:&#39;heima&#39;,age:11}} ] } });&lt;/script&gt;&lt;/html&gt;

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

179

劇多

Vue與Webpack安裝與使用

虛擬機器

HTML

指令碼語言

程式設計師

ECMAScript

相關內容