vue鷹架搭建後台

近年來，前端開發越來越火熱，其中以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.設定路由

路由是前端開發中不可或缺的一部分，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中文網其他相關文章！