vue-cil怎么搭建后台

WBOY 原创: 2023-05-18 10:31:07 174浏览

在 Web 开发中，搭建一个数据驱动的后台管理系统非常普遍。使用 Vue.js 和 vue-cli 搭建一个后台管理系统可以极大地提高开发效率，并且保证代码的可维护性和可扩展性。本文将介绍一些步骤来创建一个基于 vue-cli 的后台管理系统。

步骤 1：安装 Node.js

首先，我们需要安装 Node.js。在 https://nodejs.org 上下载并安装适用于您操作系统的最新版本的 Node.js。安装完成后，可以在命令行界面中输入以下命令来检查 Node.js 是否安装成功：

node -v

如果成功安装，将显示您的 Node.js 版本号。

步骤 2：创建 vue-cli 项目

vue-cli 是一个由 Vue.js 官方提供的命令行工具，用于快速创建 Vue.js 项目。安装 vue-cli 可以使用以下命令：

npm install -g vue-cli

安装完成后，使用以下命令创建一个基本的 Vue.js 项目：

vue init webpack my-project

其中 my-project 是您的项目名称。此命令将提示您配置一些选项，例如项目名称、描述、作者等。您可以选择使用默认值，也可以按照自己的需求进行配置。执行该命令后，vue-cli 将自动生成项目的基础目录结构。

步骤 3：安装相关依赖

我们需要使用一些依赖来帮助我们快速构建数据驱动的后台管理系统。以下是一些基础依赖，您可以根据您的需要添加其他依赖：

npm install --save vue vue-router vuex
npm install --save-dev element-ui

其中，vue 是基础依赖，vue-router 和 vuex 用于创建路由和管理状态，element-ui 是一款基于 Vue.js 的 UI 组件库，提供了很多实用的组件和样式。

步骤 4：创建页面

现在，我们可以开始创建页面了。在 src/views 目录下创建以 .vue 结尾的 Vue 单文件组件，每个组件都应该代表一个页面。例如，我们可以创建一个名为 Dashboard 的组件来显示系统总览信息。在 Dashboard.vue 文件中，可以添加以下代码：

<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome to the Dashboard page</p>
  </div>
</template>

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

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
p {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>

以上代码定义了一个名为 Dashboard 的组件，包含一个页面标题和一些说明文本。请注意，样式是使用了 scoped 特性，这意味着仅该组件才能够使用这些样式。

由于我们将使用 vue-router 来管理页面路由，因此我们还需要在 src/router/index.js 文件中添加路由：

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '//m.sbmmt.com/m/',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

在以上代码中，我们将 / 路径映射到 Dashboard 组件中。

步骤 5：创建布局

后台管理系统通常包含一些共享的布局组件，例如头部、侧边栏和页脚。创建这些布局组件不仅可以减少重复代码，还可以使多个页面共享相同的布局。在 src/layout 目录下创建一个名为 Default.vue 的组件来代表默认布局。

Default.vue 组件应该包含如下内容：

<template>
  <div>
    <header></header>
    <div class="wrapper">
      <aside></aside>
      <main>
        <router-view></router-view>
      </main>
    </div>
    <footer></footer>
  </div>
</template>

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

<style scoped>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main {
  flex-basis: 60%;
}
@media (max-width: 767px) {
  .wrapper {
    display: block;
  }
  main {
    flex-basis: 100%;
  }
}
</style>

Default.vue 组件定义了布局的 HTML 结构，并在 main 标签内部使用了 router-view 组件，以便在页面切换时自动加载相应的组件。此外，我们还使用了一些 CSS 样式来定义页面的响应式布局。

在 App.vue 组件中引入 Default.vue 组件，如下所示：

<template>
  <div id="app">
    <default-layout></default-layout>
  </div>
</template>

<script>
import DefaultLayout from '@/layout/Default'

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

然后，我们需要修改 src/main.js 文件，确保 Vue.js 实例使用了我们的路由和布局：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

步骤 6：测试应用程序

最后，运行以下命令来启动项目：