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

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

這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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 表示生成對應(yīng)預(yù)設(shè)代碼的命令

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

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

您可能感興趣的文章:

相關(guān)文章

詳解使用jest對vue項(xiàng)目進(jìn)行單元測試
這篇文章主要介紹了詳解使用jest對vue項(xiàng)目進(jìn)行單元測試，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
使用Vue.js報(bào)錯(cuò)：ReferenceError: “Vue is not d
在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個(gè)常見的錯(cuò)誤,該錯(cuò)誤通常發(fā)生在項(xiàng)目中未正確引入 Vue.js 框架或代碼配置存在問題時(shí),本篇文章將詳細(xì)分析該錯(cuò)誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下
2024-12-12
vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2021-11-11
關(guān)于Element UI table 順序拖動(dòng)方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動(dòng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
vue3中cookie的詳細(xì)使用過程
近期做的項(xiàng)目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個(gè)比較棘手的問題,下面這篇文章主要給大家介紹了關(guān)于vue3中cookie的詳細(xì)使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時(shí)居右時(shí),點(diǎn)擊clear清空按鈕事件時(shí)會(huì)同時(shí)觸發(fā)click-right-icon事件,這個(gè)時(shí)候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧
2024-02-02
Vue3刷新頁面報(bào)錯(cuò)404的解決方法
本文主要介紹了Vue3刷新頁面報(bào)錯(cuò)404的解決方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
一文帶你深入理解Vue3中的emit使用
這篇文章主要介紹了Vue3中通過emit實(shí)現(xiàn)父子組件通信的方法,包括基礎(chǔ)概念、使用方法、配合props實(shí)現(xiàn)完整父子通信、在TypeScript中的類型推斷以及注意事項(xiàng)與最佳實(shí)踐,需要的朋友可以參考下
2025-01-01