VUE项目开发的完整流程

创建组件与编码

1、在views目录下创建组件

可创建文件夹进行分类管理
1670914323210.png

2、对组件进行编码

标签作用
template可理解为Body部分，但template只能放置一个控件，如果需要放置多个控件，可以嵌套放在div控件中
scriptJS脚本的部分
tyle编写样式部分
 
<!--写页面内容的部分，与Body类似-->
<template>
    <div id="container">
        <h5>我的第一个组件</h5>
        <button>点击我看看</button>
    </div>
</template>

<!--写JS脚本-->
<script>
    export default {
        // 组件命名，必须存在
        name: "UserReg"
    }
</script>

<!--编写样式的-->
<style scoped>

</style>

配置组件路由

1670914730511.png

运行

Termial上输入命令 npm run serve
1670914854267.png
1670914907960.png