Vue(笔记）
所有東西必須都在標簽里面進行定義，都在div中
報錯后不斷npm和cnpm
Vue簡介
Vue (讀音/vju/, 類似于view)是一套用于構建用戶界面的漸進式框架，發布于2014年2月。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫(如: vue-router: 跳轉，vue-resource: 通信，vuex:管理)或既有項目整合。
前端知識體系
想要成為真正的“互聯網Java全棧工程師”還有很長的一段路要走，其中“我大前端”是繞不開的一門必修課。本階段課程的主要目的就是帶領我Java后臺程序員認識前端、了解前端、掌握前端,為實現成為“互聯網Java全棧工程師”再向前邁進一步。
前端三要素
●HTML (結構) :超文本標記語言(Hyper Text Markup Language) ，決定網頁的結構和內容
●CSS (表現) :層疊樣式表(Cascading Style sheets) ，設定網頁的表現樣式
●JavaScript (行為) :是一種弱類型腳本語言，其源代碼不需經過編譯，而是由瀏覽器解釋運行,用于控制網頁的行為
結構層（HTML）
略
表現層（CSS）
CSS層疊樣式表是一門標記語言,并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下:
●語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要寫很多重復的選擇器;
●沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護;
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為[CSS預處理器]的工具，提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了前端在樣式上的開發效率。（例如頁面在不同的時候有不同的需求，淘寶在雙11和618的樣式就會不一樣）
CSS預處理器
CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件,然后開發者就只要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言,進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用”
常用的CSS預處理器有哪些
●SASS:基于Ruby,通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高于LESS。
●LESS:基于NodeJS,通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低于SASS,但在實際開發中足夠了，所以我們后臺人員如果需要的話，建議使用LESS。
行為層（JavaScript）
JavaScript一門弱類型腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。
?Native原生JS開發
?原生JS開發，也就是讓我們按照[ECMAScript] 標準的開發方式，簡稱是ES,特點是所有瀏覽器都支持。截止到當前博客發布時間，ES 標準已發布如下版本:
●ES3
●ES4 (內部,未征式發布)
●ES5 (全瀏覽器支持)
●ES6 (常用，當前主流版本: webpack打包成為ES5支持! )
●ES7
●ES8
●ES9 (草案階段)
區別就是逐步增加新特性。
TypeScript
TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。由安德斯海爾斯伯格(C#、Delphi、TypeScript 之父; .NET 創立者)主導。
?該語言的特點就是除了具備ES的特性之外還納入了許多不在標準范圍內的新特性，所以會導致很多瀏覽器不能直接支持TypeScript語法，需要編譯后(編譯成JS)才能被瀏覽器正確執行。
JavaScript框架
●jQuery: 大家熟知的JavaScript框架，優點是簡化了DOM操作，缺點是DOM操作太頻繁,影響前端性能;在前端眼里使用它僅僅是為了兼容IE6、7、8;
●Angular: Google收購的前端框架，由一群Java程序員開發，其特點是將后臺的MVC模式搬到了前端并增加了模塊化開發的理念，與微軟合作，采用TypeScript語法開發;對后臺程序員友好，對前端程序員不太友好;最大的缺點是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是兩個東西;截止發表博客時已推出了Angular6)
●React: Facebook出品，一款高性能的JS前端框架;特點是提出了新概念[虛擬DOM]用于
減少真實DOM操作，在內存中模擬DOM操作，有效的提升了前端渲染效率;缺點是使用復
雜，因為需要額外學習一門[JSX] 語言;
●Vue:一款漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了Angular (模塊化)和React (虛擬DOM)的優點;
●Axios :前端通信框架;因為Vue 的邊界很明確，就是為了處理DOM,所以并不具備通信能
力，此時就需要額外使用一個通信框架與服務器交互;當然也可以直接選擇使用jQuery提供的AJAX通信功能;
前端三大框架：Angular、React、Vue
UI框架
●Ant-Design:阿里巴巴出品，基于React的UI框架
●ElementUI、 iview、 ice: 餓了么出品，基于Vue的UI框架
●Bootstrap: Twitter推出的一個用于前端開發的開源工具包
●AmazeUI:又叫"妹子UI"，一款HTML5跨屏前端框架.
JavaScript 構建工具
●Babel: JS編譯工具，主要用于瀏覽器不支持的ES新特性，比如用于編譯TypeScript
●WebPack: 模塊打包器，主要作用是打包、壓縮、合并及按序加載
注：以上知識點將WebApp開發所需技能全部梳理完畢
三端合一
混合開發（Hybid App）
主要目的是實現一套代碼三端統一(PC、Android:.apk、iOS:.ipa )并能備夠調用到底層件(如:傳感器、GPS、 攝像頭等)，打包方式主要有以下兩種:
●云打包: HBuild -> HBuildX， DCloud出品; API Cloud
●本地打包: Cordova (前身是PhoneGap)
后端技術
?前端人員為了方便開發也需要掌握一定的后端技術， 但我們Java后臺人員知道后臺知識體系極其龐大復雜，所以為了方便前端人員開發后臺應用，就出現了NodeJS這樣的技術。
?NodeJS的作者已經聲稱放棄NodeJS (說是架構做的不好再加上笨重的node_ modules，可能讓作者不爽了吧)，開始開發全新架構的Deno
既然是后臺技術，那肯定也需要框架和項目管理工具，NodeJS 框架及項目管理工具如下:
●Express: NodeJS框架
●Koa: Express簡化版
●NPM:項目綜合管理工具，類似于Maven
●YARN: NPM的替代方案，類似于Maven和Gradle的關系
第一個Vue程序
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mW9P7XbX-1609930142519)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105150648118.png)]
Vue
Vue (讀音/vju/, 類似于view)是一套用于構建用戶界面的漸進式框架，發布于2014年2月。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫(如: vue-router, vue-resource, vuex)或既有項目整合。
MVVM模式的實現者●Model:模型層，在這里表示JavaScript對象
●View:視圖層,在這里表示DOM (HTML操作的元素)
●ViewModel:連接視圖和數據的中間件，Vue.js就是MVVM中的ViewModel層的實現者
在MVVM架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信，而
ViewModel就是定義了一個Observer觀察者
●ViewModel能夠觀察到數據的變化，并對視圖對應的內容進行更新
●ViewModel能夠監聽到視圖的變化，并能夠通知數據發生改變
至此，我們就明白了，Vue.js 就是一個MVVM的實現者，他的核心就是實現了DOM監聽與數據綁定
為什么要使用Vue.js
●輕量級，體積小是一個重要指標。Vue.js 壓縮后有只有20多kb (Angular 壓縮后56kb+ ,
React壓縮后44kb+ )
●移動優先。更適合移動端，比如移動端的Touch事件
●易上手，學習曲線平穩,文檔齊全
●吸取了Angular (模塊化)和React (虛擬DOM)的長處，并擁有自己獨特的功能，如:計算屬性
●開源，社區活躍度高
代碼 demo1.html 初入門之綁定數據
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app">{{message}} </div> <script>let vm = new Vue({el: "#app",data: {message: "hello,vue"}}); </script> </body> </html>MVVM
MVVM (Model-View-ViewModel) 是一種軟件架構設計模式，由微軟WPF (用于替代
WinForm，以前就是用這個技術開發桌面應用程序的)和Silverlight (類似于Java Applet,簡單點說就是在瀏覽器上運行的WPF)的架構師Ken Cooper和Ted Peters 開發，是一種簡化用戶界面的事件驅動編程方式。由John Gossman (同樣也是WPF和Silverlight的架構師)于2005年在他的博客上發表。
MVVM源自于經典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel
層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用，其作用如下:
●該層向上與視圖層進行雙向數據綁定
●向下與Model層通過接口請求進行數據交互
圖1 MVVM圖解
為什么要使用MVVM
MVVM模式和MVC模式一樣，主要目的是分離視圖(View)**和**模型(Model),有幾大好處
●低耦合:視圖(View)可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的
View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
●可復用:你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯。
●獨立開發:開發人員可以專注于業務邏輯和數據的開發(ViewModel),設計人員可以專注于頁面設計。
●可測試:界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。
VUE基礎語法
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IsBxZViS-1609930142523)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105173247032.png)]
代碼 demo2.html if else 語法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1> </div> <script>let vm = new Vue({el: "#app",data: {ok: true}}); </script> </body> </html>代碼 demo03.html for循環獲取數據
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><div id="app"><li v-for="text in allTexts">{{text.message}}</li> </div> <script>let vm = new Vue({el: "#app",data: {allTexts: [{message: "1"},{message: "2"},{message: "3"},]}}); </script> </body> </html>代碼demo04 事件綁定
methods
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"><button v-on:click="sayHi()">點我</button> </div> <script>let vm = new Vue({el: "#app",data: {message: "cqh"},methods: {sayHi: function () {alert(this.message);}}}); </script> </body> </html>雙向數據綁定
Vue.js是一個MVVM框架，即數據雙向綁定,即當數據發生變化的時候,視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化。這也算是Vue.js的精髓之處了。
?值得注意的是，我們所說的數據雙向綁定，一定是對于UI控件來說的，非UI控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突。
為什么要實現數據的雙向綁定
在Vue.js 中，如果使用vuex ，實際上數據還是單向的，之所以說是數據雙向綁定，這是用的UI控件來說，對于我們處理表單，Vue.js的雙向數據綁定用起來就特別舒服了。即兩者并不互斥，在全局性數據流使用單項,方便跟蹤;局部性數據流使用雙向，簡單易操作。
在表單中使用雙向數據綁定
你可以用v-model 指令在表單 、 及 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model本質上不過是語法糖。它負責監聽戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。
代碼 demo05 數據雙向綁定示例 實現之后當輸入框輸入相應文字 在后面提示框會輸入相同文字
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZvVgSdYi-1609930142525)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105185055994.png)]
第一個Vue組件
什么是組件
組件是可復用的Vue實例，說白了就是一組可以重復使用的模板，跟JSTL的自定義標簽、Thymeleaf的th:fragment 等框架有著異曲同工之妙。通常一個應用會以一棵嵌套的組件樹的形式來組織:
?注意:在實際開發中，我們并不會用以下方式開發組件，而是采用vue-cli創建.vue模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。
Vue.component()方法注冊組件
圖2 組件樹
代碼 組件練習 demo06
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><div id="app"><cqh v-for="item in items" v-bind:item="item"></cqh> </div><script>/*定義一個vue組件*/Vue.component("cqh", {props: ['item'],template: '<li>{{item}}</li>'});var vm = new Vue({el: "#app",data: {items: ["Java", "Linux", "前端"]}}); </script></body> </html>Axios異步通信(通信框架)
<!--導入axios--> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>Axios是一個開源的可以用在瀏覽器端和NodeJS 的異步通信框架，她的主要作用就是實現AJAX異步通信，其功能特點如下:
●從瀏覽器中創建XMLHttpRequests
●從node.js創建http請求
●支持Promise API [JS中鏈式編程]
●攔截請求和響應
●轉換請求數據和響應數據
●取消請求
●自動轉換JSON數據
●客戶端支持防御XSRF (跨站請求偽造)
GitHub: https://github.com/ axios/axios
中文文檔: http://www.axios-js.com/
為什么要使用Axios
由于Vue.js是一個視圖層框架且作者(尤雨溪) 嚴格準守SoC (關注度分離原則)，所以Vue.js并不包含AJAX的通信功能，為了解決通信問題，作者單獨開發了一個名為vue-resource的插件，不過在進入2.0 版本以后停止了對該插件的維護并推薦了Axios 框架。少用jQuery，因為它操作Dom太頻繁!
Vue的生命周期
官方文檔: https://cn.vuejs.org/v2/guide/instance.html#生 命周期圖示
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法,可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。
代碼 初探axios
先建立一個data.json
demo07.html
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Y65Jik3b-1609930142528)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105210825401.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--在線CDN--><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><!--導入axios--><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script></head> <body> <div id="app"><div>{{info.name}}</div><a v-bind:href="info.url">點我到百度鏈接</a> </div> <script>let vm = new Vue({el: "#app",//和data: 不同 屬性：vmdata() {return {info: {name:null,url:null,},}},mounted() {//鉤子函數 鏈式編程 ES6新特性axios.get("../data.json").then(response => (this.info=response.data));}}); </script> </body> </html>計算屬性
計算屬性的重點突出在屬性兩個字上(屬性是名詞)，首先它是個屬性其次這個屬性有計算的能力(計算是動詞)，這里的計算就是個函數;簡單點說，它就是一個能夠將計算結果緩存起來的屬性(將行為轉化成了靜態的屬性)，僅此而已;可以想象為緩存!
代碼 demo08.html 計算屬性了解
結論:
?調用方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果緩存起來，采用計算屬性可以很方便的做到這一點,計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷;
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7yKFmTXu-1609930142531)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105215342368.png)]
插槽slot
在Vue.js中我們使用 元素作為承載分發內容的出口，作者稱其為插槽，可以應用在組合組件的場景中;
這里穿插以下vue的語法縮寫
v:bind: 可以縮寫為一個:
v-on: 可以縮寫為一個@
代碼demo9 插槽初體驗
自定義事件（this.$emit）
通過以上代碼不難發現，數據項在Vue的實例中，但刪除操作要在組件中完成，那么組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了，Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題;使用this.$emit(‘自定義事件名’,參數)
圖 自定義事件圖解
代碼 demo09-1 自定義組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items"v-for="(item,i) in todoItems"v-bind:item="item" v-bind:index="i"v-on:remove="removeItem(i)"></todo-items></todo> </div> <script>//slot 插槽 這個組件要定義在前面不然出不來數據Vue.component("todo", {template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\<div>'});Vue.component("todo-title", {//屬性props: ['title'],template: '<div>{{title}}</div>'});Vue.component("todo-items", {props: ['item', 'index'],template: '<li>{{index}}-{{item}}<button style="margin: 5px" @click="remove">刪除</button></li>',methods: {remove: function (index) {// this.$emit('事件',參數) 自定義事件分發（遠程調用方法）this.$emit('remove', index)}},});let vm = new Vue({el: "#app",data: {//標題title: "圖書館系列圖書",//列表todoItems: ['三國演義', '紅樓夢', '西游記', '水滸傳']},methods: {removeItem: function (index) {// 一次刪除一個元素this.todoItems.splice(index, 1)console.log("刪除了" + this.todoItems[index] + "OK")}},}); </script> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6a89LWAo-1609930142532)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105225524114.png)]
vue-cli（類似Maven）
vue-cli 官方提供的一個腳手架,用于快速生成一個 vue 的項目模板;
?預先定義好的目錄結構及基礎代碼，就好比咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架,我們的開發更加的快速;
主要的功能:
? 統一的目錄結構
? 本地調試
? 熱部署
? 單元測試
? 集成打包上線
需要的環境
Node.js : http://nodejs.cn/download/
安裝就無腦下一步就好,安裝在自己的環境目錄下
Git : https://git-scm.com/downloads
鏡像:https://npm.taobao.org/mirrors/git-for-windows/
確認nodejs安裝成功
cmd 下輸入 node -v,查看是否能夠正確打印出版本號即可!
cmd 下輸入 npm-v,查看是否能夠正確打印出版本號即可!
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DDztvLXY-1609930142534)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105234758545.png)]
這個npm,就是一個軟件包管理工具,就和linux下的apt軟件安裝差不多!
安裝 Node.js 淘寶鏡像加速器（cnpm）
這樣子的話,下載會快很多~
淘寶鏡像加速器（cnpm）
在命令臺輸入
# -g 就是全局安裝npm install -g cnpm --registry=https://registry.npm.taobao.org npm install cnpm -g # 或使用如下語句解決 npm 速度慢的問題 npm install --registry=https://registry.npm.taobao.org狂神老師用的是npm 我用的是cnpm npm用的應該是外網 所以沒有條件的同學就用cnpm
安裝的位置:C:\Users\Administrator\AppData\Roaming\npm
圖 安裝的npm地址
安裝 vue-cli
#在命令臺輸入 cnpm install vue-cli -g #查看是否安裝成功 vue list第一個 vue-cli 應用程序
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-464dZG5v-1609930142535)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106095558551.png)]
創建一個Vue項目,我們隨便建立一個空的文件夾在電腦上,我這里在D盤下新建一個目錄D:\Project\vue-study;
?創建一個基于 webpack 模板的 vue 應用程序
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-s23zkMYN-1609930142536)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106003044012.png)]
一路都選擇no即可;
初始化并運行
執行完成后,目錄多了很多依賴
圖 依賴存放的位置
圖 輸入npm run dev 后 進入localhost:8080
圖 效果圖
以管理員身份運行ij
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2fnErAte-1609930142539)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106112250749.png)]
改變端口
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lPeiWedn-1609930142541)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106113654777.png)]
Webpack（es6->es5）
WebPack 是一款模塊加載器兼打包工具，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖片等都作為模塊來處理和使用。
npm install webpack -g npm install webpack-cli -g測試安裝成功: 輸入以下命令有版本號輸出即為安裝成功
webpack -v webpack-cli -v[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-erJADgqh-1609930142542)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106121415213.png)]
什么是Webpack
本質上，webpack是一個現代JavaScript應用程序的靜態模塊打包器(module bundler)。當webpack處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個bundle.
?Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將許多松散耦合的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分離，等到實際需要時再異步加載。通過loader轉換，任何形式的資源都可以當做模塊，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
?伴隨著移動互聯網的大潮，當今越來越多的網站已經從網頁模式進化到了WebApp模式。它們運行在現代瀏覽器里，使用HTML5、CSS3、ES6 等新的技術來開發豐富的功能，網頁已經不僅僅是完成瀏覽器的基本需求; WebApp通常是一個SPA (單頁面應用) ，每一個視圖通過異步的方式加載，這導致頁面初始化和使用過程中會加載越來越多的JS代碼，這給前端的開發流程和資源組織帶來了巨大挑戰。
?前端開發和其他開發工作的主要區別，首先是前端基于多語言、多層次的編碼和組織工作，其次前端產品的交付是基于瀏覽器的，這些資源是通過增量加載的方式運行到瀏覽器端，如何在開發環境組織好這些碎片化的代碼和資源，并且保證他們在瀏覽器端快速、優雅的加載和更新，就需要一個模塊化系統，這個理想中的模塊化系統是前端工程師多年來一直探索的難題。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SNXXVM1Z-1609930142544)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106121442001.png)]
webpack demo
hello.js 暴露接口 相當于Java中的類
main.js 請求hello.js 調用sayHi()方法
webpack-config.js 這個相當于webpack的配置文件 enrty請求main.js的文件 output是輸出的位置和名字
圖 webpack命令效果
index.html
圖 webpack demo示例圖
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mnNwnhbE-1609930142545)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106130327672.png)]
vue-router
Vue Router是Vue.js官方的路由管理器（路徑跳轉）。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有:
安裝vue-router
基于第一個vue-cli進行測試學習;先查看node_modules中是否存在 vue-router
?vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。
安裝完之后去node_modules路徑看看是否有vue-router信息 有的話則表明安裝成功
vue-router demo
1． 將之前案例由vue-cli生成的案例用idea打開
2． 清理不用的東西 assert下的logo圖片 component定義的helloworld組件 我們用自己定義的組件
3． 清理代碼 以下為清理之后的代碼 src下的App.vue 和main.js以及根目錄的index.html
這三個文件的關系是 index.html 調用 main.js 調用 App.vue
index.html
main.js
import Vue from 'vue' import App from './App' Vue.config.productionTip = falsenew Vue({el: '#app',components: {App},template: '<App/>' })App.vue
<template><div id="app"></div> </template><script>export default {name: 'App',} </script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;} </style>4． 在components目錄下創建一個自己的組件Content,Test,Main(這兩個和Content內容一樣的就不放示例代碼了)
Content.vue
5． 安裝路由,在src目錄下,新建一個文件夾 : router,專門存放路由
index.js(默認配置文件都是這個名字)
6． 在main.js中配置路由
main.js
7． 在App.vue中使用路由
App.vue
8． 啟動測試一下 ： npm run dev
9． 效果圖如下
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-v94G15t2-1609930142546)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106141248026.png)]
圖 vue-router效果圖
vue+elementUI實戰
根據之前創建vue-cli項目一樣再來一遍 創建項目
1． 創建一個名為 hello-vue 的工程 vue init webpack hello-vue
2． 安裝依賴，我們需要安裝 vue-router、element-ui、sass-loader 和 node-sass 四個插件
3． 創建成功后用idea打開，并刪除凈東西 創建views和router文件夾用來存放視圖和路由
圖 整體目錄結構
4． 在views創建Main.vue
Main.vue
5． 在views中創建Login.vue視圖組件
Login.vue（用的餓了么UI中的代碼）
6． 創建路由,在 router 目錄下創建一個名為 index.js 的 vue-router 路由配置文件
index.js
7． 在main.js中配置相關
main.js是index.html調用的 所以基本上所有東西都導出到這
一定不要忘記掃描路由配置并將其用到new Vue中
8． 在App.vue中配置顯示視圖
App.vue
9． 最后效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SKr67zGQ-1609930142548)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210106152119141.png)]
圖 vue+elementUI實戰效果圖
測試：在瀏覽器打開 http://localhost:8080/#/login
sass-loader的版本過高
如果出現錯誤: 可能是因為sass-loader的版本過高導致的編譯錯誤，當前最高版本是8.0.2，需要退回到7.3.1 ；
去package.json文件里面的 "sass-loader"的版本更換成7.3.1，然后重新cnpm install就可以了；
路由嵌套
嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件組合而成。
demo
1、 創建用戶信息組件，在 views/user 目錄下創建一個名為 Profile.vue 的視圖組件；
Profile.vue
2、在用戶列表組件在 views/user 目錄下創建一個名為 List.vue 的視圖組件；
List.vue
3、 修改首頁視圖，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件，代碼如下：
Main.vue
4、 配置嵌套路由修改 router 目錄下的 index.js 路由配置文件，使用children放入main中寫入子模塊，代碼如下
index.js
5、 路由嵌套實戰效果圖
圖 路由嵌套效果圖
參數傳遞
這里演示如果請求帶有參數該怎么傳遞
demo
?用的還是上述例子的代碼 修改一些代碼 這里不放重復的代碼了
第一種取值方式
1、 修改路由配置, 主要是router下的index.js中的 path 屬性中增加了 :id 這樣的占位符
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile }2、傳遞參數
?此時我們在Main.vue中的route-link位置處 to 改為了 :to，是為了將這一屬性當成對象使用，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應的路由路徑；
3、在要展示的組件Profile.vue中接收參數 使用 {{$route.params.id}}來接收
Profile.vue 部分代碼
第二種取值方式 （props ）
使用props 減少耦合
1、修改路由配置 , 主要在router下的index.js中的路由屬性中增加了 props: true 屬性
2、傳遞參數和之前一樣 在Main.vue中修改route-link地址
<!--name是組件的名字 params是傳的參數 如果要傳參數的話就需要用v:bind:來綁定--> <router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>3、在Profile.vue接收參數為目標組件增加 props 屬性
Profile.vue
圖 傳參效果圖
組件重定向
重定向的意思大家都明白，但 Vue 中的重定向是作用在路徑不同但組件相同的情況下，比如：
在router下面index.js的配置
說明：這里定義了兩個路徑，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件；
使用的話，只需要在Main.vue設置對應路徑即可；
<el-menu-item index="1-3"><router-link to="/goHome">回到首頁</router-link> </el-menu-item>路由模式與 404
路由模式有兩種
- hash：路徑帶 # 符號，如 http://localhost/#/login
- history：路徑不帶 # 符號，如 http://localhost/login
修改路由配置，代碼如下：
export default new Router({mode: 'history',routes: [] });404 demo
1.創建一個NotFound.vue視圖組件
NotFound.vue
2.修改路由配置index.js
import NotFound from '../views/NotFound' {path: '*',component: NotFound }3.效果圖
圖 404效果圖
路由鉤子與異步請求
beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在離開路由前執行
在Profile.vue中寫
export default {name: "UserProfile",beforeRouteEnter: (to, from, next) => {console.log("準備進入個人信息頁");next();},beforeRouteLeave: (to, from, next) => {console.log("準備離開個人信息頁");next();}}參數說明：
to：路由將要跳轉的路徑信息
from：路徑跳轉前的路徑信息
next：路由的控制參數
next() 跳入下一個頁面
next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
在鉤子函數中使用異步請求
1、安裝 Axios
cnpm install --save vue-axios2、main.js引用 Axios
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)3、準備數據 ： 只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。
數據和之前用的json數據一樣 需要的去上述axios例子里
4.在 beforeRouteEnter 中進行異步請求
Profile.vue
5.路由鉤子和axios結合圖
圖 效果圖
總結
- 上一篇： 联想笔记本电脑我不想更新了该怎么设置？
- 下一篇： vue项目没有启动成功的原因之一