先看看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>