최근에는 프론트엔드 개발이 점점 더 대중화되고 있으며, 그 중 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
다음은 이러한 플러그인과 라이브러리의 기능에 대한 간략한 소개입니다.
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>이것은 가장 기본적인 레이아웃이며 필요에 따라 헤더와 사이드바에 자체 콘텐츠를 추가할 수 있습니다. Vue-Router에서 제공하는 router-view 컴포넌트는 el-main 부분에서 다른 경로에 해당하는 페이지를 표시하는 데 사용됩니다.
5. 라우팅 구성
라우팅은 프런트엔드 개발의 필수적인 부분입니다. Vue에서는 라우팅 기능을 구현하기 위해 제공됩니다. src 디렉터리에서 라우터 디렉터리를 찾아 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이 루트 경로로 사용됩니다. 레이아웃 구성 요소에는 헤더, 사이드바 등의 콘텐츠와 하위 페이지를 표시하기 위한 라우터 보기가 포함됩니다. 페이지 로딩 속도를 향상시키려면 하위 페이지를 비동기식으로 로드해야 하므로 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여기에는 사이드바 표시 및 숨기기를 제어하기 위한 사이드바라는 상태가 정의되어 있고, 사이드바의 상태를 변경하기 위한 토글사이드바 메소드가 제공됩니다. .
7. Element-UI 구성 요소 사용
Element-UI는 일반적으로 사용되는 UI 구성 요소를 많이 제공하므로 개발 효율성을 크게 향상시킬 수 있습니다. 다음은 일반적으로 사용되는 구성 요소에 대한 소개입니다.
여기에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
