WordpressABC

昨天开始了一门关于vue的课程，通过实际开发案例来介绍使用vue脚手架开发前端项目。一个标准的vue文件，应该包含以下内容：

<template>
    <div><!---🔺必须有父元素div或者其他的例如section等等--->
        <!---内容区--->
    </div>
</template>
<script>
    export default {
        name:"xxxTemplate",
        componets:{},
        data(){
            return{}
        },
        created(){},
        mounted(){},
        methods:{},
        props:{},
        watch:{}
    }
</script>
<style lang="scss" scoped>
    body{
        color:#000;
    }
</style>
<!--🔺scoped:表示仅在当前vue文件中起作用--->

vue文件通常放在项目中的view文件夹中，该文件即是网页的视图模板。vue文件包含三层内容，即template标签包裹的模板文件，script标签包裹的vue配置文件和style标签包裹的样式表文件。

在script中需要注意export default里面的相关属性，例如name属性定义了该vue模板文件的引用名称。

在其他页面引入模板文件可以使用如下方式：

import xxxTemplate from "@/view/xxxTemplate.vue"
// 引入   模板名     从    模板位置

其中的@表示地址隐名符，一般项目中默认指代的是/src目录。