vue-admin-template框架

Vue-admin-template是一款基于Vue.js和Element UI的后台管理系统模板。它提供了一套完整的后台管理系统解决方案，包括了登录、权限管理、多语言支持、可视化图表等功能。开发者可以根据自己的需求进行二次开发和定制，快速构建自己的后台管理系统。此外，Vue-admin-template还具有代码简洁、易于维护、易于扩展等优点。

相关问题

用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的后台管理系统的搭建。

vue-admin-template和vue-element-admin

vue-admin-template和vue-element-admin是两个不同的项目。

vue-admin-template是一个基于vue-element-admin的后台管理系统基础模板，可以作为模板进行二次开发。它提供了一个简洁的基础框架，适合用于中小型后台管理项目的开发。你可以从GitHub上获取它的源代码，GitHub地址是https://github.com/PanJiaChen/vue-admin-template 。

而vue-element-admin是一个丰富的组件库，它包含了很多常用的组件和功能，可以作为一个工具箱。你可以从vue-element-admin中复制你需要的功能或组件到vue-admin-template中进行二次开发。这样可以加快开发速度，并且确保功能的完整性和稳定性。

总结起来，vue-admin-template是一个基础的后台管理系统模板，适合二次开发，而vue-element-admin是一个组件库，可以作为工具箱供开发者使用。