W260426/10_vuecli/helloworld/src/views/PageOne.vue

<!-- template 模版 表示当前vue文件的html结构 -->
<template>
    <!-- template模版内部 只以包含一个根元素 -->
     <!-- 所有html代码只能写在当前跟标签（div） 内-->
    <div>
        <h1>PageOne</h1>
        <p class="text">{{ msg }}</p>
    </div>
</template>
<script>
    //vue 文件 中 可以包含script 标签
    // export default 表示导出一个默认的vue组件(vue 文件)
    export default {
        // 组件的名称
        name: 'PageOne',
        // 组件的data 他是一个函数 并且返回了一个 { }
        data(){
            return{
                msg: 'hello vue'
            }
        }
    }
</script>

<!-- vue 组件的样式 可以在vue文件中 写style 标签 内部 -->
<style>
    .text{
        color: red;
    }
</style>