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

好的，以下是步骤：

1. 首先，你需要安装 Node.js 和 npm。如果你还没有安装的话，可以前往官网下载并安装。

2. 打开终端并输入以下命令，安装 Vue CLI。

npm install -g @vue/cli

3. 使用 Vue CLI 创建一个新的项目。

vue create my-project

4. 选择 "Manually select features" 选项，并选择 "Babel" 和 "Router"。

5. 接下来，选择 "ESLint + Prettier" 选项。

6. 然后，选择 "In package.json" 选项，以便在项目中使用 ESLint 和 Prettier。

7. 然后，选择 "Linter / Formatter" 选项，并选择 "ESLint"。

8. 接下来，选择 "History mode" 选项，以便在项目中使用路由。

9. 然后，选择 "CSS Pre-processors" 选项，并选择 "Sass/SCSS (with dart-sass)"。

10. 最后，选择 "Save this as a preset for future projects?" 选项。

11. 进入项目目录，并使用以下命令安装 vue-admin-template。

npm install vue-admin-template --save

12. 创建一个新的路由文件。

// src/router/admin.js

import Layout from '@/layout'

const adminRouter = {
  path: '/admin',
  component: Layout,
  children: [
    {
      path: '',
      component: () => import('@/views/admin/index'),
      name: 'Admin',
      meta: { title: 'Admin', icon: 'dashboard' }
    }
  ]
}

export default adminRouter

13. 在 main.js 文件中引入和注册路由。

// main.js

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

import '@/styles/index.scss' // global css
import '@/icons' // icon

Vue.config.productionTip = false

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

14. 创建一个新的视图文件。

// src/views/admin/index.vue

<template>
  <div class="admin">
    <h1>Admin Page</h1>
  </div>
</template>

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

15. 在 App.vue 文件中添加路由视图。

// App.vue

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

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

16. 运行项目并访问 http://localhost:8080/admin，你应该可以看到 "Admin Page" 页面。

npm run serve

以上就是使用 vue-admin-template 搭建一个 vue 后台管理系统的简单步骤。希望能对你有所帮助！