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目录。