快捷導(dǎo)航

使用vscode快速建立vue模板過程詳解

更新時(shí)間：2019年10月10日 09:50:08 作者：bingxiaoxiao

這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

當(dāng)我們希望每次新建.vue文件后，vscode能夠根據(jù)配置，自動(dòng)生成我們想要的內(nèi)容。

打開vscode編輯器，依次選擇“文件 -> 首選項(xiàng) -> 用戶代碼片段”，此時(shí)，會(huì)彈出一個(gè)搜索框，我們輸入vue，將代碼ctrl+c 到vue-html.json

{
 "Print to console": {
  "prefix": "vue",
  "body": [
   "<!-- $0 -->",
   "<template>",
   " <div></div>",
   "</template>",
   "",
   "<script>",
   "export default {",
   " data () {",
   "  return {",
   "  };",
   " },",
   "",
   " components: {},",
   "",
   " computed: {},",
   "",
   " mounted: {},",
   "",
   " methods: {}",
   "}",
   "",
   "</script>",
   "<style lang='scss' scoped>",
   "</style>"
 ],
  "description": "Log output to console"
 }
}

保存后關(guān)閉這個(gè)文件。

稍稍解釋一下：$0 表示你希望生成代碼后光標(biāo)的位置 ; prefix 表示生成對(duì)應(yīng)預(yù)設(shè)代碼的命令

例如：我們新建一個(gè)名為header.vue的文件，輸入內(nèi)容vue按下enter，就會(huì)自動(dòng)生成內(nèi)容.

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中實(shí)現(xiàn)多頁面應(yīng)用方式
這篇文章主要介紹了vue中實(shí)現(xiàn)多頁面應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue.js之VNode的使用
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法
這篇文章主要介紹了vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
淺談vue3中effect與computed的親密關(guān)系
這篇文章主要介紹了淺談vue3中effect與computed的親密關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue根據(jù)進(jìn)入的路由進(jìn)行原路返回的方法
今天小編就為大家分享一篇vue根據(jù)進(jìn)入的路由進(jìn)行原路返回的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
這篇文章主要介紹了vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼,需要的朋友可以參考下
2017-05-05
vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Java獲取客戶端信息以及IP地址
這篇文章主要為大家詳細(xì)介紹了如何使用Java獲取客戶端信息以及IP地址,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09