Vue2.0でVue足場を構築する方法

この記事では主に Vue2.0 で Vue スキャフォールディングを構築する方法を紹介します。必要な友人は参考にしてください。ユーザーインターフェイスフレームの構築。

Vue はビュー層のみに焦点を当てており、ボトムアップのインクリメンタル開発設計を採用しています。

Vue の目標は、可能な限りシンプルな API を介してレスポンシブなデータ バインディングと合成ビュー コンポーネントを実装することです。

読む前に知っておくべきこと
htnl

css

javascript
node.js環境(npmパッケージ管理ツール)
webpackパッケージ化ツール
node.jsをインストール

コンピューターでwin+Rを開く 以下のインターフェースを開きます

nodeから 公式Webサイトからnodeをダウンロードしてインストールします。インストール手順は非常に簡単で、ずっと「次へ」だけです。 インストールが完了したら、コマンド ライン ツールを開き、以下に示すようにコマンド「node -v」を入力します。対応するバージョン番号が表示されれば、インストールは成功です。

必要なnpmパッケージマネージャーはnodeに統合されているため、npm -vを直接入力すると、以下のようにnpmのバージョン情報が表示されます。

ノード環境はここにインストールされており、npmパッケージ管理ツールも利用できます。ただし、npmの一部のリソースがブロックされているため、より高速かつより安定させるために、Taobaoのnpmイメージに切り替える必要があります。 -cnpm。

cnpmをインストールする

クリックしてタオバオのcnpm Webサイトに入り、詳細な設定方法が記載されています。

またはコマンドラインに直接入力します:

$ npm install -g cnpm --registry=https://registry.npm.taabao.org
その後、インストールが完了するまで待ちます。

「cnpm -v」と入力すると、現在の cnpm バージョンが表示されますが、これは npm バージョンとはまだ異なります。

cnpmの使い方は、npmが必要なところをcnpmに置き換えるだけです

vueインストール

vue.jsで大規模なアプリケーションを構築する場合は、npmインストールを使用することをお勧めします。 webpack または browserify モジュール バンドラーで使用されるようなもの。 vue.js は、単一ファイルのコンポーネントを開発するためのサポート ツールも提供します。

$ cnpm install vue

vue-cli スキャフォールディング構築ツールをインストールする

vue-cli は、大規模な単一ページ アプリケーションを迅速に構築するために使用できる公式コマンド ライン ツールを提供します。このツールは、すぐに使えるビルド ツール構成を提供し、最新のフロントエンド開発プロセスをもたらします。ホットリロード、保存時の静的チェック、実稼働準備が整ったビルド構成を備えたプロジェクトの作成と起動には、わずか数分しかかかりません:

vue-cli をグローバルにインストールする

$ cnpm install --global vue-cli

Create A Webpack テンプレートに基づく新しいプロジェクト

プロジェクトを作成するには、まずディレクトリを選択し、次にコマンド ラインでディレクトリを選択したディレクトリに変更する必要があります。

my-project
を使用してプロジェクト名をカスタマイズするか、

$ vue init webpack my-project

を使用してプロジェクトを初期化するか、

$ vue init webpack-simple my-project

を使用して単純なプロジェクトを初期化します

初期化コマンドを実行するとき、ユーザーはプロジェクト名、説明、作成者、その他の情報などのいくつかの基本オプションを入力するように求められます。入力したくない場合は、Enter キーを押してデフォルトに戻します。

プロジェクト名は大文字にできません。大文字にしないとエラーが報告されることに注意してください。

プロジェクト名 (my-project) # プロジェクト名 (私のプロジェクト)

プロジェクトの説明 (Vue.js プロジェクト) # プロジェクトの説明 Vue.js プロジェクト

Author 著者 (あなたの名前)

vue-router をインストールしますか? (Y/n) # Vue ルーティングをインストールしますか?コード？ (Y [ はい ] / N [ いいえ ])

ESLint プリセットを選択します (矢印キーを使用します) # プリセット ESLint を選択します (矢印キーを使用します)

Karma + Mocha でユニット テストをセットアップします (Y/n) # ユニットをセットアップしますか? Karma + Mocha をテストしますか? (Y/N)

Nightwatch で e2e テストをセットアップしますか? (Y/N) # Nightwatch 、エンドツーエンド テストをセットアップしますか? (Y/N)

もちろん、これらはすべてあなたの個人的な状況によって異なります。ここではすべて私が選択しました。

その前に、次のコマンドを使用してプロジェクトの依存関係の問題を解決する必要があります。

$ cnpm install

以下のような状況が表示されれば、依存関係は正常に解決されています。

プロジェクトを実行します

$ npm run dev

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue のメソッドにおけるメソッド クロージャ キャッシュの問題を解決する方法

Vue2.0 のカスタム命令とインスタンスの属性とメソッド

以上がVue2.0でVue足場を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。