用vue-admin-template 框架搭建一个vue后台管理系统

好的，我们来一步步搭建一个基于vue-admin-template的后台管理系统。

## 1. 准备工作

首先需要安装好node.js和npm，并确保版本符合要求。然后我们需要安装vue-cli脚手架工具，通过以下命令安装：

npm install -g vue-cli

安装完成后，我们就可以使用vue-cli来创建一个基于vue-admin-template的项目了。

## 2. 创建项目

使用以下命令创建一个vue-admin-template项目：

vue init vuejs-templates/admin vue-admin-demo

其中，vue-admin-demo为项目名称，根据自己的需要修改即可。

创建完成后，进入项目目录并安装依赖：

cd vue-admin-demo
npm install

安装完成后，我们可以启动项目并查看效果：

npm run dev

打开浏览器，访问http://localhost:9528，就可以看到一个基于vue-admin-template的后台管理系统了。

## 3. 配置路由

在src/router/index.js文件中，我们可以看到已经定义了一个路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

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

我们可以根据自己的需要修改这个路由，添加更多的路由信息。比如，我们可以添加一个Dashboard页面的路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Dashboard from '@/views/dashboard/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

## 4. 配置菜单

在src/layout/components/Sidebar/index.vue文件中，我们可以看到已经定义了一个菜单：

<el-submenu index="1">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>Dashboard</span>
  </template>
  <el-menu-item index="1-1">Dashboard 1</el-menu-item>
  <el-menu-item index="1-2">Dashboard 2</el-menu-item>
  <el-menu-item index="1-3">Dashboard 3</el-menu-item>
</el-submenu>

我们可以根据自己的需要修改这个菜单，添加更多的菜单项。比如，我们可以添加一个Dashboard页面的菜单项：

<el-submenu index="1">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>Dashboard</span>
  </template>
  <el-menu-item index="/dashboard">Dashboard</el-menu-item>
</el-submenu>

## 5. 配置页面

我们可以在src/views目录下添加自己的页面，比如Dashboard页面。创建一个dashboard目录，并在其中添加一个index.vue文件。

在index.vue文件中，我们可以像普通的vue组件一样编写代码，比如：

<template>
  <div>
    <h1>Dashboard</h1>
  </div>
</template>

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

## 6. 打包部署

当我们完成了开发工作后，就可以将项目打包部署到生产环境中了。使用以下命令进行打包：

npm run build

打包完成后，会在项目根目录下生成一个dist目录，里面包含了打包后的文件。

我们可以将dist目录中的文件上传到服务器，并配置好Web服务器，以便访问我们的后台管理系统。

至此，我们就完成了基于vue-admin-template的后台管理系统的搭建。