vue-cil を使用してバックエンドを構築する方法

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 はルーティングの作成とステータスの管理に使用され、要素はui は、Vue.js の UI コンポーネント ライブラリをベースにしたソフトウェアで、多くの実用的なコンポーネントとスタイルを提供します。

ステップ 4: ページを作成する

ここで、ページの作成を開始できます。 src/views ディレクトリに .vue で終わる Vue 単一ファイル コンポーネントを作成します。各コンポーネントはページを表す必要があります。たとえば、システムの概要情報を表示するダッシュボードというコンポーネントを作成できます。 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 という名前のコンポーネントを定義します。スタイルにはスコープが設定されていることに注意してください。つまり、コンポーネントのみがスタイルを使用できます。

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: レイアウトを作成する

バックエンド管理システムには通常、ヘッダー、サイドバー、フッターなどの共有レイアウト コンポーネントが含まれています。これらのレイアウト コンポーネントを作成すると、重複したコードが削減されるだけでなく、複数のページで同じレイアウトを共有できるようになります。デフォルトのレイアウトを表す Default.vue という名前のコンポーネントを src/layout ディレクトリに作成します。

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 スタイルを使用して、ページの応答性の高いレイアウトを定義しました。

次に示すように、Default.vue コンポーネントを App.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: アプリケーションをテストします

最後に、次のコマンドを実行してプロジェクトを開始します:

npm run dev

このコマンドにより開発が開始されますサーバーに保存し、ブラウザに表示します。 アプリケーションを表示します。何も問題がなければ、[ダッシュボード] ページが表示されるはずです。

概要

vue-cli を使用してバックエンド管理システムを構築することは、データ駆動型ソリューションを構築する簡単な方法です。プロジェクトの作成後、必要な依存関係やページを追加して、システムの機能を徐々に改善していきます。この記事では、基本的なバックエンド管理システムを作成するために必要な手順のいくつかを学習しました。あなたの発展に幸あれ！

以上がvue-cil を使用してバックエンドを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。