npm install -g @vue/cli

vue create vue-hello

cd vue-hello
npm run serve

打开文件：src/App.vue

<template>
  <!-- 页面展示内容 -->
  <div class="hello-page">
    <h1> Hello World！我是 Vue 小白</h1>
  </div>
</template>

<script setup>
// JS 逻辑（现在是空的，不用写代码）
</script>

<style>
/* 简单样式 */
.hello-page {
  text-align: center;
  margin-top: 100px;
  font-size: 24px;
  color: #2c3e50;
}
</style>






vue create 项目名   # 创建项目
cd 项目名          # 进入项目文件夹
npm run serve      # 启动项目

npm install element-plus
npm install @element-plus/icons-vue


打开 src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// 只引入 Element Plus 和默认样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' //    最关键的一句话  使用 Element Plus 全部默认样式

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

打开 src/App.vue

<template>
  <div>
    <!-- 只用 Element 组件，不写任何自定义 class、style -->
    <h1>Hello Vue + Element Plus 骨头版</h1>

    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>

    <el-input placeholder="我是输入框" style="width: 200px; margin: 0 10px"/>

    <el-card title="卡片标题">
      我是卡片内容
    </el-card>
  </div>
</template>

<script setup>
// 空！什么都不写
</script>

<style>
/* 空！完全不写样式 */
</style>

vue create vue20260402v2

cd  vue20260402v2

npm install element-plus
npm install @element-plus/icons-vue


npm install vue-router@4
vue3必须安装这个版本 vue-router@4

npm run serve

步骤 1：创建 2 个页面（最简单的骨头页面）
在 src 里新建文件夹 views，再建 2 个文件：

src/views/Material.vue

<template>
  <el-card>
    <h2>物料基础数据</h2>
    <p>这是物料管理页面内容</p>
  </el-card>
</template>

<script>
export default {
  name: 'MaterialView'
}
</script>

src/views/Staff.vue

<template>
  <el-card>
    <h2>员工基础数据</h2>
    <p>这是员工管理页面内容</p>
  </el-card>
</template>

<script>
export default {
  name: 'StaffView'
}
</script>


步骤 2：配置路由（页面跳转规则）
新建文件：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Material from '../views/Material.vue'
import Staff from '../views/Staff.vue'
import Layout from '../Layout.vue'

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        redirect: '/material' // 默认打开物料页
      },
      {
        path: 'material',
        component: Material
      },
      {
        path: 'staff',
        component: Staff
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router



步骤 3：main.js 引入路由 + ElementPlus
打开 src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router' // 引入路由

const app = createApp(App)
app.use(ElementPlus)
app.use(router) // 使用路由
app.mount('#app')


步骤 4：写【经典后台布局】（最核心！）
新建文件：src/Layout.vue

<template>
  <el-container style="height: 100vh">
    <!-- 左侧菜单 -->
    <el-aside width="220px" style="background-color: #2f4050">
      <el-menu
        default-active="/material"
        background-color="#2f4050"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-sub-menu index="1">
          <template #title>基础数据</template>
          <el-menu-item index="/material">物料基础数据</el-menu-item>
          <el-menu-item index="/staff">员工基础数据</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧整体 -->
    <el-container>
      <!-- 顶部工具栏 -->
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-user"></i> 管理员
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!-- 中间内容区（页面显示在这里） -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
export default {
  name: 'TheLayout'
}
</script>


步骤 5：App.vue 只放布局（超级干净）
打开 src/App.vue 全删，替换成：

<template>
  <router-view />
</template>

<script setup>
</script>

步骤 6：启动看效果！

npm run serve