iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

超緊繃!30天Vue.js學習日記系列 第 21

[特別篇][日記]學會它,開發更簡單!(2)

https://ithelp.ithome.com.tw/upload/images/20190912/20110850dsypfXRkNe.jpg

超緊繃!30天Vue.js學習日記 學會它,開發更簡單!(2)

大家好,今天我要介紹一個文字編輯器的外掛套件-EMMET(原Zen Coding)
我們可以利用他快速的產生html,css…程式碼,在搭配bootstrap時也是極為方便,是個能夠讓開發者少敲很多按鍵的好工具!

如果說您是使用VsCode的話,它已經內建emmet,若您是sublime text使用者,我們需要額外安裝該外掛:

  1. 安裝Package Control
    首先,我們先打開console視窗( ctrl + `)
    並將https://packagecontrol.io/installation
    內的指令貼上並按下Enter。

  2. 呼叫Package Control
    叫出Package Control( ctrl + shift + p )

  3. Package Control Install Package

https://ithelp.ithome.com.tw/upload/images/20191001/20110850lkXklTLeUe.png

  1. 安裝emmet
    在步驟3,我們按下enter後,會跳出安裝外掛的工具,我們便可以搜尋emmet
    並安裝。

基本用法

假設我們今天要寫一個div標籤,我們只要輸入div並按下tab(或是 ctrl + e ),
便會出現:

<div></div>

若我們要指定class或是id,我們可以輸入div#app.black或是#app.black(沒有指定標籤的話,預設就是div)

<div id="app" class="black"></div>

若我們今天有自訂義元素(Vue的組件….等),emmet辨識不出來,我們就需要按下ctrl + e ,而不是tab:

my-component1( ctrl + e )
<my-component1></my-component1>

當然,我們也可以使用它快速創建一個基本的html5格式:

html:5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

更多的基礎語法,我們可以藉由google大神搜尋到,今天的教學就到這邊,明天就會進入vue-router的部分啦!


上一篇
[特別篇][日記]學會它,開發更簡單!(1)
下一篇
[Vue.js][日記]擁抱全家桶系列-Vue-Router(1)
系列文
超緊繃!30天Vue.js學習日記33

尚未有邦友留言

立即登入留言