先看看Vue.js 是什么（这是官方的解释）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。（这个视频链接值得看一下）

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

然后我就开始了我的HelloWorld之旅：

可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板

具体步骤如下

  1. 使用Ctrl + Shift + P召唤出控制台，然后输入snippets(跟着自动提示走就行了）并选择。（如果搜索不到，安装一个插件 vueHelper 如果搜索到复制粘贴以下代码）
  2. 接下来输入vue并选择，VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了。
  3. 输入模板，具体格式如下（这是我用的格式，当然也可根据自己的喜好进行修改）
    其中$0代表模板生成后，光标停留的位置。 
       "Print to console":{
    "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"wrapper\">$0</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  components:{},",
            "  props:{},",
            "  data(){",
            "    return {",
            "    }",
            "  },",
            "  watch:{},",
            "  computed:{},",
            "  methods:{},",
            "  created(){},",
            "  mounted(){}",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            ".wrapper{}",
            "</style>"
        ],
        "description": "A vue file template"
}

    接下来新建.vue文件
    输入vue
    按tab即可创建vue模板

VS Code可以通过以下快捷键格式化代码：

  • windows：Shift + Alt + F

  • Mac：Shift + Option + F

  • Ubuntu： Ctrl + Shift + I

创建一个.html文件

输入！按tab即可创建html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue js</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="text" v-model="message">
        <pre>
{{$data | json}}
        </pre>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      new Vue({
         el:'#app',
         data:{
            message:"Hello World!"
         }    
      })
    </script>
</body>
</html>