用vue生成后台首页欢迎页面

可以按照以下步骤使用 Vue.js 生成后台首页欢迎页面：

1. 安装 Vue CLI

如果你还没有安装 Vue CLI，可以在命令行中运行以下命令进行安装：

npm install -g @vue/cli

2. 创建项目

使用 Vue CLI 创建一个新项目，可以在命令行中运行以下命令：

vue create my-project

其中 `my-project` 是项目名称，你可以根据需要自定义。

3. 安装 Element UI

Element UI 是一个基于 Vue.js 的 UI 库，可以用于快速构建后台管理页面。可以在命令行中运行以下命令进行安装：

npm install element-ui

4. 创建欢迎页面

在 `src/views` 目录下创建一个名为 `Welcome.vue` 的文件，并添加以下代码：

<template>
  <div>
    <h1>欢迎使用后台管理系统</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是一个基于 Vue.js 和 Element UI 的后台管理系统',
    };
  },
};
</script>

该组件将显示一个标题和一条简短的欢迎消息。

5. 创建路由

在 `src/router/index.js` 文件中添加以下代码：

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from '@/views/Welcome.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Welcome',
      component: Welcome,
    },
  ],
});

该代码将创建一个名为 `Welcome` 的路由，指向刚才创建的 `Welcome` 组件。

6. 添加导航菜单

在 `src/App.vue` 文件中添加以下代码：

<template>
  <div>
    <el-menu mode="horizontal">
      <el-menu-item index="/">欢迎页面</el-menu-item>
      <!-- 其他菜单项 -->
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

该代码将创建一个水平导航菜单，并将 `router-view` 放在菜单下方。菜单项将使用路由链接到相应的页面。

7. 运行应用程序

现在可以运行应用程序以查看欢迎页面。可以在命令行中运行以下命令：

npm run serve

该命令将启动开发服务器，并在浏览器中打开应用程序。现在应该可以看到一个简单的欢迎页面，其中包含一个标题和一条消息。