vue.js项目中vue文件的格式规范

昨天开始了一门关于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目录。

发表评论

电子邮件地址不会被公开。 必填项已用*标注