vue脚手架搭建后台-前端问答-PHP中文网

vue脚手架搭建后台

PHPz

发布： 2023-05-18 13:03:08

原创

565人浏览过

近年来，前端开发越来越火热，其中以vue框架最为热门。而对于企业级应用，一般需要配备后台管理系统，因此本文将介绍如何使用vue脚手架搭建后台管理系统。

1.前置条件

首先需要具备的是Vue的基础知识，包括组件、路由、状态管理等。此外，需要安装Node.js和npm，这里不再赘述。

2.创建项目

使用Vue脚手架可以方便快捷地搭建项目结构。首先，打开命令行界面，输入以下命令：

立即学习“前端免费学习笔记（深入）”；

vue create my-project

登录后复制

其中，my-project为项目名称，可以替换成自己想要的名称。接下来，会有一些配置选项，如下图所示：

选择默认配置即可。接下来，等待一段时间即可完成项目创建。

3.安装必要的插件和库

使用Vue脚手架创建的项目已经包含了一些必要的插件和库，但是为了使后台管理系统更加完善，还需要安装一些插件和库。在项目根目录下，使用以下命令安装：

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

登录后复制

这里简要介绍一下这些插件和库的作用：

vue-router：用于前端路由
vuex：用于状态管理
element-ui：基于Vue的UI组件库，可以提供丰富的组件
axios：用于ajax请求

4.创建页面布局

首先，我们需要创建一个外部框架，以便在页面切换时始终保持页面头部和侧边栏的固定。这里使用Element-UI提供的布局组件：

<template>
  <el-container>
    <el-header>
      <!-- 头部内容 -->
    </el-header>
    <el-container>
      <el-aside>
        <!-- 侧边栏内容 -->
      </el-aside>
      <el-main>
        <!-- 主体内容，用于显示页面 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

登录后复制

这是一个最基本的布局，我们可以根据需要在头部和侧边栏中添加自己的内容。需要注意的是，在el-main部分使用了Vue-Router提供的router-view组件，用于显示不同路由对应的页面。

5.配置路由

文心智能体平台

百度推出的基于文心大模型的Agent智能体平台，已上架2000+AI智能体

查看详情

路由是前端开发中不可或缺的一部分，Vue中提供了Vue-Router用于实现路由功能。在src目录下，找到router目录，并编辑index.js文件，加入以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/dashboard',
      component: Layout,
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: () => import('@/views/dashboard/index')
        }
      ]
    }
  ]
})

export default router

登录后复制

这里创建了一个名为Dashboard的路由，并使用Layout作为根路由。在Layout组件中包含了头部和侧边栏等内容，还包括了router-view用于显示子页面。需要注意的是，子页面需要异步加载才能提高页面的加载速度，因此使用了Vue提供的import()函数来实现按需加载。

6.状态管理

在全局状态管理方面，Vue提供了Vuex来实现。在src目录下，创建store.js文件，并添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    sidebar: {
      opened: true
    }
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
      state.sidebar.opened = !state.sidebar.opened
    }
  },
  actions: {
    toggleSideBar ({ commit }) {
      commit('TOGGLE_SIDEBAR')
    }
  }
})

export default store

登录后复制

这里定义了一个名为sidebar的状态，用于控制侧边栏的显示与隐藏，并提供了一个toggleSideBar方法，用于改变侧边栏的状态。

7.使用Element-UI组件

Element-UI提供了很多常用的UI组件，可以大大提高开发效率。这里简介一下常用的组件：

el-button：按钮组件
el-table：表格组件
el-form：表单组件
el-input：输入框组件
el-select：下拉框组件
el-pagination：分页组件
等等

这里以el-table组件为例介绍一下如何使用：

<el-table :data="tableData">
  <el-table-column
    prop="date"
    label="日期">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址">
  </el-table-column>
</el-table>

登录后复制

在这里，我们使用了一个名为tableData的数组作为表格数据源，并分别定义了三列：日期、姓名和地址。

8.使用axios发送请求

在最后，我们需要使用axios来发送请求获取后台数据。在src目录下，创建api目录并在其中创建一个名为user.js的文件：

import request from '@/utils/request'

export function getUserList (params) {
  return request({
    url: '/user/list',
    method: 'get',
    params
  })
}

export function addUser (data) {
  return request({
    url: '/user/add',
    method: 'post',
    data
  })
}

登录后复制

这里封装了获取用户列表和添加用户两个方法，并使用了之前安装的axios插件来发送请求。

至此，一个简单的后台管理系统就搭建好了。当然，具体的功能还需要根据实际需求来扩展，但是很多基础的操作已经完成，如路由、状态管理、UI组件等。本文只是对整个流程做了一个简单的介绍。

以上就是vue脚手架搭建后台的详细内容，更多请关注php中文网其它相关文章！