初心者開発者向けのVue.jsチュートリアル:基本を学び、このスターターVue構造を使用する

初心者向けVue.jsチュートリアル


開発フローで新しいテクノロジーの使用を開始するときはいつでも、少なくとも少し不安を感じるかもしれません。特に、無数のnpmパッケージが出回っている場合はなおさらです。物事を混合して一致させるには、多くの時間と労力を要することがあり、通常はイライラさせられます. これは、初心者開発者向けの次のVue.jsチュートリアルが役立つところです.

Vue.jsとは何ですか?なぜあなたは気にする必要があります?

Vue.jsまたは略してVueは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。 AngularやReactなどの他のフレームワークと比較して、Vueはより親しみやすく、学習曲線が急ではありません.

Vueもモジュール式であり、コードを再利用可能なコンポーネントに分割できます。それぞれに独自のHTMLマークアップ、CSS、JavaScriptコードがあります.

このVue.jsチュートリアルの範囲は何ですか?

この短いVue.jsチュートリアルの目的は、Vueを構築して試すことができる足場を提供することです。 WordPressダッシュボード内のVueアプリの基本設定を見ていきます.

(注:このガイドではVue自体については説明しませんが、フレームワークの詳細については、 公式ガイド ここでプロジェクトを設定した後–完了後も実験を続けることができます。また、開発プロセスをより効率的にする、最も興味深いVue UIコンポーネントライブラリのいくつかをお勧めします。)

ここでは、Vueを使用するWordPressプラグイン用に事前定義されたテンプレートを使用します。さらに詳しく知りたい場合は、次のGitHubリポジトリで見つけることができます。 https://github.com/abaicus/vue-wp-bootstrap.

Vue.jsチュートリアル:前提条件

このガイドを続けるために、コンピュータに設定しておくべきことがいくつかあります。

最初に、LAMPスタックが必要になります。WindowsまたはMacではXAMPP、MacではFlywheel by Localを使用して、新しいWordPressのローカルインストールをセットアップできます。.

あなたが持っていることを確認してください NodeJSパッケージマネージャー (npm)がマシンにインストールされています。また、ターミナルを介してさらに2つのパッケージ(Vue CLIとVueテンプレート初期化ツール)をインストールする必要があります。そのようです:

$ npm install -g @ vue / cli
$ npm install -g @ vue / cli-init

これら2つの依存関係をインストールしたら、アクティブディレクトリをローカルのWordPressインスタンスのwp-content / pluginsディレクトリに変更し、そこで次のコマンドを実行する必要があります。

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

次に、プロジェクトのセットアップに関するいくつかの質問に答えるように求められます.

ビルドプロンプトについては、とりあえず最初のオプションを選択してください "ランタイム+コンパイラ:ほとんどのユーザーに推奨".

必要に応じて、ESLintリンターを有効にできます。プロジェクトのリンティングエラーを検出しますが、現時点では必ずしもこれを心配する必要はありません.

Commit LintとPre-Commit Hooksは、GitHubにコミットを送信する前に、コミットメッセージとコードをチェックすることを目的としています。.

終了後、端末は多かれ少なかれこのように見えます:

画面の指示に従ってください。ディレクトリを新しく生成されたプラグインディレクトリに変更し、ターミナルプロンプトに表示されるコマンドを実行します。これにより、アプリケーションが起動して実行され、コード内の変更を待機し、VueコードをJavaScriptにトランスパイルします.

それは何をするためのものか?

あまりない。これは、バックエンドからのデータを表示する基本的なアプリケーションにすぎません。フードの下ではあまりVueはありません。プラグインダッシュボードページに移動してアクティブ化できます。管理メニューに新しいページが追加されます。そこに移動すると、2つの文字列を含むダッシュボードページが見つかります。

プラグインの足場構造

新しく生成されたプラグインのファイル構造を見てみましょう。アプリケーションの構造に集中できるように、このVue.jsチュートリアルではほとんどの構成ファイルを無視します。

まず、実際のプラグインのエントリポイントであるplugin.phpファイルがあります。ここでは、メイン プラグイン クラス。これは、アプリケーションの主要コンポーネントが含まれ、実行される場所です.

次に、すべての依存関係と他のプロジェクト情報の束が定義されているpackage.jsonファイルがあります。あなたが興味があるかもしれない部分は、 "スクリプト" フィールド。そこでは、npm runプレフィックスで実行できるすべてのコマンドがあります。今のところ重要なのは、npm run dev(開発用のアプリケーションをビルドする)とnpm run build(アプリを本番環境にデプロイする準備ができたら実行する必要があります)です。他のコマンドはこれら2つのコマンドに隣接しているか、現時点で心配する必要のない他のことを行います.

includeディレクトリ内には、3つのファイルがあります。

  • rest.phpクラスは現時点では何もしませんが、RestAPIルートを追加するための構造はすでにあります
  • assets.phpクラスは、スタイルとスクリプトのエンキューを処理します。ここで、JavaScriptファイルはローカライズされており、PHPからVueアプリに開始データを渡します。現時点では、送信されるテキストは2つだけですが、必要なものをすべて含めることができます.
  • admin.phpファイルは、ダッシュボードに新しいページを追加し、実際のプラグインページをレンダリングするファイルです。アプリ自体がplugin_page()関数内の2つの空のタグとしてレンダリングされることに気づくでしょう。これは、JavaScriptがロード後にアプリケーションの実際のレンダリングを処理するためです.

アセットディレクトリ内には、さらに4つのディレクトリがあります。

  • srcディレクトリ–後で説明するVueアプリのソースファイル.
  • scssディレクトリ– CSSスタイルシートを生成するSCSSスタイルファイル.
  • jsディレクトリー– srcディレクトリー内のファイルから生成されるトランスパイルされたコード.
  • cssディレクトリ– SCSSファイルからのコンパイル済みスタイル.

srcディレクトリーとVueテンプレートファイル

このディレクトリ内には、main.jsとApp.vueの2つのファイルがあります。 main.jsファイルは、アプリケーションのエントリポイントです。 Vueアプリコンポーネントを対応するIDのDOM要素にアタッチします.

/ * jshint esversion:6 * /
‘vue’からVueをインポートする
「./App.vue」からアプリをインポート

window.addEventListener( ‘load’、function(){
new Vue({// eslint-disable-line no-new
el: ‘#mvdp-app’,
コンポーネント:{アプリ},
レンダリング:(h)=> h(アプリ)
})
})

実際のアプリケーションマークアップは、App.vueテンプレート内にあります。

/ * jshint esversion:6 * /

{{this.strings.title}}

{{this.strings.description}}

/ *グローバルMVDP * /
デフォルトのエクスポート{
データ(){
返す{
文字列:MVDP.strings
}
},
名前: ‘App.vue’
}

上記のスニペットの中では、Assetsクラスでローカライズした文字列を使用していることがわかります。 Vueの優れた機能の1つは、コンポーネントのコードがテンプレート、スクリプト、スタイルにきちんと整理されており、構造を理解しやすいことです.

以上で、Vue.jsを使用してさらに開発したいものの出発点が確定しました。このVue.jsチュートリアルがお役に立てば幸いです.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウト、プレゼンテーション、編集.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map