VSCode初次写vue项目并一键生成.vue模版

安装vscode

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

安装插件，识别vue文件

插件库中搜索Vetur，点击安装，安装完成之后点击重新加载。

新建代码片段

文件–>首选项–>用户代码片段
然后再弹出的输入框中输入vue，然后回车(Enter)。
在vue.json中写上代码片段,代码如下：

{
    "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() {",
            "       ",
            "   },",
            "   //如果页面有keep-alive缓存功能，这个函数会触发",
            "   activated() {",
            "       ",
            "   },",
            "}",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    } 
}

使用

上面代码中的 "prefix": "vue", 就是快捷键；保存好之后，新建.vue结尾的文件，输入 vue 按键盘的 tab 就行。