今天給各位分享VUE模板的知識(shí)，其中也會(huì)對(duì)vue模板語(yǔ)法進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、vue模板，鉤子函數(shù)
• 2、Vue3基礎(chǔ)-模板語(yǔ)法
• 3、[vue3快速入門] 9.vue模板語(yǔ)法
• 4、Vue模板渲染的原理是什么
• 5、vue-cli3攜手rollup、github-actions打造自動(dòng)部署的vue組件模板（使用篇）

vue模板，鉤子函數(shù)

vue腳手架：

在vue腳手架中有一個(gè)

template 模板：

在模板里面只有一個(gè)子類，子類里面可以有其他的類

script? 腳本：

style 樣式

vue的語(yǔ)法：

當(dāng)使用{{}}的時(shí)候，里面只可以傳入文本，如果傳入標(biāo)簽也會(huì)被認(rèn)為文本；

v-html： 可以傳入標(biāo)簽，

設(shè)置屬性的時(shí)候，使用v-bind:id 可以簡(jiǎn)寫為? :id = 'id'

在html中的變量都需要在data里面進(jìn)行定義

在{{}}里面可以使用表達(dá)式

v-if 與 v-else： 如果if條件成立的話，就會(huì)顯示if里面的內(nèi)容，如果沒(méi)有成立的話，就會(huì)顯示else里面的內(nèi)容，

v-show? 條件成立就顯示內(nèi)容，條件不成立，不會(huì)顯示內(nèi)容。他會(huì)修改display屬性

vue中的鉤子函數(shù)：

一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時(shí)調(diào)用， 但是可能發(fā)生在其子 VNode 更新之前 。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

鉤子函數(shù)參數(shù)

指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：

el：指令所綁定的元素，可以用來(lái)直接操作 DOM 。

binding：一個(gè)對(duì)象，包含以下屬性：

name：指令名，不包括?v-?前綴。

value：指令的綁定值，例如：v-my-directive="1 + 1"?中，綁定值為?2。

oldValue：指令綁定的前一個(gè)值，僅在?update?和?componentUpdated?鉤子中可用。無(wú)論值是否改變都可用。

expression：字符串形式的指令表達(dá)式。例如?v-my-directive="1 + 1"?中，表達(dá)式為?"1 + 1"。

arg：傳給指令的參數(shù)，可選。例如?v-my-directive:foo?中，參數(shù)為?"foo"。

modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar?中，修飾符對(duì)象為?{ foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來(lái)了解更多詳情。

oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在?update?和?componentUpdated?鉤子中可用。

除了?el?之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。

使用vue計(jì)算屬性:

鏈接：

來(lái)源：

Vue3基礎(chǔ)-模板語(yǔ)法

如果我們希望把數(shù)據(jù)顯示到模板（template）中，使用最多的語(yǔ)法是 “Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值。

并且我們前端提到過(guò)，data返回的對(duì)象是有添加到Vue的響應(yīng)式系統(tǒng) 中，當(dāng)data中的數(shù)據(jù)發(fā)生改變時(shí)，對(duì)應(yīng)的內(nèi)容也會(huì)發(fā)生更新。

當(dāng)然，Mustache中不僅僅可以是data中的屬性，也可以是一個(gè)JavaScript的表達(dá)式：

下面這種寫法是語(yǔ)句不是表達(dá)式，所以是錯(cuò)誤的：

v-once用于指定元素或者組件只渲染一次，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，元素或者組件以及其所有的子元素將視為靜態(tài)內(nèi)容并且跳過(guò)，該指令可以用于性能優(yōu)化。

如果添加到父節(jié)點(diǎn)，那么所有的子節(jié)點(diǎn)也是只會(huì)渲染一次：

用于更新元素的 textContent，等價(jià)于"Mustache"語(yǔ)法，而且"Mustache"語(yǔ)法更靈活。

默認(rèn)情況下，如果我們展示的內(nèi)容本身是 html 的，那么vue并不會(huì)對(duì)其進(jìn)行特殊的解析。如果我們希望這個(gè)內(nèi)容被Vue可以解析出來(lái)，那么可以使用 v-html 來(lái)展示。

效果如下：

v-pre用于跳過(guò)元素和它的子元素的編譯過(guò)程，顯示原始的Mustache標(biāo)簽。

跳過(guò)不需要編譯的節(jié)點(diǎn)，加快編譯的速度。

效果如下：

這個(gè)指令保持在元素上直到關(guān)聯(lián)組件實(shí)例結(jié)束編譯。

v-cloak 和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到組件實(shí)例準(zhǔn)備完畢，主要用于解決閃動(dòng)問(wèn)題，現(xiàn)在Vue3一般不會(huì)出現(xiàn)這個(gè)問(wèn)題了。

div 不會(huì)顯示，直到編譯結(jié)束。

前面講的一系列指令，主要是將值插入到模板內(nèi)容中。但是，除了內(nèi)容需要?jiǎng)討B(tài)來(lái)決定外，某些屬性我們也希望動(dòng)態(tài)來(lái)綁定。比如動(dòng)態(tài)綁定a元素的href屬性，動(dòng)態(tài)綁定img元素的src屬性。

