Vue學習筆記

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程式

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="//cdn.jsdelivr.net/npm/[email protected]/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基礎語法學習

程式碼 demo2.html if else 語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/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="//cdn.jsdelivr.net/npm/[email protected]/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 事件綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/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 數據雙向綁定示例 實現之後當輸入框輸入相應文字 在後面提示框會輸入相同文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    數據雙向綁定示例：<input type="text" v-model="message">{{message}}
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: ""
        },
    });
</script>
</body>
</html>

第一個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="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <cqh v-for="item in items" v-bind:testComponent="item"></cqh>
</div>
<script>
    /*定義一個vue組件*/
    Vue.component("cqh", {
        props: ['testComponent'],
        template: '<li>{{testComponent}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            items: ["Java", "Linux", "前端"]
        }
    });
</script>
</body>
</html>

Axios非同步通訊(通訊框架)

 Axios是一個開源的可以用在瀏覽器端和NodeJS 的非同步通訊框架，她的主要作用就是實現AJAX非同步通訊，其功能特點如下:
●從瀏覽器中創建XMLHttpRequests
●從node.js創建http請求
●支援Promise API [JS中鏈式編程]
●攔截請求和響應
●轉換請求數據和響應數據
●取消請求
●自動轉換JSON數據
●客戶端支援防禦XSRF (跨站請求偽造)
GitHub: //github.com/ axios/axios
中文文檔: //www.axios-js.com/

為什麼要使用Axios
由於Vue.js是一個視圖層框架且作者(尤雨溪) 嚴格准守SoC (關注度分離原則)，所以Vue.js並不包含AJAX的通訊功能，為了解決通訊問題，作者單獨開發了一個名為vue-resource的插件，不過在進入2.0 版本以後停止了對該插件的維護並推薦了Axios 框架。少用jQuery，因為它操作Dom太頻繁!

Vue的生命周期
官方文檔: //cn.vuejs.org/v2/guide/instance.html#生 命周期圖示
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時註冊JS方法,可以讓我們用自己註冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。

程式碼 初探axios
先建立一個data.json

{
  "name": "小峰仔",
  "age": 18,
  "sex": "男",
  "hobby": "籃球",
  "address": {
    "street": "徐家溝",
    "city": "邯鄲",
    "country": "中國"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "//baidu.com"
    },
    {
      "name": "百度",
      "url": "//baidu.com"
    }
  ]
}

demo07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在線CDN-->
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <!--導入axios-->
    <script src="//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: 不同 屬性：vm
        data() {
            return {
                info: {
                    name:null,
                    url:null,
                },
            }
        },
        mounted() {
            //鉤子函數 鏈式編程 ES6新特性
            axios.get("../data.json").then(response => (this.info=response.data));
        }
    });
</script>
</body>
</html>

什麼是計算屬性？（VUE相比Angular和React的特性）

 計算屬性的重點突出在屬性兩個字上(屬性是名詞)，首先它是個屬性其次這個屬性有計算的能力(計算是動詞)，這裡的計算就是個函數;簡單點說，它就是一個能夠將計算結果快取起來的屬性(將行為轉化成了靜態的屬性)，僅此而已;可以想像為快取!
程式碼 demo08.html 計算屬性了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在線CDN-->
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>c1:{{getTime()}}</p>
    <p>c2:{{getTime2()}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "hello cqh"
        },
        methods: {
            getTime: function () {
                return Date.now();
            }
        },
        //計算屬性
        computed: {
            getTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

結論:
 調用方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果快取起來，採用計算屬性可以很方便的做到這一點,計算屬性的主要特性就是為了將不經常變化的計算結果進行快取，以節約我們的系統開銷;

內容分發

 在Vue.js中我們使用 元素作為承載分發內容的出口，作者稱其為插槽，可以應用在組合組件的場景中;
這裡穿插以下vue的語法縮寫
v:bind: 可以縮寫為一個:
v-on: 可以縮寫為一個@
程式碼demo9 插槽初體驗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/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 in todoItems" v-bind:item="item"></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'],
        template: '<li>{{item}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //標題
            title: "圖書館系列圖書",
            //列表
            todoItems: ['三國演義', '紅樓夢', '西遊記', '水滸傳']
        }
    });
</script>
</body>
</html>

自定義事件

 通過以上程式碼不難發現，數據項在Vue的實例中，但刪除操作要在組件中完成，那麼組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了，Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題;使用this.$emit(『自定義事件名』,參數)

 

 

 程式碼 demo09-1 自定義組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.導入vue.js-->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/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>

vue-cli

 vue-cli 官方提供的一個腳手架,用於快速生成一個 vue 的項目模板;
 預先定義好的目錄結構及基礎程式碼，就好比咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架,我們的開發更加的快速;
主要的功能:
 統一的目錄結構
 本地調試
 熱部署
 單元測試
 集成打包上線
需要的環境
Node.js : //nodejs.cn/download/
安裝就無腦下一步就好,安裝在自己的環境目錄下
Git : //git-scm.com/downloads
鏡像://npm.taobao.org/mirrors/git-for-windows/
確認nodejs安裝成功:
cmd 下輸入 node -v,查看是否能夠正確列印出版本號即可!
cmd 下輸入 npm-v,查看是否能夠正確列印出版本號即可!
這個npm,就是一個軟體包管理工具,就和linux下的apt軟體安裝差不多!
安裝 Node.js 淘寶鏡像加速器（cnpm）
這樣子的話,下載會快很多~
在命令台輸入

