vscode中設定 vue 模板內容緣由設定要求1：vscode 先下載外掛 `vetur`2: 選單欄 -檔案 - 首選項 - 使用者程式碼片段3：使用

緣由

由於每次在 vscode 中建立vue的檔案的時候，都需要手動書寫
templete，模板
script，指令碼
style，樣式
這些重複和繁瑣的事情，是可以定義一個模板資訊的

設定要求

1：vscode 先下載外掛 vetur

2: 選單欄 -檔案 - 首選項 - 使用者程式碼片段

以下是借鑑一下穀粒商城的 提供 vue 模板資訊 和 httpget、httppost請求

{
	"生成vue模板": {
		"prefix": "vue","body": [
			"<template>","<div></div>","</template>","","<script>","//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）","//例如：import 《元件名稱》 from '《元件路徑》';","export default {"," //import引入的元件需要注入到物件中才能使用","components: {},","props: {},"data() {","//這裡存放資料","return {","};","},"//計算屬性 類似於data概念","computed: {},"//監控data中的資料變化","watch: {},"//方法集合","methods: {","//生命週期 - 建立完成（可以訪問當前this例項）","created() {","//生命週期 - 掛載完成（可以訪問DOM元素）","mounted() {","beforeCreate() {},//生命週期 - 建立之前","beforeMount() {},//生命週期 - 掛載之前","beforeUpdate() {},//生命週期 - 更新之前","updated() {},//生命週期 - 更新之後","beforeDestroy() {},//生命週期 - 銷燬之前","destroyed() {},//生命週期 - 銷燬完成","activated() {},//如果頁面有keep-alive快取功能，這個函式會觸發","}","</script>","<style scoped>","$4","</style>"
		],"description": "生成vue模板"
	},"http-get請求": {
	"prefix": "httpget","body": [
		"this.\\$http({","url: this.\\$http.adornUrl(''),"method: 'get',"params: this.\\$http.adornParams({})","}).then(({ data }) => {","})"
	],"description": "httpGET請求"
 },"http-post請求": {
	"prefix": "httppost","method: 'post',"data: this.\\$http.adornData(data,false)","}).then(({ data }) => { });" 
	],"description": "httpPOST請求"
 }
}

3：使用

在新建立的vue檔案中，根據剛才的檔名就可以快速生成模板中的檔案內容

比如，此時就是設定的 vue

總結

到此這篇關於在vscode 中設定 vue模板內容的方法的文章就介紹到這了,更多相關vscode 設定 vue模板內容內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！