綁定屬性我們使用 v-bind: ，縮寫 : ，用于動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式。

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值（這個(gè)學(xué)到組件時(shí)再介紹），在開(kāi)發(fā)中，有哪些屬性需要?jiǎng)討B(tài)進(jìn)行綁定呢？還是有很多的，比如圖片的鏈接src、網(wǎng)站的鏈接href、動(dòng)態(tài)綁定一些類、樣式等等。

v-bind有一個(gè)對(duì)應(yīng)的語(yǔ)法糖，也就是簡(jiǎn)寫方式，在開(kāi)發(fā)中，我們通常會(huì)使用語(yǔ)法糖的形式，因?yàn)楦?jiǎn)潔。

注意 ：Vue2 template模板中只能有一個(gè)根元素，Vue3 template模板中允許有多個(gè)根元素。

在開(kāi)發(fā)中，有時(shí)候我們的元素class也是動(dòng)態(tài)的，比如：當(dāng)數(shù)據(jù)為某個(gè)狀態(tài)時(shí)，字體顯示紅色，當(dāng)數(shù)據(jù)另一個(gè)狀態(tài)時(shí)，字體顯示黑色。

綁定class有兩種方式：對(duì)象語(yǔ)法，數(shù)組語(yǔ)法。

① 對(duì)象語(yǔ)法：我們可以傳給 :class (v-bind:class 的簡(jiǎn)寫) 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class。

② 數(shù)組語(yǔ)法：我們可以把一個(gè)數(shù)組傳給 :class，以應(yīng)用一個(gè) class 列表；

我們可以利用v-bind:style來(lái)綁定一些CSS內(nèi)聯(lián)樣式，這是因?yàn)槟承邮轿覀冃枰鶕?jù)數(shù)據(jù)動(dòng)態(tài)來(lái)決定，比如某段文字的顏色，大小等等。

CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名。

綁定style有兩種方式：對(duì)象語(yǔ)法，數(shù)組語(yǔ)法。

① 對(duì)象語(yǔ)法：

② 數(shù)組語(yǔ)法： :style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上

在某些情況下，我們屬性的名稱可能也不是固定的。

前面我們無(wú)論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=“值” 的格式來(lái)定義，這種綁定的方式，我們稱之為動(dòng)態(tài)綁定屬性。

如果我們希望將一個(gè)對(duì)象的所有屬性，綁定到元素上的所有屬性，應(yīng)該怎么做呢？非常簡(jiǎn)單，我們可以直接使用 v-bind 綁定一個(gè)對(duì)象。

如下：info對(duì)象會(huì)被拆解成div的各個(gè)屬性。