# -g 就是全局安裝
npm install cnpm -g
# 或使用如下語句解決 npm 速度慢的問題
npm install --registry=//registry.npm.taobao.org

安裝 vue-cli

#在命令台輸入
cnpm install vue-cli -g
#查看是否安裝成功
vue list

第一個 vue-cli 應用程式

 創建一個Vue項目,我們隨便建立一個空的文件夾在電腦上,我這裡在D盤下新建一個目錄D:\Project\vue-study;
 創建一個基於 webpack 模板的 vue 應用程式

# 這裡的 myvue 是項目名稱，可以根據自己的需求起名
vue init webpack myvue

一路都選擇no即可;
初始化並運行

cd myvue
npm install
npm run dev

 

 

 

Webpack

 WebPack 是一款模組載入器兼打包工具，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖片等都作為模組來處理和使用。

npm install webpack -g
npm install webpack-cli -g

測試安裝成功: 輸入以下命令有版本號輸出即為安裝成功

webpack -v
webpack-cli -v

什麼是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程式碼，這給前端的開發流程和資源組織帶來了巨大挑戰。
 前端開發和其他開發工作的主要區別，首先是前端基於多語言、多層次的編碼和組織工作，其次前端產品的交付是基於瀏覽器的，這些資源是通過增量載入的方式運行到瀏覽器端，如何在開發環境組織好這些碎片化的程式碼和資源，並且保證他們在瀏覽器端快速、優雅的載入和更新，就需要一個模組化系統，這個理想中的模組化系統是前端工程師多年來一直探索的難題。

webpack demo

1.先創建一個包 交由idea打開 會生成一個.idea文件 那麼就說明該文件就交由idea負責
2.在idea中創建modules包，再創建hello.js
hello.js 暴露介面 相當於Java中的類

exports.sayHi = function () {
    document.write("<h1>hello world</h1>")
}

3.創建main.js 當作是js主入口
main.js 請求hello.js 調用sayHi()方法

let hello=require("./hello");
hello.sayHi()

4.在主目錄創建webpack-config.js
webpack-config.js 這個相當於webpack的配置文件 enrty請求main.js的文件 output是輸出的位置和名字

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
};

5.在idea命令台輸入webpack命令（idea要設置管理員啟動）

6.完成上述操作之後會在主目錄生成一個dist文件 生成的js文件夾路徑為/dist/js/bundle.js

7.在主目錄創建index.html 導入bundle.js
index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>

vue-router

 Vue Router是Vue.js官方的路由管理器（路徑跳轉）。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有:

嵌套的路由/視圖表
模組化的、基於組件的路由配置
路由參數、查詢、通配符
基於Vue.js過渡系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的CSS class的鏈接
HTML5歷史模式或hash模式，在IE9中自動降級
自定義的滾動條行為
安裝
 基於第一個vue-cli進行測試學習;先查看node_modules中是否存在 vue-router
 vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。

npm install vue-router --save-dev

安裝完之後去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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app">
</div>
</body>
</html>

main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false

new 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>

在components目錄下創建一個自己的組件Content,Test,Main(這兩個和Content內容一樣的就不放示例程式碼了)
Content.vue

<template>
  <div><h1>內容</h1>
  </div>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!--scoped ：style作用域-->
<style scoped>
</style>

安裝路由,在src目錄下,新建一個文件夾 : router,專門存放路由
index.js(默認配置文件都是這個名字)

/**
 * vue router的配置
 */
//導入vue和vu-router
import Vue from 'vue'
import VueRouter from 'vue-router';
//導入組件
import Content from "../components/Content";
import Main from "../components/Main";
import Test from "../components/Test";
//安裝路由
Vue.use(VueRouter)

//配置導出路由
export default new VueRouter({
  routes: [
    //Content組件
    {
      //  路由的路徑
      path: '/content',
      name: 'content',
      //  跳轉的組件
      component: Content
    },
    //Main組件
    {
      //  路由的路徑
      path: '/main',
      name: 'main',
      //  跳轉的組件
      component: Main
    },
    //Test組件
    {
      //  路由的路徑
      path: '/test',
      name: 'test',
      //  跳轉的組件
      component: Test
    }
  ]
});

在main.js中配置路由
main.js

import Vue from 'vue'
import App from './App'
//自動掃描裡面的路由配置
import router from "./router";

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: {App},
  template: '<App/>'
})

在App.vue中使用路由
App.vue

<template>
  <div id="app">
    <h1>vue-router</h1>
    <!--a標籤 to就是href屬性-->
    <router-link to="/main">首頁</router-link>
    <router-link to="/content">內容頁</router-link>
    <router-link to="/test">測試頁</router-link>
    <!—這個標籤就是用來展示視圖-->
    <router-view></router-view>
  </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>

啟動測試一下 ： npm run dev

Tags:

VirMach 便宜 VPS

QNews

QNews