本教程操作环境：windows7系统、vue3版，DELL G3电脑。

一个vue页面通常由三部分组成：模板(template)、js(script)、样式(style)

(相关资料图)

<template>界面展示代码（需要注意的是只能有一个大的div）</template>

<script>export default {业务实现代码}</script>

<style scoped >界面布局代码(scoped 解决了css全局污染)</style>

[template-模板]

（1） 模板只能包含一个父节点，也就是说顶层的div只能有一个（如上图，父节点为#app的div，其没有兄弟节点）

（2）<router-view/>是子路由视图插槽，后面的路由页面都显示在此处，相当于iframe

【script-JS代码】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

【style-CSS样式】

样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

引入外部CSS示例：

<style>    import "./assets/css/public.css"</style>

以上就是vue页面有哪些组成的详细内容，更多请关注php中文网其它相关文章！