集成环境工作台：

豆包MarsCode工作台

组件开发思想：

• 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件
• 可以扩展 HTML 元素，封装可重用的代码
• 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

简而言之：就是封装思想

组件开发作用：

• 将一个页面拆分成多个组件，哪部分组件出问题就看相应代码，方便维护
• 各个组件之间相互独立，一个组件出现问题，它不会影响到另外一个组件
• 方便对代码进行组织管理，扩展性也较强，添加功能只需新创作组件

实例：

下面我们用实例进一步体会其思想和作用，首先上框图与项目结构方便理解：

• 框图

• 项目结构：

• 步骤：

初始vue3项目结构：

右击HelloWorld.vue，删除初始组件：

新建3个组件文件，分别为MyHeader.vue,MyNav.vue,MyContent.vue：

由于采用了Element-plus框架快速开发，这里你需要安装该框架:

npm install element-plus --save

注意是在终端(Terminal)中执行此命令:

将APP.vue, main.ts, MyContent.vue, MyNav.vue, MyHeader.vue, style.css写为:

APP.vue:

<template>
  <div class="common-layout">
    <!-- 使用Element UI的容器组件 -->
    <el-container class="container">
      <!-- 页眉部分，包含自定义的MyHeader组件 -->
      <el-header class="header"><MyHeader /></el-header>

      <el-container>
        <!-- 侧边栏部分，包含自定义的MyNav组件 -->
        <el-aside class="nav"><MyNav /></el-aside>
        <!-- 主内容区，包含自定义的MyContent组件 -->
        <el-main class="content"><MyContent /></el-main>
      </el-container>
      
    </el-container>
  </div>
</template>

<script>
// 导入自定义的头部组件
import MyHeader from './components/MyHeader.vue'
// 导入自定义的导航组件
import MyNav from './components/MyNav.vue'
// 导入自定义的内容组件
import MyContent from './components/MyContent.vue'

export default {
  components: {
    MyHeader,
    MyNav,
    MyContent
  }
}
</script>

<style scoped>
/* 这里可以添加局部样式 */
</style>

main.ts:

// 导入 createApp 函数，用于创建 Vue 应用实例
import { createApp } from 'vue'
// 导入全局样式文件
import './style.css'
// 导入根组件 App.vue
import App from './App.vue'
// 导入 Element Plus 组件库
import ElementPlus from "element-plus"
// 导入 Element Plus 样式文件
import "element-plus/dist/index.css"

// 创建 Vue 应用实例，并将 App 组件作为根组件
const app = createApp(App)
// 在 Vue 应用中使用 Element Plus 组件库
app.use(ElementPlus)
// 将 Vue 应用挂载到指定的 DOM 元素上
app.mount('#app')

MyContent.vue:

<template>
    my-content
  </template>
  
  <script>
  
  </script>
  
  <style>
  
  </style>

MyNav.vue:

<template>
    my-nav
  </template>
  
  <script>
  
  </script>
  
  <style>
  
  </style>

MyHeader.vue:

<template>
    my-header
  </template>
  <script lang="ts" setup>
  </script>
  
  <style>

  </style>

style.css:

/* 全局样式  */
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* index.html中的主体部分 */
body {
  margin: 0;
  display: flex;
  /* place-items: center; */
  min-width: 320px;
  min-height: 100vh;
}

/* index.html中的 div标签，id=“app” */
#app {
  text-align: center;
}

/* 白色背景板 */
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
.container{
  width: 1536px;
  height: 850px;
  display: flex;
  background-color: rebeccapurple;
}

.header{
  width: 1536px;
  height: 100px;
  margin: 0;
  display: flex; 
  align-items: center;
  justify-content: center;
  background-color: beige;
}

.nav{
  width: 156px;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}

.content{
  width: 1370px;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: bisque;
}

过程坎坷：

这Element-Plus官网写的什么玩意，Container容器组件模版和展示效果差别大了，害的我以为是自己配置错了，来公司找一天的问题，然后换了一个Tabs标签页组件模版，发现和展示效果一致------这就说明官网上面写的不行，什么玩意啊，从csdn上找类似错误，才发现样式要自己改一下。