在vscode里使用.vue代碼模板的方法
1.設(shè)置.vue模板
打開(kāi)編輯器，點(diǎn)擊文件 —— 首選項(xiàng) —— 用戶(hù)代碼片段，會(huì)彈出來(lái)一個(gè)輸入框。
在輸入框輸入vue，回車(chē)，會(huì)打開(kāi)一個(gè)vue.json文件。
在里面復(fù)制以下代碼：
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" data() {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
"}",
"</script>\n",
"<style scoped lang=\"scss\">\n",
"</style>",
"$2"
],
"description": "Log output to console"
}
}
模板內(nèi)容可按自己的喜好自行修改。
然后新建一個(gè).vue文件，輸入vue然后按tab鍵。
2.如果第一步?jīng)]有成功
如果第一步成功是最好的，萬(wàn)一按tab鍵沒(méi)有成功生成模板，而是多了一個(gè)空格：
步驟一：點(diǎn)擊文件 —— 首選項(xiàng) —— 設(shè)置，修改以下設(shè)置：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true
步驟二：點(diǎn)擊編輯器右下角笑臉左邊的文件類(lèi)型，選擇配置文件關(guān)聯(lián)，輸入vue然后回車(chē)。右下角的文件類(lèi)型就會(huì)從html變成vue。這時(shí)再用tab鍵就可以成功生成模板了~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue獲取時(shí)間戳轉(zhuǎn)換為日期格式代碼實(shí)例
這篇文章主要介紹了vue獲取時(shí)間戳轉(zhuǎn)換為日期格式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫(xiě)跳轉(zhuǎn)路由,路由組件會(huì)渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue 過(guò)渡（動(dòng)畫(huà)）transition組件案例詳解
這篇文章主要介紹了Vue 過(guò)渡（動(dòng)畫(huà)）transition組件案例詳解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能
在項(xiàng)目開(kāi)發(fā)中遇到這樣需求，就是有幾個(gè)tab欄，每個(gè)tab欄對(duì)應(yīng)的ajax請(qǐng)求不一樣，內(nèi)容區(qū)域一樣，內(nèi)容為實(shí)時(shí)刷新數(shù)據(jù)，實(shí)現(xiàn)方法其實(shí)很簡(jiǎn)單的，下面小編給大家?guī)?lái)了基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能，需要的朋友參考下吧2017-04-04
這篇文章主要介紹了vue3.0中的computed寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue3聲明字段名為枚舉的類(lèi)型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue全局注冊(cè)中的kebab-case和PascalCase用法
這篇文章主要介紹了Vue全局注冊(cè)中的kebab-case和PascalCase用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue動(dòng)態(tài)類(lèi)的幾種使用方法總結(jié)
這篇文章主要介紹了Vue動(dòng)態(tài)類(lèi)的幾種使用方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01