VUE2.0写HelloWorld

1、创建vue项目

      vue init webpack 项目名

2、打开文件HelloWorld.vue

3、编写代码

将template修改成：

  <template>

  <div class="hello">

    <h1>{{ msg }}World</h1>

  </div>

</template>

将script修改成：

<script>

export default {

    name:'HelloWorld',

    data () {

      return {

        msg: 'Hello'

      }

    }

}

</script>

将style scoped 修改成：

<style scoped>

h1{

  font-weight: normal;

}

</style>

5、运行项目

npm run dev

出现报错

解决方法：https://blog.csdn.net/qq_41999034/article/details/109078474

也可以在项目创建时选择不使用ESlint语法。

Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。选N。

最终效果：

总结：

 helloworld.vue里面，由三部分组成：template、script、style scoped

分别对应： HTML、script、css