前面我們綁定了元素的內(nèi)容和屬性，在前端開(kāi)發(fā)中另外一個(gè)非常重要的特性就是交互。

在前端開(kāi)發(fā)中，我們需要經(jīng)常和用戶進(jìn)行各種各樣的交互，這個(gè)時(shí)候，我們就必須監(jiān)聽(tīng)用戶發(fā)生的事件，比如點(diǎn)擊、拖拽、鍵盤事件等等。

在Vue中如何監(jiān)聽(tīng)事件呢？使用v-on指令。接下來(lái)我們來(lái)看一下v-on的用法：

我們可以使用v-on來(lái)監(jiān)聽(tīng)一下點(diǎn)擊的事件：

v-on:click可以寫成@click，是它的語(yǔ)法糖寫法：

當(dāng)然，我們也可以綁定其他的事件：

如果我們希望一個(gè)元素綁定多個(gè)事件，這個(gè)時(shí)候可以傳入一個(gè)對(duì)象：

當(dāng)通過(guò)methods中定義方法，以供@click調(diào)用時(shí)，需要注意參數(shù)問(wèn)題：

情況一：如果該方法不需要額外參數(shù)，那么方法后的()可以不添加，并且方法的實(shí)現(xiàn)不用參數(shù)，直接就可以打印event。

情況二：如果需要同時(shí)傳入某個(gè)參數(shù)和event時(shí)，可以通過(guò)$event傳入事件，并且方法的實(shí)現(xiàn)必須按順序?qū)懨鲄?shù)。

@keyup.enter 代表enter鍵彈起的時(shí)候會(huì)調(diào)用onEnter方法，我們一般在方法里面獲取輸入的值：

在某些情況下，我們需要根據(jù)當(dāng)前的條件決定某些元素或組件是否渲染，這個(gè)時(shí)候我們就需要進(jìn)行條件判斷了。

Vue提供了下面的指令來(lái)進(jìn)行條件判斷：

下面我們來(lái)對(duì)它們進(jìn)行學(xué)習(xí)。

v-if、v-else、v-else-if 用于根據(jù)條件來(lái)渲染某一塊的內(nèi)容，這些內(nèi)容只有在條件為true時(shí)，才會(huì)被渲染出來(lái)，這三個(gè)指令與JavaScript的條件語(yǔ)句 if、else、else if 類似。

v-if 的渲染原理：v-if是惰性的，當(dāng)條件為false時(shí)，其判斷的內(nèi)容完全不會(huì)被渲染或者會(huì)被銷毀掉，當(dāng)條件為true時(shí)，才會(huì)真正渲染條件塊中的內(nèi)容。

因?yàn)関-if是一個(gè)指令，所以必須將其添加到一個(gè)元素上，但是如果我們希望切換的是多個(gè)元素呢？

如果此時(shí)我們使用div包裹，div會(huì)被渲染到界面上來(lái)，但是我們并不希望div被渲染，這個(gè)時(shí)候，我們可以選擇使用template，template元素可以當(dāng)做不可見(jiàn)的包裹元素，并且 v-if 可以添加到 template 上，但是最終template不會(huì)被渲染出來(lái)，類似于小程序中的block。

v-show和v-if的用法看起來(lái)是一致的，也是根據(jù)一個(gè)條件決定是否顯示元素或者組件。

首先，在用法上的區(qū)別：

其次，本質(zhì)的區(qū)別：

開(kāi)發(fā)中如何進(jìn)行選擇呢？

在真實(shí)開(kāi)發(fā)中，我們往往會(huì)從服務(wù)器拿到一組數(shù)據(jù)，并且需要對(duì)其進(jìn)行渲染。這個(gè)時(shí)候我們可以使用v-for來(lái)完成，v-for類似于JavaScript的for循環(huán)，可以用于遍歷一組數(shù)據(jù)。

