在vscode 中設(shè)置 vue模板內(nèi)容的方法
vscode中設(shè)置 vue 模板內(nèi)容緣由設(shè)置要求1:vscode 先下載插件 `vetur`2: 菜單欄 -文件 - 首選項(xiàng) - 用戶代碼片段3:使用
緣由
由于每次在 vscode 中創(chuàng)建vue的文件的時(shí)候,都需要手動(dòng)書寫
templete,模板
script,腳本
style,樣式
這些重復(fù)和繁瑣的事情,是可以定義一個(gè)模板信息的
設(shè)置要求
1:vscode 先下載插件 vetur

2: 菜單欄 -文件 - 首選項(xiàng) - 用戶代碼片段

以下是借鑒一下谷粒商城的 提供 vue 模板信息 和 httpget、httppost請(qǐng)求
{
"生成vue模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"http://這里可以導(dǎo)入其他文件(比如:組件,工具js,第三方插件js,json文件,圖片文件等等)",
"http://例如:import 《組件名稱》 from '《組件路徑》';",
"",
"export default {",
" //import引入的組件需要注入到對(duì)象中才能使用",
"components: {},",
"props: {},",
"data() {",
"http://這里存放數(shù)據(jù)",
"return {",
"",
"};",
"},",
"http://計(jì)算屬性 類似于data概念",
"computed: {},",
"http://監(jiān)控data中的數(shù)據(jù)變化",
"watch: {},",
"http://方法集合",
"methods: {",
"",
"},",
"http://生命周期 - 創(chuàng)建完成(可以訪問(wèn)當(dāng)前this實(shí)例)",
"created() {",
"",
"},",
"http://生命周期 - 掛載完成(可以訪問(wèn)DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 創(chuàng)建之前",
"beforeMount() {}, //生命周期 - 掛載之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 銷毀之前",
"destroyed() {}, //生命周期 - 銷毀完成",
"activated() {}, //如果頁(yè)面有keep-alive緩存功能,這個(gè)函數(shù)會(huì)觸發(fā)",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "生成vue模板"
},
"http-get請(qǐng)求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'get',",
"params: this.\\$http.adornParams({})",
"}).then(({ data }) => {",
"})"
],
"description": "httpGET請(qǐng)求"
},
"http-post請(qǐng)求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'post',",
"data: this.\\$http.adornData(data, false)",
"}).then(({ data }) => { });"
],
"description": "httpPOST請(qǐng)求"
}
}
3:使用
在新創(chuàng)建的vue文件中,根據(jù)剛才的文件名就可以快速生成模板中的文件內(nèi)容

比如,此時(shí)就是設(shè)置的 vue
總結(jié)
到此這篇關(guān)于在vscode 中設(shè)置 vue模板內(nèi)容的方法的文章就介紹到這了,更多相關(guān)vscode 設(shè)置 vue模板內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vscode vue 文件模板的配置方法
- 使用vscode快速建立vue模板過(guò)程詳解
- 在VScode中創(chuàng)建你的代碼模板的方法
- Vscode中快速創(chuàng)建自定義代碼模板的方法
- VsCode里的Vue模板的實(shí)現(xiàn)
- vscode自定義vue模板的實(shí)現(xiàn)
- VS2019 自定義項(xiàng)目模板的實(shí)現(xiàn)方法
- vsCode一鍵生成vue模板
- Vscode自定義注釋模板的實(shí)現(xiàn)示例
- VS2022添加代碼模板的實(shí)現(xiàn)步驟(圖文)
- VisualStudio2022制作多項(xiàng)目模板及Vsix插件的實(shí)現(xiàn)
相關(guān)文章
詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化
這篇文章主要介紹了詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Delete `,` 如何解決(vue eslint與prettier沖突)
這篇文章主要介紹了Delete `,` 如何解決(vue eslint與prettier沖突)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3中的常見(jiàn)組件通信之v-model使用詳解
這篇文章主要介紹了Vue3中的常見(jiàn)組件通信之v-model使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)一拉到底的滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單的一拉到底的滑動(dòng)驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vue實(shí)現(xiàn)搜索并高亮文字的兩種方式總結(jié)
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,常見(jiàn)的實(shí)現(xiàn)方式有插入標(biāo)簽和貼標(biāo)簽兩種,這兩種方式適用于不同的場(chǎng)景,各有優(yōu)劣,下面我們就來(lái)看看他們的具體實(shí)現(xiàn)吧2023-11-11

