vsc 自定義快速生成vue模板

1.安裝vscode

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

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

插件庫中搜索Vetur，下圖中的第一個，點擊安裝，安裝完成以後點擊從新加載

 

 

3.新建代碼片斷

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

 

4.刪除不要的代碼

5.粘入本身寫的.vue模板

 1 {
 2     "Print to console": {
 3         "prefix": "vue",
 4         "body": [
 5             "<!-- $1 -->",
 6             "<template>",
 7             "<div class='$2'>$5</div>",
 8             "</template>",
 9             "",
10             "<script>",
11             "//這裏能夠導入其餘文件（好比：組件，工具js，第三方插件js，json文件，圖片文件等等）",
12             "//例如：import 《組件名稱》 from '《組件路徑》';",
13             "",
14             "export default {",
15             "//import引入的組件須要注入到對象中才能使用",
16             "components: {},",
17             "data() {",
18             "//這裏存放數據",
19             "return {",
20             "",
21             "};",
22             "},",
23             "//監聽屬性 相似於data概念",
24             "computed: {},",
25             "//監控data中的數據變化",
26             "watch: {},",
27             "//方法集合",
28             "methods: {",
29             "",
30             "},",
31             "//生命週期 - 建立完成（能夠訪問當前this實例）",
32             "created() {",
33             "",
34             "},",
35             "//生命週期 - 掛載完成（能夠訪問DOM元素）",
36             "mounted() {",
37             "",
38             "},",
39             "beforeCreate() {}, //生命週期 - 建立以前",
40             "beforeMount() {}, //生命週期 - 掛載以前",
41             "beforeUpdate() {}, //生命週期 - 更新以前",
42             "updated() {}, //生命週期 - 更新以後",
43             "beforeDestroy() {}, //生命週期 - 銷燬以前",
44             "destroyed() {}, //生命週期 - 銷燬完成",
45             "activated() {}, //若是頁面有keep-alive緩存功能，這個函數會觸發",
46             "}",
47             "</script>",
48             "<style lang='scss' scoped>",
49             "//@import url($3); 引入公共css類",
50             "$4",
51             "</style>"
52         ],
53         "description": "Log output to console"
54     }
55 }

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

注意：
這裏直接保存文件就能夠自動執行了。輸入vue 按鍵盤的tab就行

 

 

 

 

本身寫的模板能夠按照本身須要的在裏面添加就能夠啦。