v-for的基本格式是 "item in 數(shù)組" ，數(shù)組通常是來(lái)自data或者prop，也可以是其他方式，item是我們給每項(xiàng)元素起的一個(gè)別名，這個(gè)別名可以自定來(lái)定義。

我們知道，在遍歷一個(gè)數(shù)組的時(shí)候會(huì)經(jīng)常需要拿到數(shù)組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數(shù)組" ，注意順序，數(shù)組元素項(xiàng)item在前面，索引項(xiàng)index在后面。

類似于v-if，你可以使用 template 元素來(lái)循環(huán)渲染一段包含多個(gè)元素的內(nèi)容。

我們使用template來(lái)對(duì)多個(gè)元素進(jìn)行包裹，而不是使用div來(lái)完成，因?yàn)閐iv會(huì)被渲染，template不會(huì)被渲染。而且如果有ul，ul里面不推薦放div，只推薦放li。

Vue 將被偵聽(tīng)的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新，這些被包裹過(guò)的方法包括：

上面的方法會(huì)直接修改原來(lái)的數(shù)組，所以視圖會(huì)跟著更新。但是某些方法不會(huì)替換原來(lái)的數(shù)組，而是會(huì)生成新的數(shù)組，比如 filter()、concat() 和 slice()，這時(shí)候我們可以通過(guò)重新賦值的方式觸發(fā)視圖更新，如下：

在使用v-for進(jìn)行列表渲染時(shí)，我們通常會(huì)給元素或者組件綁定一個(gè)key屬性。

這個(gè)key屬性有什么作用呢？

我們先來(lái)看一下官方的解釋：key屬性主要用在Vue的虛擬DOM算法，在新舊nodes對(duì)比時(shí)辨識(shí)VNodes。如果不使用key，Vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法，而使用key時(shí)，它會(huì)基于key的變化重新排列元素順序，并且會(huì)移除/銷毀key不存在的元素。

官方的解釋對(duì)于初學(xué)者來(lái)說(shuō)并不好理解，比如下面的問(wèn)題：

什么是新舊nodes，什么是VNode？

沒(méi)有key的時(shí)候，如何嘗試修改和復(fù)用的？

有key的時(shí)候，如何基于key重新排列的？

我們先來(lái)解釋一下VNode的概念：

VNode的全稱是Virtual Node，也就是虛擬節(jié)點(diǎn)。事實(shí)上，無(wú)論是組件還是元素，它們最終在Vue中表示出來(lái)的都是一個(gè)個(gè)VNode。VNode的本質(zhì)是一個(gè)JavaScript的對(duì)象。

如果我們不只是一個(gè)簡(jiǎn)單的div，而是有一大堆的元素，那么它們應(yīng)該會(huì)形成一個(gè)VNode Tree。

我們先來(lái)看一個(gè)案例：這個(gè)案例是當(dāng)我們點(diǎn)擊按鈕時(shí)會(huì)在li中間插入一個(gè)f。

我們可以確定的是，這次更新對(duì)于ul和button是不需要進(jìn)行更新，需要更新的是我們li的列表。在Vue中，對(duì)于相同父元素的子元素節(jié)點(diǎn)并不會(huì)重新渲染整個(gè)列表，因?yàn)閷?duì)于列表中 a、b、c、d它們都是沒(méi)有變化的。在操作真實(shí)DOM的時(shí)候，我們只需要在中間插入一個(gè)f的li即可。

那么Vue中對(duì)于列表的更新究竟是如何操作的呢？

Vue事實(shí)上會(huì)對(duì)于有key和沒(méi)有key會(huì)調(diào)用兩個(gè)不同的方法，有key，那么就調(diào)用 patchKeyedChildren方法，沒(méi)有key，那么就調(diào)用 patchUnkeyedChildren方法。

沒(méi)有key的diff算法：

我們會(huì)發(fā)現(xiàn)上面的diff算法效率并不高，c和d來(lái)說(shuō)它們事實(shí)上并不需要有任何的改動(dòng)，但是因?yàn)槲覀兊腸被f所使用了，所有后續(xù)所有的內(nèi)容都要一次進(jìn)行改動(dòng)，并且最后進(jìn)行新增。

