VS code快速創建vue模板

本文轉載自查看原文 2018-11-28 19:15 2686 vue/ vue學習筆記/ VS code

忘記了.vue文件的格式或者不想手動敲那段模板代碼怎么辦？VS code快速創建vue模板幫你偷個小懶

第一步：新建模板並保存

打開 VS code，依次點擊 file > Preferences > User Snippets，當彈出搜索框之后，輸入 vue.json ，然后回車，打開 vue.json文件后，復制以下代碼並保存（當然，你也可以根據你自己的習慣來編輯你的模板）

 1  {
 2     "Print to console": {
 3         "prefix": "vue",
 4         "body": [
 5             "<template>",
 6             "  <div>",
 7             "    $0",
 8             "  </div>",
 9             "</template>",
10             "",
11             "<script>",
12             "",
13             "  export default {",
14             "    name:'',",
15             "    props:[''],",
16             "    data () {",
17             "      return {",
18             "",
19             "      };",
20             "    },",
21             "",
22             "    components: {},",
23             "",
24             "    computed: {},",
25             "",
26             "    beforeMount() {},",
27             "",
28             "    mounted() {},",
29             "",
30             "    methods: {},",
31             "",
32             "    watch: {}",
33             "",
34             "  }",
35             "",
36             "</script>",
37             "<style lang='' scoped>",
38             "",
39             "</style>"
40         ],
41         "description": "Log output to console"
42     }
43 }

第二步：測試

新建一個 .vue 文件，輸入“vue”，按下回車鍵或者Tab鍵，我們想要的模板就自動生成了

 1 <template>
 2   <div>
 3     
 4   </div>
 5 </template>
 6 
 7 <script>
 8 
 9   export default {
10     name:'',
11     props:[''],
12     data () {
13       return {
14 
15       };
16     },
17 
18     components: {},
19 
20     computed: {},
21 
22     beforeMount() {},
23 
24     mounted() {},
25 
26     methods: {},
27 
28     watch: {}
29 
30   }
31 
32 </script>
33 <style lang='' scoped>
34 
35 </style>

補充一下：$0 是代碼生成后鼠標光標的位置，prefix 后面是生成模板代碼的指令，例如我這里設置的是 vue，所以我是輸入 vue 后按下回車或Tab鍵生成代碼，你也可以根據你的個人習慣來設置指令。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vs code 快速生成vue 模板 vs code 快速生成vue 模板 vue使用模板快速創建vue文件 VS Code 用Vue Cli創建項目 vs code創建項目 vs code 快速配置 VS Code 快速生成代碼使用VS Code快速編寫HTML 使用 vs code 創建 Django 項目學習vue ，環境搭建（VS code、node.js、cnpm、vue-cli）創建項目並引入element