vue-cil을 사용하여 백엔드를 구축하는 방법

웹 개발에서는 데이터 기반 백엔드 관리 시스템을 구축하는 것이 매우 일반적입니다. 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.vue 파일에 다음 코드를 추가할 수 있습니다.

<template>
  <div>
    <h1 id="Dashboard">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>

위 코드는 페이지 제목과 일부 설명 텍스트가 포함된 대시보드라는 구성 요소를 정의합니다. 스타일에는 범위가 지정되어 있습니다. 즉, 구성 요소에서만 스타일을 사용할 수 있습니다.

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: '/',
      name: 'Dashboard',
      component: 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 구조를 정의하고 기본 태그 내의 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>

그런 다음 Vue.js 인스턴스가 라우팅 및 레이아웃을 사용하도록 src/main.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단계: 애플리케이션 테스트

마지막으로 다음 명령을 실행하여 프로젝트를 시작합니다.

npm run dev

이 명령은 개발 서버를 시작하고 브라우저에 애플리케이션을 표시합니다. 모든 것이 정상이면 대시보드 페이지를 볼 수 있습니다.

요약

vue-cli를 사용하여 백엔드 관리 시스템을 구축하는 것은 데이터 기반 솔루션을 구축하는 빠른 방법입니다. 프로젝트가 생성된 후 필요한 종속성과 페이지를 추가하여 시스템 기능을 점진적으로 개선합니다. 이 문서에서는 기본 백엔드 관리 시스템을 만드는 데 필요한 몇 가지 단계를 배웠습니다. 당신의 발전에 행운을 빕니다!

위 내용은 vue-cil을 사용하여 백엔드를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!