用element+vue2写一个后台管理系统

很高兴为您提供帮助。下面是用element+vue2写一个后台管理系统的步骤：

创建一个vue项目

使用vue-cli可以快速创建一个vue项目，命令如下：

vue create my-project

安装element-ui

在项目中安装element-ui，命令如下：

npm install element-ui -S

引入element-ui

在main.js中引入element-ui和其样式，代码如下：

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

Vue.use(ElementUI)

创建路由

使用vue-router创建路由，在项目中创建一个router.js文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

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

创建组件

在views目录中创建组件，例如Home.vue，代码如下：

<template>
  <div class="home">
    <el-button type="primary">按钮</el-button>
  </div>
</template>

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

<style>
</style>

修改App.vue

在App.vue中添加router-view组件，代码如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
</style>

运行项目

运行项目，命令如下：

npm run serve

打开浏览器，在地址栏中输入http://localhost:8080/，进入后台管理系统。

至此，用element+vue2写一个后台管理系统的步骤就结束了。希望我的回答对您有所帮助。