有key的diff算法：

所以我們可以發(fā)現(xiàn)，Vue在進(jìn)行diff算法的時(shí)候，會(huì)盡量利用我們的key來(lái)進(jìn)行優(yōu)化操作，在沒(méi)有key的時(shí)候我們的效率是非常低效的，在進(jìn)行插入或者重置順序的時(shí)候，保持相同的key可以讓diff算法更加的高效。

[vue3快速入門] 9.vue模板語(yǔ)法

首先我們還是像上節(jié)課一樣，用vue cli的create命令新建一個(gè)項(xiàng)目，名字可以隨便起

創(chuàng)建完項(xiàng)目一樣把用不著的內(nèi)容先刪掉，保持一個(gè)最簡(jiǎn)內(nèi)容

App.vue內(nèi)容是這樣的

這節(jié)課我們講解一下vue的基本模板語(yǔ)法，也就是我們?cè)趖emplate這個(gè)標(biāo)簽里面寫的語(yǔ)法，

首先vue的模板語(yǔ)法繼承了html的語(yǔ)法，我們?cè)趖emplate里寫的也都是標(biāo)準(zhǔn)的html標(biāo)簽，只有在需要?jiǎng)討B(tài)綁定一些內(nèi)容的時(shí)候，我們才用到vue的模板語(yǔ)法，大概有一下幾種

插值的方式就是我之前用過(guò)的雙花括號(hào)的形式{{}}，一般在花括號(hào)內(nèi)就是我們綁定的vue對(duì)象的變量了

比如我們?cè)赿ata里增加一個(gè)字符串msg，

通過(guò)插值把這個(gè)字符串綁定到模板里

最后渲染出來(lái)就是

除了直接綁定一個(gè)數(shù)據(jù)，雙花括號(hào)里還既可以寫簡(jiǎn)單的js表達(dá)式

甚至還可以調(diào)用methods里的方法，比如在methods里增加一個(gè)方法

在模板里使用

最后的結(jié)果同樣是：

但是這種方式并不常用，知道就行了

在工作中有一個(gè)常見(jiàn)的需求，就是發(fā)布文章的時(shí)候，文章內(nèi)容往往是一段html字符串，我們叫做富文本

我們可以先試試用雙花括號(hào)的方式，綁定到頁(yè)面上行不行

我們看到顯示的效果是這樣的

顯然老板是不會(huì)滿意的，

這時(shí)候就需要用到一個(gè)新的綁定數(shù)據(jù)的方式v-html，

這時(shí)候我們就可以看到內(nèi)容正常顯示了

根據(jù)官網(wǎng)的定義，指令就是寫在標(biāo)簽上用v-開(kāi)頭的特殊屬性，這么說(shuō)有點(diǎn)抽象，其實(shí)我們已經(jīng)學(xué)過(guò)幾個(gè)指令了，比如v-if、v-show

還有我們剛學(xué)習(xí)的v-html

使用v-bind指令可以給一個(gè)html標(biāo)簽動(dòng)態(tài)的綁定一個(gè)屬性，比如我們之前在循環(huán)中動(dòng)態(tài)綁定的key

以后我們都簡(jiǎn)寫為一個(gè)冒號(hào):

還有綁定事件用的v-on，以后我們都簡(jiǎn)寫為@

小伙伴們現(xiàn)在掌握這些指令的用法就行，以后指令還有很多內(nèi)容，我們以后再學(xué)習(xí)。

這節(jié)課我們就到這里了，主要講解了在template模板中綁定動(dòng)態(tài)數(shù)據(jù)的集中方式，大部分之前也都用過(guò)，現(xiàn)在再鞏固一遍。

Vue模板渲染的原理是什么

