Vue使用代码片段生成代码 自定义语法模板

一、基础设置

1、打开VsCode安装Vetur插件

 2.使用快捷Ctrl Shift P唤出控制台

 3、然后输入“snippets”

 4、如果第一次创建，选择“新代码片段”新建文件，输入文件名称“Demo” ，如果已创建，输入关键字搜索“现有代码片段”后选择。

 5、输入文件名称后，创建代码片段文件，会看到如下代码片段文件。

 6、在Demo文件中输入以下代码片段，即可

1.  
   1 "Print to console": {
2.  
   2 "prefix": "vue",
3.  
   3 "body": [
4.  
   4 "<!-- $1 -->",
5.  
   5 "<template>",
6.  
   6 "<div class=\"\">",
7.  
   7 "",
8.  
   8 "</div>",
9.  
   9 "</template>",
10.  
    10 "",
11.  
    11 "<script>",
12.  
    12 "export default {",
13.  
    13 " name:\"\",",
14.  
    14 " data() {",
15.  
    15 " return {",
16.  
    16 "",
17.  
    17 " }",
18.  
    18 " },",
19.  
    19 " created() {",
20.  
    20 "",
21.  
    21 " },",
22.  
    22 " mounted() {",
23.  
    23 "",
24.  
    24 " }",
25.  
    25 "}",
26.  
    26 "</script>",
27.  
    27 "<style lang=\"less\" scoped>",
28.  
    28 "/* @import url(); 引入css类 */",
29.  
    29 "$0",
30.  
    30 "</style>"
31.  
    31 ],
32.  
    32 "description": "生成vue模板"
33.  
    33 }

7、然后新建一个 vue 文件，输入“vue”，按下回车键或者Tab键，模板就自动生成了

这篇好文章是转载于：学新通技术网