Vue.js を始める

はじめに

vue.js は、シングルページ アプリケーションの開発に使用できるクライアント側の JS ライブラリです。プロジェクトを選択するために、angular、react、vuejs を順番に調べました。最初の 2 つはとても気に入っていて、後者はとても気に入りました。シンプルでクリーンで、高度な Web コンポーネントの実装も備えているからです。たとえドキュメントがあまりなくても、私はそれを選択します。次に、最初に開始プロジェクトを作成し、開発プロセスに含まれる概念とコンポーネントを確認します。

vue.js

まともな vuejs の開発プロセスは、ほとんどの場合 webpack と babel を組み合わせて行われますが、幸いなことに、vue.js には設定が非常に面倒です。 vue-cli と呼ばれます。シングルページ アプリケーションの開始コードを迅速に構築するために使用できます。よく使用される開発機能を起動するには 1 分しかかかりません:

利用可能なスキャフォールディング コード。

ホットリロード。コンポーネントコードが更新された後に自動的にリロードします

静的コード検査。

ES6言語機能

ツールの準備

足場プロジェクトを作成するにはvue-cliを使用する必要があります。

vue-cliをインストール

$ npm install -g vue-cli

ノードのバージョンを確認

私のバージョンは

$node -v

v5.0.0

$ npm -v

3.10.6

バージョンによって異なりますが、提案は私と同じです。

新しいプロジェクトを作成する

実行:

$ vue init webpack my-project

2 番目のパラメーター webpack は、「webpack」テンプレートに基づいて vuejs プロジェクトを作成するように指定します。このテンプレートは、Webpack スキャフォールディング コードを作成します。

ところで、webpackとは何ですか?これ自体は、js、css、および画像を 1 つ以上の js ファイルにパッケージ化できるパッケージング ツールであり、さまざまな種類のファイルを変換するためのプラグインとしてさまざまなローダーをサポートできます。実際、webpack は Vue タイプのファイルを読み込むときにプラグイン vue-loader を使用して形式変換を実行し、Vue タイプのファイルをブラウザが認識できる js ファイルに変換します。

中国ユーザーへの注意: vue init コマンドは npm を使用するため、npm ウェアハウスが遅くなるかブロックされることがよくあります。~/.npmrc を編集して次の内容を追加するだけです:

registry = https://registry.npm.taobao.org

この方法ははるかに高速です。 。

現在利用可能なテンプレートは次のとおりです:

webpack - webpack と vue-loader プラグインを通じて、babel を呼び出して、.vue ファイルをクライアントが認識できる js ファイルにコンパイルできます。ホット ロード、コード インスペクション、テストもデフォルトで提供できます。

webpack-simple - 最も単純な webpack および vue-loader プラグイン。

browserify - Browserify + vueify の組み合わせにより、babel を呼び出して、.vue ファイルをクライアントが認識できる js ファイルにコンパイルできます。ホット ロード、コード インスペクション、テストもデフォルトで提供できます。

browserify-simple - 最もシンプルな Browserify + vueify プラグイン。

理論的には、webpack とbrowserify は同様の機能を備えており、どちらもパッケージ化ツールとして使用できます。しかし、webpack は人気のあるツールであり、ドキュメントはほとんどありませんが、誰もがそれを使用しようと競い合っています。したがって、心配せずに、まずは webpack を使用してみましょう。

依存関係をインストールし、http://localhost:8080 に移動して効果を確認します。

vue ファイルを表示する

vue ファイルは三位一体です。つまり、css、html、js はすべて 1 つのファイル内にあり、タグで区切られています。構造を見やすくするために、まずエディターに対応したハイライト プラグインをインストールすることをお勧めします。

構文のハイライトをインストールする

私が使い慣れているエディターは崇高なテキストであり、プラグインをインストールすると、拡張子 .vue を持つすべての vuejs コンポーネント コードを識別し、コードの読み取りと書き込みを容易にするためにハイライトを与えることができます。このプラグインは vue-syntax-highlight と呼ばれ、vuejs によって公式に提供されています。 github.com にあります。 Sublime パッケージ ディレクトリにクローンを作成するだけです。私のコンピューターでは、Sublime パッケージのディレクトリは /Users/lcj/Library/Application Support/Sublime Text 3/Packages なので、インストール プロセスは

$ cd my-project
$ npm install
$ npm run dev

となり、再起動されます。コードを読み取ると、.vue 拡張子を持つすべてのファイルに対応するハイライトが表示されます。

vue の表示

src/hello.vue にある開始コードにコンポーネント コードがあります。表示:

cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages
git clone https://github.com/vuejs/vue-syntax-highlight

ファイルは 3 つの部分に分かれており、