VSCode寫vue項目一鍵生成.vue模版,修改定義其他模板的方法
1. 安裝一個插件,識別vue文件
2.新建代碼片段
文件–>首選項–>用戶代碼片段–>點擊新建代碼片段–取名vue.json 確定
3.粘貼入自己寫的.vue模板
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "", "export default {", "components: {},", "data() {", "return {", "", "}", "},", "computed: {},", "watch: {},", "methods: {", "", "},", "created() {", "", "},", "mounted() {", "", "},", "}", "</script>", "<style lang='scss' scoped>", "$4", "</style>" ], "description": "Log output to console" } }
4.上面代碼中的 “prefix”: “vue”, 就是快捷鍵;保存好之后,新建.vue結(jié)尾的文件
輸入vue 按鍵盤的tab
補充:
vscode之快速生成vue模板的配置
在vscode中點擊左下角的設(shè)置---用戶代碼片段---輸入:vue.json
,將以下代碼復(fù)制保存,然后新建.vue文件,輸入:vue,回車即可??砂葱枳孕刑砑觾?nèi)容。
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " $0", " </div>", "</template>", "", "<script>", "", " export default {", " name:'',", " props:[''],", " data () {", " return {", "", " };", " },", "", " components: {},", "", " computed: {},", "", " beforeMount() {},", "", " mounted() {},", "", " methods: {},", "", " watch: {}", "", " }", "", "</script>", "<style lang='' scoped>", "", "</style>" ], "description": "Log output to console" } }
總結(jié)
到此這篇關(guān)于VSCode寫vue項目一鍵生成.vue模版,修改定義其他模板的方法的文章就介紹到這了,更多相關(guān)VSCode 生成vue模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue父子模版?zhèn)髦导敖M件傳值的三種方法
- 詳解vue父子模版嵌套案例
- 詳解用vue2.x版本+adminLTE開源框架搭建后臺應(yīng)用模版
- vue Element-ui input 遠程搜索與修改建議顯示模版的示例代碼
- 詳解如何用VUE寫一個多用模態(tài)框組件模版
- 詳解vue 模版組件的三種用法
- vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實例代碼
- Vue 中可以定義組件模版的幾種方式
- 解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題
- Vue2?模版指令元素綁定事件執(zhí)行順序解析
- vue模版編譯詳情
- vue的指令和插值問題匯總
- vue.js模版插值的原理與實現(xiàn)方法簡析
相關(guān)文章
vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn),非常具有實用價值,需要的朋友可以參考下2017-09-09Vue props中Object和Array設(shè)置默認(rèn)值操作
這篇文章主要介紹了Vue props中Object和Array設(shè)置默認(rèn)值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue項目中swiper輪播active圖片實現(xiàn)居中并放大
這篇文章主要介紹了vue項目中swiper輪播active圖片實現(xiàn)居中并放大方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05vue2.0實現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近小編在做vue2.0的項目,遇到移動端實時檢索搜索更新列表的效果,下面腳本之家小編給大家?guī)砹藇ue2.0 移動端的輸入框?qū)崟r檢索更新列表功能的實例代碼,感興趣的朋友參考下吧2018-05-05新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04