1.安裝vscode

官網地址：https://code.visualstudio.com/

2.安裝一個插件，識別vue文件

插件庫中搜索Vetur，下圖中的第一個，點擊安裝，安裝完成之后點擊重新加載

微信圖片_20180723174649.png

3.新建代碼片段

文件-->首選項-->用戶代碼片段-->點擊新建代碼片段--取名vue.json 確定

4.刪除不要的代碼

5.粘入自己寫的.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: {},","//方法集合","methods: {","","},","//生命周期 - 創建完成（可以訪問當前this實例）","created() {","","},","//生命周期 - 掛載完成（可以訪問DOM元素）","mounted() {","","},","beforeCreate() {}, //生命周期 - 創建之前","beforeMount() {}, //生命周期 - 掛載之前","beforeUpdate() {}, //生命周期 - 更新之前","updated() {}, //生命周期 - 更新之后","beforeDestroy() {}, //生命周期 - 銷毀之前","destroyed() {}, //生命周期 - 銷毀完成","activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發","}","</script>","<style lang='scss' scoped>","//@import url($3); 引入公共css類","$4","</style>"],"description": "Log output to console"} }

6.上面代碼中的 "prefix": "vue", 就是快捷鍵；保存好之后，新建.vue結尾的文件試試

輸入vue 按鍵盤的tab就行

微信圖片_20180723173036.png

作者：大胡子111
鏈接：https://www.jianshu.com/p/8610215a8a84
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

總結

以上是生活随笔為你收集整理的VSCode 初次写vue项目并一键生成.vue模版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。