vue中的模板template無(wú)法被瀏覽器解析并渲染，因?yàn)檫@不屬于瀏覽器的標(biāo)準(zhǔn)，不是正確的HTML語(yǔ)法，所有需要將template轉(zhuǎn)化成一個(gè)JavaScript函數(shù)，這樣瀏覽器就可以執(zhí)行這一個(gè)函數(shù)并渲染出對(duì)應(yīng)的HTML元素，就可以讓視圖跑起來(lái)了，這一個(gè)轉(zhuǎn)化的過(guò)程，就成為模板編譯。

模板編譯又分三個(gè)階段，解析parse，優(yōu)化optimize，生成generate，最終生成可執(zhí)行函數(shù)render。

parse階段：使用大量的正則表達(dá)式對(duì)template字符串進(jìn)行解析，將標(biāo)簽、指令、屬性等轉(zhuǎn)化為抽象語(yǔ)法樹(shù)AST。

optimize階段：遍歷AST，找到其中的一些靜態(tài)節(jié)點(diǎn)并進(jìn)行標(biāo)記，方便在頁(yè)面重渲染的時(shí)候進(jìn)行diff比較時(shí)，直接跳過(guò)這一些靜態(tài)節(jié)點(diǎn)，優(yōu)化runtime的性能。

generate階段：將最終的AST轉(zhuǎn)化為render函數(shù)字符串。

vue-cli3攜手rollup、github-actions打造自動(dòng)部署的vue組件模板（使用篇）

旨在讓開(kāi)發(fā)者在開(kāi)發(fā)時(shí)擁有

的一條龍服務(wù)。(接下來(lái)，我們攜手...)

假設(shè) 項(xiàng)目經(jīng)理提了個(gè) 需求 ：要開(kāi)發(fā)一個(gè)組件，名叫 chaste-component。

準(zhǔn)備工作

準(zhǔn)備工作完畢

打包

默認(rèn)使用package.json的name打包

構(gòu)建出了預(yù)發(fā)布文件

只需關(guān)注src文件內(nèi)的組件開(kāi)發(fā)，開(kāi)發(fā)完成就可以

發(fā)布組件了（有特殊需求配置的除外）

運(yùn)行

監(jiān)聽(tīng)src文件變動(dòng)，熱更新

新開(kāi)一個(gè)終端

運(yùn)行在8080端口， 打開(kāi)

Home 頁(yè)面

上手 頁(yè)面

頁(yè)面基礎(chǔ)內(nèi)容也是自動(dòng)生成的，只需要對(duì)docs-src/views文件的組件示例做調(diào)整

支持eslint風(fēng)格檢查及自動(dòng)格式化，在 ctrl+s 保存的時(shí)候自動(dòng)格式化，沒(méi)用過(guò)格式化的都說(shuō)直接 飛起來(lái)了

eslint風(fēng)格檢查

需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，這些都已經(jīng)做好了

自動(dòng)格式化

需要編輯器設(shè)置的支持，這里在 .vscode/settings.json 文件配置好了

2019年11月github正式開(kāi)放了github-actions，感動(dòng)！

這里我們只介紹怎么用她完成demo自動(dòng)構(gòu)建，想要更多了解的可以看看阮一峰老師的這篇文章 GitHub Actions 入門教程

添加密鑰并提交項(xiàng)目

然后提交項(xiàng)目到chaste-component倉(cāng)庫(kù)

github pages

設(shè)置source為gh-pages分支

打開(kāi) ，就進(jìn)入了demo頁(yè)面

之后 chaste-component 項(xiàng)目的每次提交都回自動(dòng)更新demo

已配置的 workflows/ci.yml 如下

下一篇博客將分享 vue-cli3攜手rollup、github-actions打造自動(dòng)部署的vue組件模板（搭建篇）

github地址 （覺(jué)得有幫助，歡迎star）

VUE模板的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue模板語(yǔ)法、VUE模板的信息別忘了在本站進(jìn)行查找喔。