vue+element ui写一个管理系统

好的，下面是一个简单的管理系统的搭建步骤：

1. 创建项目

首先，在命令行中输入以下命令来创建一个基于 Vue.js 和 Element UI 的管理系统项目：

vue create my-admin-system

然后进入项目目录：

cd my-admin-system

2. 安装 Element UI

接下来，使用以下命令来安装 Element UI：

npm install element-ui -S

安装完成后，在 `main.js` 文件中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建路由

使用以下命令安装 Vue Router：

npm install vue-router -S

然后创建一个 `router.js` 文件来管理路由：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue'),
    },
  ],
});

export default router;

这里定义了两个路由：`/` 和 `/about`，分别对应两个页面。

然后在 `main.js` 文件中引入并使用 `router.js`：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

4. 创建页面

在 `src/views` 目录下创建两个页面：`Home.vue` 和 `About.vue`：

<template>
  <div>
    <h1>Home</h1>
    <el-button @click="showDialog">Show Dialog</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <span>Dialog Content</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

<script>
export default {};
</script>

这里的 `Home.vue` 页面中包含了一个 Element UI 的对话框组件。

5. 运行项目

最后，在命令行中输入以下命令来运行项目：

npm run serve

然后在浏览器中输入 `http://localhost:8080/` 即可访问管理系统。

以上就是一个简单的基于 Vue.js 和 Element UI 的管理系统的搭建步骤。当然，这只是一个简单的示例，实际项目中还需要根据需求进行更多的开发和优化。