在vscode 中設(shè)置 vue模板內(nèi)容的方法

更新時間：2020年09月02日 09:40:18 作者：可愛組長

這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

vscode中設(shè)置 vue 模板內(nèi)容緣由設(shè)置要求1：vscode 先下載插件 `vetur`2: 菜單欄 -文件 - 首選項 - 用戶代碼片段3：使用

緣由

由于每次在 vscode 中創(chuàng)建vue的文件的時候，都需要手動書寫
templete，模板
script，腳本
style，樣式
這些重復(fù)和繁瑣的事情，是可以定義一個模板信息的

設(shè)置要求

1：vscode 先下載插件 vetur

在這里插入圖片描述

2: 菜單欄 -文件 - 首選項 - 用戶代碼片段

在這里插入圖片描述

以下是借鑒一下谷粒商城的提供 vue 模板信息和 httpget、httppost請求

{
	"生成vue模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"http://這里可以導(dǎo)入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）",
			"http://例如：import 《組件名稱》 from '《組件路徑》';",
			"",
			"export default {",
			" //import引入的組件需要注入到對象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"http://這里存放數(shù)據(jù)",
			"return {",
			"",
			"};",
			"},",
			"http://計算屬性 類似于data概念",
			"computed: {},",
			"http://監(jiān)控data中的數(shù)據(jù)變化",
			"watch: {},",
			"http://方法集合",
			"methods: {",
			"",
			"},",
			"http://生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實例）",
			"created() {",
			"",
			"},",
			"http://生命周期 - 掛載完成（可以訪問DOM元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 創(chuàng)建之前",
			"beforeMount() {}, //生命周期 - 掛載之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 銷毀之前",
			"destroyed() {}, //生命周期 - 銷毀完成",
			"activated() {}, //如果頁面有keep-alive緩存功能，這個函數(shù)會觸發(fā)",
			"}",
			"</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",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST請求"
 }
}

3：使用

在新創(chuàng)建的vue文件中，根據(jù)剛才的文件名就可以快速生成模板中的文件內(nèi)容

在這里插入圖片描述