建立vue檔案模板

開啟vscode，檔案–>首選項—>使用者程式碼片段，在彈出的搜尋框中輸入vue，回車

刪除原內容，將如下內容貼上

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

使用

新建.vue的檔案後，在檔案中輸入vue然後回車，即會在新建的vue檔案中生成如下程式碼：

<!--  -->
<template>
<div class=''></div>
</template>

<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';

export default {
//import引入的元件需要注入到物件中才能使用
components: {},
data() {
//這裡存放資料
return {

}
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的資料變化
watch: {},
//生命週期 - 建立完成（可以訪問當前this例項）
created() {

},
//生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {

},
//生命週期 - 建立之前
beforeCreate() {

},
//生命週期 - 掛載之前
beforeMount() {

},
//生命週期 - 更新之前
beforeUpdate() {

}, 
//生命週期 - 更新之後
updated() {

}, 
//生命週期 - 銷燬之前
beforeDestroy() {

},
//生命週期 - 銷燬完成
destroyed() {

},
//如果頁面有keep-alive快取功能，這個函式會觸發
activated() {

},
//方法集合
methods: {

}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css類

</style>